---
version: alpha
name: "Wolff Olins"
description: "Transformative brand consultancy — ink-black canvas, Monument Grotesk at every scale, electric yellow as the singular rupture, and a proprietary variable wordmark that renders at 317px with line-height 0.70"

colors:
  # Primary canvas — near-absolute black
  background: "#000000"
  # Warm light-grey surface for cards and secondary panels
  surface: "#f5f5f5"
  # Primary text on dark — pure white
  ink: "#ffffff"
  # Text on light surface panels
  on-background: "#ffffff"
  on-surface: "#000000"
  # Primary brand accent — electric yellow
  primary: "#fff84b"
  on-primary: "#000000"
  # Container tint for accent states
  primary-container: "#fffde0"
  # Muted mid-grey text and captions
  ink-muted: "#959595"
  # Darker mid for secondary contexts
  ink-secondary: "#616161"
  # Hover / interactive state — medium grey
  text-hover: "#bfbfbf"
  # Focus ring treatment — electric yellow on dark
  focus-ring: "#fff84b"
  # Border treatment — grey hairline on light surfaces
  border: "#959595"
  # Shadow tint — light grey for cookie banner overlays
  shadow-soft: "#c7c5c7"

typography:
  display-hero:
    fontFamily: "WolffOlinsVF, ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 317px
    fontWeight: 400
    lineHeight: 0.70
    letterSpacing: 0px
  display:
    fontFamily: "Untitled-Serif, Georgia, Times New Roman, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.76px
  heading-section:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 55px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px
  heading-sub:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.16px
  button-ui:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0.16px
  caption:
    fontFamily: "ABCMonumentGrotesk, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.13px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 80px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 32px
---

# Wolff Olins Design System

## Overview

The Wolff Olins website opens on an absolute-black canvas (`{colors.background}`) with a proprietary variable font — the "WO" monogram — rendered at 317 pixels with a line-height of 0.70. The letters collapse into themselves, occupying the full viewport width as a typographic object rather than a heading. This is not a logo treatment; it is a declaration. The consulting firm whose portfolio includes Uber, Tate, and New York City has built a site that practices transformative boldness without any safety margin. There is no hero image, no explanatory subheadline. Just compressed letterforms on black and the immediate weight of a 40-year reputation.

Below the monogram, the visual language splits into two registers. `{typography.display}` editorial copy renders in Untitled-Serif — a clean contemporary serif that carries case study headlines and long-form narratives. Every other element runs in ABC Monument Grotesk, from the 55px section anchors to the 13px metadata labels. The contrast is deliberate: the serif signals editorial depth, the sans handles operational clarity. Neither face decorates. Both are licensed custom fonts — the WolffOlinsVF variable font loads as the most distinctive element, registered with the CSS `"dlig"` discretionary ligature feature that shapes the monogram's internal letterform relationships. The colour system is almost entirely monochromatic, with one exception: `{colors.primary}` electric yellow (`#fff84b`), which appears on borders, CTAs, and interactive highlights as the only chromatic rupture. On black, it hits with maximum perceptual impact. On white surface panels, it reads closer to a mid-tone. The system knows this and uses it accordingly — never decorative, always functional.

Motion is integral. Two marquee animations (`marquee` and `marquee2`) scroll case study tiles and credential copy at a continuous 15-second linear loop. Card-level transitions run at 0.3s–0.65s with a custom ease-in `cubic-bezier(0.65, 0.05, 0.36, 1)` — quick enough to feel sharp, measured enough to feel assured. Link transitions at 0.15s use the standard Material-adjacent `cubic-bezier(0.4, 0, 0.2, 1)` for color and border-color shifts. This is a site designed to be in motion as a default state, not a hover-reactive one.

