---
version: alpha
name: Zara
description: High-fashion austerity rendered in pure black and white — full-bleed editorial campaign photography under feather-light Helvetica Now Text, oversized Didot serif display titles, zero rounding anywhere, and uppercase 13px nav set in weight 300, so the interface disappears and the imagery becomes the entire brand.

colors:
  # Surface / canvas
  background: "#ffffff"        # pure white retail canvas
  surface: "#f9fffa"           # barely-there off-white panel
  overlay-dark: "#000000"      # full-bleed image and modal backdrop
  overlay-scrim: "#0d0d0d"     # near-black scrim over campaign imagery

  # Ink / text
  ink: "#000000"               # pure black — headings, body, nav, the whole UI
  ink-secondary: "#555555"     # secondary copy, muted labels
  ink-muted: "#565656"         # captions, low-emphasis text
  on-dark: "#ffffff"           # text over imagery and black surfaces
  on-dark-soft: "#bfbfbf"      # was rgba(255,255,255,0.75) — Google format requires hex

  # The brand has no chromatic accent — black is the accent
  primary: "#000000"           # CTAs, active states, the line everything is drawn with
  on-primary: "#ffffff"

  # Sparse editorial campaign tints (used only inside campaign art, never UI)
  campaign-rose: "#d1447c"     # occasional editorial pink
  campaign-blue: "#3860be"     # occasional editorial blue
  campaign-green: "#468254"    # occasional editorial green

  # Borders
  border: "#000000"            # the hairline rule — black, the structural device
  border-soft: "#e5e5e5"       # faint grey divider where black would be too loud

  # Scrim tint (opaque approximation for the elevation table)
  shadow-scrim: "#000000"      # was rgba(0,0,0,0.5) — Google format requires hex

typography:
  display-serif:
    fontFamily: "Didot, GFS Didot, Playfair Display, Times New Roman, serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Didot, GFS Didot, Playfair Display, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.23
    letterSpacing: 0px
  heading:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.23
    letterSpacing: 0px
  label-upper:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.23
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.23
    letterSpacing: 0px
  price:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Helvetica Now Text, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-on-image:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-secondary}"

  price-label:
    textColor: "{colors.ink}"
    typography: "{typography.price}"
    padding: 0px

  modal:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
---

# Zara Design System

## Overview

Zara's site is an exercise in near-total interface erasure. The single most distinctive move is the refusal to design chrome at all: there is no color, no rounding, no shadow, no button styling beyond a black rectangle — the brand is the photography, and everything else gets out of the way. The palette is pure monochrome, black (`{colors.ink}`) on white (`{colors.background}`), with white text (`{colors.on-dark}`) reversed over full-bleed campaign imagery. The campaigns themselves carry the only color in the room, and even those lean cool and editorial. The page is a gallery wall; the UI is the white frame.

The typography splits cleanly in two and that split is the brand voice. Functional text — navigation, product names, prices, buttons — is **Helvetica Now Text** (`{typography.nav-link}`), set astonishingly light (weight 300) at a small 13px, sometimes lightly tracked, often uppercase. It is quiet to the point of austerity; the nav almost dissolves into the white. Then, for editorial and campaign titles, Zara reaches for **Didot** (`{typography.display-serif}`), the high-fashion serif of Vogue mastheads, at large sizes and the same feather-light weight. The contrast — a whispering grotesque for utility, a grand thin serif for the campaign — is exactly the contrast between a clothing rack and a runway. Nothing is bold; restraint is the entire register.

The third signature is geometry, or the deliberate absence of it. **Zero rounding** (`{rounded.none}`) appears anywhere — every image, every button, every modal is hard-edged. Borders, where they exist, are a single black hairline (`{colors.border}`); more often, separation comes from raw whitespace and the edges of full-bleed photographs butted together. Buttons are flat black rectangles with white text, or a thin-outlined white rectangle that inverts on hover. There are no cards, no elevation, no soft corners to soften the look. The effect is gallery-cold and expensive: an interface confident enough to disappear, leaving only enormous, beautifully-shot imagery and a thread-light typographic system holding it together.

