---
name: MVRDV
description: "The site perfectly exemplifies the 'bold typography over photography' aesthetic, making it a strong reference for large-scale portfolio designs."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#ffffff"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 172.8px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-1px"
  display-sm:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, image-driven architecture studio site featuring massive typography over full-bleed project photography.

*An architectural studio's portfolio showcasing large-scale structural projects and bold design concepts.*

## Colors

Monochrome palette of black and white, relying entirely on photographic content for visual interest.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#ffffff`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Display type is strictly uppercase and tightly tracked.
- Body text is standard sentence case with normal weight.
- Bold weight is reserved for specific emphasis.

## Layout

Full-bleed hero images alternating with stark white content sections.

*Rhythm:* Generous vertical rhythm with large padding blocks (approx 56px top/bottom) for clear section separation.

## Elevation & Depth

- rgba(0,0,0,0.4) 0px 0px 2px 0px
- rgba(0,0,0,0.2) 0px 0px 5px 0px
- Borders: Thin 1px black borders used for buttons and dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal outlined square buttons containing only a simple arrow icon.
- **card:** Large photographic hero blocks without borders or padding.
- **chip:** Vertical navigation dots on the right edge.
- **hero:** Massive full-viewport images with heavy sans-serif type overlaid directly on the photo.

## Do's and Don'ts

**Don't:**
- Don't use multiple background colors — screenshot shows strict black and white alternation.
- Don't use rounded corners — screenshot shows square, sharp-edged buttons.
- Don't use drop shadows on large elements — screenshot shows flat, border-based UI.
- Don't use serif typography — screenshot shows exclusively sans-serif fonts.
- Don't add decorative flourishes — screenshot shows minimal, geometric elements.
- Don't use complex card layouts — screenshot shows massive, full-bleed photographic blocks.

---

## System Prompt (paste into AI agent)

```
This is a premium architecture studio portfolio characterized by massive, bold typography and full-bleed architectural photography. The palette is strictly monochromatic, utilizing only black (#000000) and white (#ffffff) to create high contrast. The typography categories are grotesque-sans, with display text set in large, tightly tracked uppercase. Critical constraints include avoiding any color accents, avoiding rounded UI shapes, and never adding shadows to the primary layout components. The layout relies on stark alternation between photographic hero sections and clean white content blocks to convey a sense of scale and vision.
```