**Key Characteristics:**
- Proprietary `WolffOlinsVF` variable font at 317px with `"dlig"` discretionary ligatures — the monogram IS the hero, not a branding element beside one
- ABC Monument Grotesk handles every UI text role from 55px section headings to 13px captions — a single-register sans with genuine optical range
- Untitled-Serif at `{typography.display}` for editorial case study headlines: 64px, weight 400, line-height 1.00, tight -1.76px letter-spacing
- `{colors.primary}` electric yellow `#fff84b` is the system's sole accent — applied to borders, pill badges, CTA backgrounds, and focus states only
- `{rounded.none}` and `{rounded.pill}` are the only two radius values that matter — sharp-edged on all content surfaces, fully-capped on interactive pills
- Continuous horizontal marquee at 15s linear — the scroll IS the grid presentation, not a replacement for it
- Black-and-white palette with grey mid-tones (`{colors.ink-muted}` at `#959595`, `{colors.ink-secondary}` at `#616161`) for metadata hierarchy
- Motion at 0.3s–0.65s ease-in for card transitions; 0.15s ease-in-out for link and border state changes
- 18 dense breakpoints including sub-pixel variants (768px and 769px, 896px and 897px) — pixel-precision responsive behaviour on boundary conditions
- Shadow vocabulary is minimal: one low-confidence `rgba(0, 0, 0, 0.2)` layer at 8px blur for the cookie modal overlay — all content surfaces are shadow-free

## Colors

### Primary Canvas & Surface
- **Absolute Black** (`{colors.background}`): The dominant page canvas — no warm or cool temperature, maximum contrast. Every section, navigation strip, and hero background resolves to this value. The density of black amplifies the electric yellow accent and renders the white typography without compromise.
- **Light Grey Surface** (`{colors.surface}`): Secondary content panels and card backgrounds — `#f5f5f5`, a step off pure white with barely perceptible warmth. Used for light-mode presentation cards and feature panels that need to punctuate the black canvas.

### Text Hierarchy
- **Pure White** (`{colors.ink}`): Primary text on dark — all body copy, headings, navigation labels, and link text on the black canvas. The `#ffffff` value at large sizes handles weight 400 Grotesk with maximum legibility.
- **White on Background** (`{colors.on-background}`): Headline copy in the hero and dark editorial sections — structurally identical to `{colors.ink}` but semantically scoped to large-scale display usage.
- **Charcoal on Surface** (`{colors.on-surface}`): All text on `{colors.surface}` light panels — full-contrast near-black reading type on the grey card backgrounds.
- **Medium Grey** (`{colors.ink-muted}`): Captions, metadata, de-emphasized labels — `#959595`, which appears with 50 instances in the extraction. At 61.7% LCH lightness, it sits comfortably within WCAG AA on both white and light-grey surfaces.
- **Dark Mid-Grey** (`{colors.ink-secondary}`): Secondary text on light panels — `#616161`, a denser grey for sub-headings and category labels that need more presence than `{colors.ink-muted}` without competing with primary ink.

### Brand Accent
- **Electric Yellow** (`{colors.primary}`): The signature rupture color — `#fff84b`, identified as both `semantic.primary` and as a border color on interactive buttons. Appears on pill button borders, CTA fills, tag backgrounds, and the `{colors.focus-ring}` focus indicator. On black, it carries the visual weight of orange without the warmth.

### Interaction States
- **Hover Grey** (`{colors.text-hover}`): All link hover states resolve to `#bfbfbf` — the counter-color to the active state, marking interactivity without introducing a new hue. Links default to `underline 2px` on black; hover removes the underline and shifts toward this grey.
- **Focus Ring** (`{colors.focus-ring}`): Electric yellow `{colors.primary}` repurposed as the keyboard focus indicator — ensures maximum visibility against the black canvas.

### Borders
- **Grey Hairline** (`{colors.border}`): `1px solid #959595` — the standard content border appearing on section dividers, card edges on light panels, and input outlines. Twenty instances across the extraction, all high-confidence.
- **Yellow Border** (`{colors.primary}`): `1px solid #fff84b` — the interactive border state on buttons and active filter elements; 7 instances.

## Typography