**Key Characteristics:**
- Pure monochrome — black (`{colors.ink}`) on white (`{colors.background}`), white (`{colors.on-dark}`) over imagery; no chromatic UI accent
- Full-bleed editorial campaign photography is the entire visual brand; the UI is the frame
- **Zero rounding** (`{rounded.none}`) on everything — images, buttons, modals are all hard-edged
- Functional type in **Helvetica Now Text** (`{typography.nav-link}`) at weight 300, 13px, often uppercase — austere and near-invisible
- Editorial titles in **Didot** serif (`{typography.display-serif}`) at large sizes, light weight 300 — the high-fashion register
- Nothing is bold — restraint and lightness are the whole expression
- Black flat-rectangle buttons (`{colors.ink}`) and thin-outline buttons that invert on hover
- Separation by raw whitespace and butted photo edges, not by cards or shadows
- No elevation system — the page is intentionally flat, a gallery wall
- Hairline black rules (`{colors.border}`) where structure is unavoidable

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas and the frame around every image. Gallery-bright.
- **Off-White** (`{colors.surface}`): A barely-perceptible panel tint, used sparingly.
- **Black / Scrim** (`{colors.overlay-dark}`, `{colors.overlay-scrim}`): Full-bleed image backdrops and the near-black scrim over campaign art.

### Ink / Text
- **Pure Black** (`{colors.ink}`): Headings, body, navigation, buttons — the entire UI is drawn in black. Zara uses true `#000000`, not a softened near-black.
- **Grey** (`{colors.ink-secondary}`, `{colors.ink-muted}`): Secondary copy and muted labels — the only step away from black.
- **On-Image White** (`{colors.on-dark}`, `{colors.on-dark-soft}`): Text reversed over photography (the soft variant was an rgba white — flattened for the Google spec).

### Brand & Campaign
- **Black as Accent** (`{colors.primary}`): There is no brand color; black does the work of an accent — CTAs, active states, the line everything is drawn with.
- **Campaign Tints** (`{colors.campaign-rose}`, `{colors.campaign-blue}`, `{colors.campaign-green}`): Rare editorial colors that appear only inside campaign artwork, never in the UI chrome.

