ZARA Design System

ZARA's marketing chrome does something the global fast-fashion category mostly avoids: it gives the entire above-fold surface to pure black-and-white with no accent voltage of any kind. The hero is a runway video moment with the wordmark "ZARA presents" rendered in 32px Didot italic, with the famous overlapping pale-grey serif letters (the campaign cover lettering — the same controversial overlapping wordmark Vetements and Balenciaga have since borrowed) bleeding through behind a country-select modal. The modal carries a uppercase "YES, STAY ON UNITED STATES" CTA — pure black block on white, 0px corners, 13px Helvetica Now Text at weight 300 — and a "NO, GO TO THE ISRAEL SITE." outlined secondary beneath. Where H&M (Inditex's main competitor) pairs near-identical monochrome chrome with a held-in-reserve red logo, and where Uniqlo uses red as its primary marketing voltage, ZARA holds zero brand color above the fold and lets the runway photography do every chromatic job.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 12 color tokens drawn from a near-monochrome palette (pure #ffffff at frequency 1348, pure #000000 at frequency 63, a single mid-grey #555555 at frequency 2, and the editorial near-black #262626 declared on chat-message borders), plus six functional/semantic tokens (sales green #23f444, success green #0a882a, focus-ring blue #0170e9 wired as `--color-focus-ring`, danger red #e90d01, emphasis red #ff3b30, notification orange #ff9500) reserved for the chat widget, form validation, and the sales chip overlays. Twelve typography tokens span Helvetica Now Text from 9px caption up to 15px hero, plus a 32px Didot italic editorial tier and four sub-brand family declarations. The radius scale is single-step: 2px once in the entire captured surface; every other corner sits at 0px. The system declares 379 CSS custom properties on `:root` — the largest of any retail brand on this directory.

Feed this file to Claude or Cursor and it reproduces ZARA's specific moves: zero accent voltage in the marketing chrome (the only colors above the fold are pure white and pure black), Helvetica Now Text at weight 300 across every body and nav surface, Didot italic on the editorial title tier, 0px corners universally, and uppercase tracking-normal labels at 10-13px as the dominant typographic tier. The token references resolve cleanly — `{colors.canvas}` for the white floor, `{colors.ink}` for the black ink, `{typography.display-md}` for the 32px Didot italic — so the AI never has to invent a value. The disciplined move worth borrowing is the zero-accent-above-the-fold principle: it only works when the photography is editorial enough to carry the entire chromatic weight on its own, but when it does, the chrome reads as runway-magazine rather than as fast-fashion retail.