### Font Family
- **Display Monogram**: `WolffOlinsVF` (proprietary variable font), with fallback: `ABCMonumentGrotesk, Inter, ui-sans-serif, sans-serif`. Self-hosted as `WolffOlinsVF.e7de9d46.woff2`. Uses `font-feature-settings: "dlig"` (discretionary ligatures) for the monogram's internal letterform shaping.
- **Editorial Serif**: `Untitled-Serif`, with fallbacks: `Georgia, Times New Roman, serif`. Self-hosted as `untitled-serif-regular.fa23a936.woff2`. Appears at display sizes (64px) for case study headlines and long-form editorial copy.
- **Primary UI / Body**: `ABCMonumentGrotesk`, with fallback: `Inter, ui-sans-serif, system-ui, sans-serif`. Self-hosted in two weights — Regular (`ABCMonumentGrotesk-Regular.c7f7cb75.woff2`) and Medium (`ABCMonumentGrotesk-Medium.609b3812.woff2`). Handles every non-display, non-serif typographic role from 55px headings to 13px footnotes.

*Note: WolffOlinsVF and ABCMonumentGrotesk are commercial typefaces. For unlicensed implementations, Space Grotesk or DM Sans are the closest Google Fonts matches for Monument Grotesk. For Untitled-Serif, Playfair Display or Spectral approximate the clean contemporary serif register. The closest Google Font to the system overall: Space Grotesk (sans), Spectral (serif).*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | WolffOlinsVF monogram at 317px — full-viewport typographic hero |
| `display` | Untitled-Serif case study and editorial headlines — 64px, tight tracking |
| `heading-section` | Monument Grotesk at 55px — major section anchors and feature titles |
| `heading-sub` | Monument Grotesk at 35px — sub-section intros and case study sub-heads |
| `body-large` | Monument Grotesk at 30px — feature lead paragraphs, service descriptions |
| `body` | Monument Grotesk at 20px — standard body copy and project descriptions |
| `nav-link` | Monument Grotesk at 16px — navigation, footer links, UI labels |
| `button-ui` | Monument Grotesk at 16px weight 700 — pill button labels, CTA text |
| `caption` | Monument Grotesk at 13px — image credits, metadata, category tags |

### Principles
- **Weight 400 across all editorial contexts**: The WO monogram and Untitled-Serif editorial headlines both run at weight 400. Monument Grotesk only reaches weight 700 in button labels — everywhere else it reads at 400. The authority comes from size and tracking, not mass.
- **Tight letter-spacing on serif only**: Untitled-Serif at 64px carries -1.76px letter-spacing — the only instance of negative tracking in the system. Monument Grotesk runs at 0px or slight positive values (0.13–0.16px on UI labels and captions). The serif compresses; the sans opens.
- **Single sans, full range**: Monument Grotesk handles display (55px), body (20px), and micro (13px) without a secondary companion. The typeface has sufficient optical variation across its size range to maintain hierarchy without switching faces.
- **The `"dlig"` feature is load-bearing**: Discretionary ligatures on WolffOlinsVF shape the "WO" monogram's internal relationships — this is not a decorative feature toggle. Without it, the display treatment loses its characteristic letterform compression.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. The system concentrates density at the micro end (8–12px for internal component gaps) and uses 48–128px for section-level breathing room. The 128px value appears 17 times in the extraction — it is the dominant large-scale horizontal padding at wide desktop viewports, keeping content well inside the viewport edge even at 1536px.

### Grid & Container
- Max content width: approximately 1536px at the largest breakpoint; content inset at 128px horizontal padding at wide desktop
- Work grid: horizontal marquee scroll (not a traditional column grid) — case study tiles move continuously via `marquee` animation at 15s linear
- Section layout: stacked full-width sections with the black canvas as the continuous ground
- Alternating presentation: dark-canvas sections with white type interspersed with occasional light-panel card moments

### Whitespace Philosophy
- **Spacious at macro scale**: The 96–128px horizontal padding creates wide margins that frame content within the black canvas rather than running edge-to-edge. The page breathes even on full-width sections.
- **Tight at micro scale**: Internal component gaps of 8–12px create dense, compressed information units — the contrast between generous margins and tight interior spacing is a defining rhythm.
- **The marquee as anti-grid**: Rather than a static column grid for case studies, the continuous scroll treats the work as a landscape rather than a catalog. Nothing is aligned to a column boundary.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All canvas sections, navigation, work cards, editorial panels |
| Surface Lift (Level 1) | Background shift: `{colors.background}` → `{colors.surface}` | Light-mode feature cards — depth through contrast only |
| Modal (Level 2) | `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` | Cookie consent modal — the only drop shadow in the system |
| Focus Ring | `outline: {colors.focus-ring} solid 2px` | Keyboard focus on interactive elements |