### Borders
- **Black Hairline** (`{colors.border}`): The structural rule — a single black line where separation is unavoidable.
- **Soft Divider** (`{colors.border-soft}`): A faint grey used where a black line would read too loud.
- **Scrim Tint** (`{colors.shadow-scrim}`): Opaque stand-in for the image scrim (original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display / Editorial**: `Didot` (with `GFS Didot, Playfair Display, Times New Roman, serif` fallbacks). The high-fashion serif for campaign and editorial titles, used large and light.
- **Functional / UI**: `Helvetica Now Text` (with `Helvetica, Arial, sans-serif` fallbacks). Navigation, product names, prices, buttons — set light (300–400) and small.
- **OpenType / tracking**: light positive tracking (~0.5px) on uppercase nav and captions; otherwise neutral.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-serif` | 64px / 300 / Didot — campaign and editorial titles |
| `display` | 32px / 300 / Didot — secondary editorial headings |
| `heading` | 24px / 400 / Helvetica Now — content section headings |
| `heading-sub` | 16px / 400 — sub-headings |
| `body-large` | 16px / 400 — lead paragraphs |
| `body` | 14px / 400 — standard body |
| `nav-link` | 13px / 300 — the whisper-light navigation |
| `label-upper` | 13px / 300 / 0.5px tracking — uppercase labels and links |
| `button-ui` | 13px / 400 — button text |
| `price` | 14px / 400 — product prices |
| `caption` | 12px / 300 / uppercase — metadata |

### Principles
- **Two registers, one mood**: a whisper-light grotesque for utility, a grand thin serif for the campaign — the rack and the runway.
- **Light, never bold**: weight 300 dominates; the system rarely exceeds 400. Restraint is the voice.
- **Small and uppercase for UI**: navigation and labels sit at 13px, uppercase, lightly tracked — present but never assertive.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Whitespace is the primary design material — generous margins isolate imagery, and the grid is austere and unfussy.

### Grid & Container
- Full-bleed imagery dominates; many sections are edge-to-edge photography with no container padding
- Product listings use a sparse, large-cell grid (often 2–4 columns) with hard photo edges butted together
- Editorial pages alternate full-width image and narrow centered text columns

### Whitespace Philosophy
- **Whitespace is the frame**: the white canvas isolates each image like a gallery wall
- **Edges, not boxes**: separation comes from butted photo edges and raw margins, not cards or borders
- **The image is the content**: layout exists to give photography maximum, uninterrupted room

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | The entire page — Zara is intentionally flat |
| Hairline (Level 1) | 1px black `{colors.border}` rule | The rare structural divider |
| Image Scrim (Level 2) | Gradient/solid `{colors.shadow-scrim}` over photography | Darkening behind reversed white text on imagery |
| Modal (Level 3) | Solid white panel over a `{colors.shadow-scrim}` backdrop | Country selector, size guides, bag drawer |

**Shadow Philosophy**: Zara has effectively no elevation system. There are no drop shadows on buttons, cards, or panels — the page is deliberately flat, like prints pinned to a wall. The only "depth" is a dark scrim laid over campaign photography so reversed white text stays legible, and the full-screen backdrop behind modals. Hierarchy is communicated entirely through scale, whitespace, and the black-on-white contrast, never through layering.

## Shapes

The full radius scale is in the `rounded:` token block — and it is nearly empty by design.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — images, buttons, modals, inputs |
| `pill` | 9999px | The rare circular control (a close icon, an avatar) only |

Zara rounds nothing. Every corner is hard. The squared geometry is a deliberate signal of editorial seriousness — soft corners would read as friendly or consumer-tech, the opposite of the gallery-cold luxury the brand is reaching for. The only exception is the occasional perfectly circular icon button.

## Components

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

### Buttons
- **`button-primary`** — Flat black (`{colors.ink}`) rectangle, white text, zero radius. The "ADD TO BAG" CTA. Hover softens to `{colors.ink-secondary}`.
- **`button-outline`** — White fill, thin black outline, black text, zero radius. Inverts to solid black on hover.
- **`button-on-image`** — A white rectangle dropped over campaign photography (the "DISCOVER" / "SHOP" tag on a hero image).

### Cards
- **`card-product`** — There is no card chrome: a product is its photograph plus a name and price beneath, on white, with no border or radius (`{rounded.none}`).

### Inputs
- **`input`** — A field with a single black bottom rule, zero radius, no fill or box — the minimalist underline input. Focus keeps the same austerity, darkening the rule.

### Navigation
- **`nav-bar`** — White, the wordmark centered or left, links in whisper-light uppercase Helvetica Now (`{typography.nav-link}`). Sits flush, no shadow, no border.

### Links & Price
- **`link`** — Black uppercase label; hover greys to `{colors.ink-secondary}`.
- **`price-label`** — Plain black price in `{typography.price}`, no decoration — set directly beneath the product image.

### Modal
- **`modal`** — A solid white panel, zero radius, over a `{colors.shadow-scrim}` backdrop (country selector, bag drawer, size guide).

## Do's and Don'ts

### Do
- Keep everything pure monochrome — black (`{colors.ink}`) on white (`{colors.background}`), white over imagery
- Let full-bleed editorial photography be the entire visual brand; design the UI to disappear
- Use **zero rounding** (`{rounded.none}`) on every element — hard edges everywhere
- Set functional text in **Helvetica Now Text** at weight 300 (`{typography.nav-link}`), small and often uppercase
- Use **Didot** (`{typography.display-serif}`) at large sizes and light weight for editorial and campaign titles
- Make buttons flat black rectangles (`{colors.ink}`) or thin-outline rectangles that invert on hover
- Separate with raw whitespace and butted photo edges before reaching for any rule
- Keep the page flat — no shadows, no cards, no elevation

### Don't
- Don't introduce a brand accent color — black is the accent; chromatic color lives only inside campaign artwork
- Don't round any corner (`{rounded.none}` is the law) except a rare circular icon
- Don't use bold weights — the system lives at 300–400; bold breaks the austere register
- Don't add drop shadows, card chrome, or elevation — the page is a flat gallery wall
- Don't enlarge or assert the navigation — it stays a 13px uppercase whisper
- Don't pad imagery into boxes — let photographs run full-bleed, edge to edge
- Don't mix the two type registers carelessly — Didot is for the campaign, Helvetica Now for utility

---

## Responsive Behavior

### Breakpoints
*(Standard stops the site behaves to; full-bleed imagery and the product grid drive the reflow.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column full-bleed imagery; product grid drops to 1–2 columns; nav collapses to a hamburger; Didot titles scale down but stay light |
| Tablet | 640–1023px | 2–3 column product grid; campaign imagery remains full-width |
| Desktop | 1024–1439px | 3–4 column grid; side-by-side editorial image + text |
| Large | ≥1440px | Edge-to-edge full-bleed campaign photography; generous `{spacing.4xl}` rhythm |

### Touch Targets
- Buttons run ~44px tall with `14px 24px` padding despite their minimal styling
- Nav links carry generous tap padding even at 13px; product photos are fully tappable

### Collapsing Strategy
- **Navigation**: horizontal uppercase nav → hamburger drawer on mobile; the wordmark persists
- **Hero**: full-bleed imagery scales to fill; overlaid Didot titles reflow and shrink
- **Product grid**: 4 columns → 2 → 1 as width drops, photo edges staying butted
- **Type**: Didot display scales down while preserving its thin weight

### Image Behavior
- Imagery is the brand: full-bleed, hard-edged, butted edge-to-edge with no radius
- On small screens photos crop to fill rather than letterbox, preserving the editorial impact

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Pure Black (`{colors.ink}`)
- Brand accent: none — black (`{colors.primary}`) does the work
- Secondary text: Grey (`{colors.ink-secondary}`)
- Border: Black hairline (`{colors.border}`)
- CTA: Black rectangle (`{colors.ink}`)

### Example Component Prompts

- "Create a full-bleed hero: an edge-to-edge editorial campaign photograph with a large Didot title (`{typography.display-serif}`, weight 300) reversed in white (`{colors.on-dark}`) over a subtle dark scrim (`{colors.shadow-scrim}`), and a white rectangle 'DISCOVER' button (`{colors.background}` fill, black text, `{rounded.none}`) dropped on the image"
- "Build a product card with no chrome: a hard-edged product photo (`{rounded.none}`), the product name in `{typography.body}` and a plain black price in `{typography.price}` beneath, all on white (`{colors.background}`) — no border, no shadow"
- "Render the primary CTA: a flat black (`{colors.ink}`) rectangle, white text in `{typography.button-ui}` (13px), `14px 24px` padding, zero radius, hover softens to `{colors.ink-secondary}` — the 'ADD TO BAG' button"
- "Create the navigation: white (`{colors.background}`) bar, links in whisper-light uppercase Helvetica Now Text (`{typography.nav-link}`, weight 300, 13px), no border, no shadow"
- "Design an underline input: a single black bottom rule (`{colors.border}`), no fill, no box, zero radius, body text in `{typography.body}` — the minimalist field Zara uses in checkout"

### Iteration Guide

1. Start pure monochrome on white (`{colors.background}`). If any UI element carries color, remove it — color belongs only inside campaign imagery.
2. Make photography the hero, full-bleed and hard-edged. The UI should feel like it's barely there.
3. Round nothing (`{rounded.none}`). If a corner is soft, square it.
4. Functional text is Helvetica Now Text at weight 300, small and uppercase. If it's bold or large, it's wrong.
5. Use Didot (`{typography.display-serif}`) only for campaign/editorial titles, large and light.
6. Buttons are flat black or thin-outline rectangles — no fills beyond black, no radius, no shadow.
7. Separate with whitespace and butted photo edges; add a black hairline (`{colors.border}`) only when structure is unavoidable.

---

## 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 Zara. Brand names and trademarks belong to their respective owners.