**Shadow Philosophy**: The Wolff Olins design system is nearly shadowless — the `rgba(0, 0, 0, 0.2)` shadow appears exactly twice in the extraction, both attributed to the cookie consent overlay (a third-party component, not the brand system itself). All native content — cards, buttons, navigation, project tiles — sits flat. Depth is communicated through the stark contrast between the absolute-black canvas and any lighter surface that appears against it. The electric yellow `{colors.primary}` creates its own perceptual depth on black through luminance difference alone, without any shadow or glow effect.

## Shapes

The complete radius scale is declared in the `rounded:` token block above. The system is deliberately minimal:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All content surfaces, cards, navigation, images, section panels |
| `sm` | 2px | Cookie consent UI elements and minor interactive chrome |
| `pill` | 9999px | Pill buttons, tags, and scroll indicator elements — appearing 28 times at high confidence |

The radius vocabulary is essentially binary: sharp edges on all content and structural surfaces, fully-capped pills on interactive elements. The 2px value is isolated to the third-party cookie banner and does not represent a brand design decision. No mid-range radius (4–20px) exists in the native system. This is a firm that builds identities for major brands — its own digital presence communicates through geometry that does not hedge.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — electric yellow `{colors.primary}` fill, black `{colors.on-primary}` text, Monument Grotesk 16px weight 700, pill radius. On the black canvas, this reads as a high-energy action; the colour inversion on hover (`button-primary-hover`) — black background, white text — signals the change without breaking the palette.
- **`button-secondary`** — transparent background with `{colors.border}` grey hairline border, white text; transitions to yellow fill on hover. Used for secondary CTAs where the yellow primary would visually compete with adjacent content.
- **`button-ghost`** — transparent with white border on dark editorial sections — the lowest-emphasis interactive element, used where a button's presence must not disturb a media-heavy context.

### Cards

**Work / Case Study Tile (Marquee)** — appears as a horizontal scroll element, not a static card. Background `{colors.background}` or `{colors.surface}` depending on section context. No border-radius. Project title in Monument Grotesk at `{typography.heading-sub}` 35px; category label in `{typography.caption}` 13px `{colors.ink-muted}`. Transition: opacity and clip-path at 0.3s–0.65s `cubic-bezier(0.65, 0.05, 0.36, 1)` on card-enter.

**Feature Panel Card** — light-surface variant on `{colors.surface}` grey, sharp corners, 24px internal padding. Used to break the black-canvas flow with a lit-stage effect. Text in `{colors.on-surface}`.

### Inputs

**Form Input** — transparent background on dark, `{colors.ink}` text, no radius, borderless at rest. Focus state transitions to `{colors.focus-ring}` yellow outline. The stripped input matches the black canvas without visual chrome weight.

### Navigation

Sticky top bar on `{colors.background}` — Wolff Olins wordmark SVG left-aligned (140×22px), primary links right in Monument Grotesk 16px. Navigation height transitions at 0.3s `cubic-bezier(0, 0, 0.2, 1)` on scroll. Links default to `underline 2px` (primary CTAs) or no underline (navigation labels); all hover states transition to `{colors.text-hover}` grey over 0.15s. No border or shadow on the nav container.

## Do's and Don'ts

### Do
- Use `{colors.background}` absolute black as the dominant canvas — never substitute a near-black or dark grey; the maximum-contrast field is a design decision, not a default
- Apply `{colors.primary}` electric yellow exclusively for interactive signals — primary CTA fills, yellow borders on active elements, and `{colors.focus-ring}` — never as a decorative background or typographic accent
- Use Monument Grotesk at weight 400 for all non-button text at every scale; reserve weight 700 strictly for `{typography.button-ui}` pill labels
- Set Untitled-Serif editorial headlines at -1.76px letter-spacing and line-height 1.00 at 64px — the compressed tracking is part of the editorial register, not a size adjustment
- Restrict border-radius to `{rounded.pill}` on interactive elements only; use `{rounded.none}` on all content surfaces, images, and section containers
- Use the horizontal marquee pattern for case study and work grids — the scroll IS the grid, not an override of it
- Apply generous horizontal margins at wide desktop (96–128px) — content should sit inside the viewport edge with clear breathing room against the black canvas
- Use `"dlig"` discretionary ligatures when rendering the WolffOlinsVF display font — the feature is load-bearing for the monogram's letterform quality

### Don't
- Don't introduce warm black or dark-grey alternatives to `{colors.background}` — the absolute black is non-negotiable; temperature is not part of the palette
- Don't apply `{colors.primary}` yellow as a text color, background fill on sections, or hover state for non-interactive elements — it is a functional signal color, not an accent wash
- Don't round content card corners — `{rounded.none}` is the brand's geometric statement; any mid-range radius (4–16px) would read as a different design system entirely
- Don't use weight 700 Monument Grotesk outside of `{typography.button-ui}` — the brand's confidence is expressed through size and proportion, not typographic mass
- Don't add drop shadows to cards, section panels, or navigation — the shadow-free content surfaces are by design; the only permitted shadow is the cookie modal overlay
- Don't substitute a different sans-serif for Monument Grotesk at UI sizes — the face's optical characteristics at 13–16px are part of the system's tonal register
- Don't add letter-spacing tightening to Monument Grotesk body text — the sans runs at neutral-to-slightly-positive tracking; negative tracking is reserved for Untitled-Serif display only
- Don't use static column grids for work presentation — the marquee scroll communicates that this portfolio is ongoing, not categorized

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, WO monogram scales down, nav collapses |
| Mobile | 375–425px | Single column with full-width marquee |
| Mobile Wide | 425–500px | Wider single column, increased text sizes |
| Mobile Tall | 500–550px | Minor layout adjustments |
| Phablet | 550–640px | Two-column grid begins for secondary content |
| Tablet Small | 640–768px | Marquee speed may adjust, nav expands |
| Tablet | 768–769px | Boundary: layout mode switches at this pixel pair |
| Tablet Large | 769–890px | Mid-range layout, typography scaling |
| Tablet Wide | 890–896px | Near-desktop layout |
| Boundary | 896–897px | Sub-pixel boundary pair for precise breakpoint switching |
| Near-Desktop | 897–1023px | Full nav visible, marquee at standard speed |
| Desktop Small | 1023–1024px | Boundary pair for 3-column layouts |
| Desktop | 1024–1280px | Standard desktop — full WO monogram, standard typography |
| Wide Desktop | 1280–1536px | Maximum layout — 128px horizontal margins, full marquee |
| Ultra Wide | ≥1536px | Maximum breakpoint, cinematic scale for monogram |

### Touch Targets
- Pill buttons: pill geometry with 10px vertical padding — touch target height approximately 36–44px; adequate
- Navigation links: 16px Grotesk with surrounding padding — estimated 44px tap height
- Marquee tiles: full-tile tappable area; touch swipe gesture support implied

### Collapsing Strategy
- **WO Monogram**: Scales proportionally from 317px desktop down to approximately 100–150px on mobile, maintaining the full-viewport-width proportional fill
- **Navigation**: Full horizontal links collapse to mobile nav icon; the sticky header compresses height on scroll via the 0.3s height transition
- **Marquee**: Maintains full-width horizontal scroll at all breakpoints; scroll speed may increase at narrower viewports to maintain perceptual flow
- **Section heading scale**: 55px desktop → approximately 32–40px on mobile; Monument Grotesk maintains weight 400 throughout
- **Horizontal margins**: 128px → 48px → 16px as breakpoints collapse; content stretches proportionally

### Image Behavior
- Case study imagery fills marquee tiles without border-radius — sharp-edged at all breakpoints
- Images use `object-fit: cover` within tile containers; no art direction swaps
- No full-bleed hero imagery — the WO monogram at 317px IS the visual hero; photography serves the case study tiles

---

## Agent Prompt Guide

### Quick Color Reference
- Background (canvas): `{colors.background}`
- Primary Text (on dark): `{colors.ink}`
- Brand Accent (electric yellow): `{colors.primary}`
- Text on Yellow: `{colors.on-primary}`
- Muted Text / Metadata: `{colors.ink-muted}`
- Secondary Grey Text: `{colors.ink-secondary}`
- Light Surface Panel: `{colors.surface}`
- Text on Light Panel: `{colors.on-surface}`
- Hover State: `{colors.text-hover}`
- Border: `{colors.border}`
- Focus Ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build the Wolff Olins hero: absolute-black `{colors.background}` full-viewport canvas, zero padding, zero margin. Render the WO monogram using WolffOlinsVF (fallback: Space Grotesk) at 317px, weight 400, line-height 0.70, color `{colors.ink}`, font-feature-settings: 'dlig'. The letterforms should fill the full viewport width, bottoms nearly touching. No caption, no subheadline, no decorative elements — just the compressed letterform on black."

- "Design a case study marquee row: continuous horizontal scroll at 15s linear using `@keyframes marquee`. Each tile: black `{colors.background}` background, sharp corners `{rounded.none}`, no shadow. Project image fills tile width. Below image: project name in Monument Grotesk 35px weight 400 `{colors.ink}`, letter-spacing 0; client/category in Monument Grotesk 13px weight 400 `{colors.ink-muted}`. On card-enter: opacity transition 0–1 at 0.3s with `cubic-bezier(0.65, 0.05, 0.36, 1)`."

- "Create a primary CTA button: background `{colors.primary}` electric yellow `#fff84b`, text `{colors.on-primary}` black, Monument Grotesk 16px weight 700, border-radius 9999px (pill), padding 10px 24px. Hover: background shifts to `{colors.ink}` white, text shifts to `{colors.background}` black, transition 0.15s `cubic-bezier(0.4, 0, 0.2, 1)` on background-color and border-color. Focus: `outline: {colors.focus-ring} solid 2px`."

- "Design a navigation bar: background `{colors.background}`, no border, no shadow. Left-aligned: Wolff Olins wordmark SVG in `{colors.ink}` white (140×22px). Right: text links in Monument Grotesk 16px weight 400, color `{colors.ink}`, letter-spacing 0.16px. Default state: no underline. Hover: color shifts to `{colors.text-hover}` grey, transition 0.15s. Sticky positioning, full viewport width; nav height transitions at 0.3s ease-out on scroll."

- "Build a light-surface feature panel: background `{colors.surface}`, sharp corners, 24px padding. Eyebrow label in Monument Grotesk 13px `{colors.ink-secondary}`, letter-spacing 0.13px. Section heading in Monument Grotesk 55px weight 400 `{colors.on-surface}`, line-height 1.10. Body paragraph in Monument Grotesk 20px weight 400 `{colors.on-surface}`, line-height 1.50. CTA pill below: electric-yellow `{colors.primary}` fill, `{colors.on-primary}` text. The light panel sits directly against the `{colors.background}` canvas — no shadow, no transition, just the surface contrast."

### Iteration Guide

1. Start from `{colors.background}` absolute black — every design decision is contrast against maximum darkness; lighter elements are always the foreground, the black is infinite ground
2. Reserve `{colors.primary}` electric yellow for exactly one purpose at a time: primary CTA, active border, or focus ring. Never use it in two competing roles on the same surface
3. Typography hierarchy is driven entirely by size — Monument Grotesk runs at weight 400 from 55px to 20px; weight 700 appears only on 16px button labels. Never apply bold to body or heading text
4. Untitled-Serif at 64px with -1.76px letter-spacing handles editorial depth; Monument Grotesk handles everything operational. The typeface boundary is a register change, not an aesthetic flourish
5. `{rounded.none}` on all content. `{rounded.pill}` on all interactive elements. No values in between — if you are reaching for 4–16px radius, you are outside this system
6. The work marquee is not a grid — it is a continuous landscape. Resist reorganizing it into columns or static cards; the scroll communicates the breadth of the portfolio by motion, not by taxonomy
7. When in doubt, reduce — this system communicates through compression and contrast. A 317px monogram on absolute black is the full statement. Do not add explanatory text around it.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wolff Olins. Brand names and trademarks belong to their respective owners.