--- version: alpha name: "ZARA" website: "https://www.zara.com" description: >- A Spanish Inditex-owned fast-fashion retailer whose marketing chrome runs entirely on pure black-and-white with zero accent colors visible above the fold — the hero is a near-edge-to-edge runway video where the brand wordmark "ZARA presents" sits in 32px Didot italic over a campaign moment, with the famous overlapping serif lettering bleeding through behind a country-select modal. Helvetica Now Text at weight 300 carries every body, label, and nav surface, all rendered in uppercase 10-13px tracking-normal microtype; Didot and Times New Roman alternate on the editorial title tier. The radius scale is single-step (only a 2px corner declared in CSS), so every CTA renders as a pure-rectangle black-on-white block. ZARA Athleticz, Apercu, and an experimental XXemeEtageRegular sub-brand serif each get their own sub-domain font-family CSS var. seo: title: "ZARA Design System for React — monochrome chrome, Helvetica Now Text, 16 components" metaDescription: "ZARA's marketing chrome captured as a DESIGN.md spec. Pure monochrome above the fold, Helvetica Now Text at weight 300, Didot italic for editorial titles, 0px corners everywhere. Tokens for React, Next.js, and AI coding tools." highlights: - "Zero accent voltage — pure #ffffff and #000000 carry the entire chrome above the fold; the only chromatic system tokens (sales green #23f444, focus-ring blue #0170e9, emphasis red #ff3b30) live in the chat widget and validation states, never in the marketing surface" - "Helvetica Now Text at weight 300 — body, nav, button, and label all run light 300; the 13px uppercase tracking-normal nav-link is the dominant typographic tier" - "Didot italic for editorial titles — the 32px / weight 300 / Didot tier carries 'ZARA presents' and the campaign-cover wordmarks, wired as --font-family-alt: \"Times New Roman\" with Didot as the primary" - "Single-step rounding — only a 2px borderRadius declared across the page (frequency 1); CTAs render as pure-rectangle uppercase black-on-white blocks" - "Four sub-brand font families — XXemeEtageRegular for Origins, Gilroy for the secondary marketing tier, Apercu for the Srpls collection, and ZaraAthleticz for the athletic line, each scoped to its own --font-family-* var" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.zara.com" title: "ZARA — official site" description: "ZARA's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is ZARA's primary brand color?" answer: "ZARA does not have a primary brand color in the held-in-reserve sense. The above-fold marketing chrome runs entirely on pure #ffffff (frequency 1348 — text 648, border 648, bg 52) and pure #000000 (frequency 63 — text 32, border 30, bg 1). Both are wired into dozens of CSS custom properties — #ffffff as `--color-background-base`, `--color-content-inverse`, `--color-main-000`, `--color-basic-white`; #000000 as `--color-background-contrast`, `--color-content-high`, `--color-main`, `--color-basic-black`. There is a brand-layer cobalt #0170e9 declared as `--color-focus-ring` and `--color-semantic-info-high`, but it never renders in the marketing chrome — only as a keyboard-focus outline on the country-select buttons. The chrome is the absence of voltage." - id: "typography" title: "What typeface does ZARA use, and what should I use as a substitute?" answer: "ZARA's marketing chrome runs Helvetica Now Text across every body, label, button, and nav surface — declared as `--font-family-main: \"Helvetica Now Text\", \"Helvetica\", \"Arial\", Sans-Serif`. Body sits at weight 300 across every tier (no semibold middle ground; the system uses 300 for body and 700 only for the rare emphasized chat-button label). Nav links are 13px / 300 / uppercase tracking-normal, body is 12px / 300 / sentence-case, captions drop to 9-10px / 300 / uppercase. The editorial display tier flips to Didot at 32px / weight 300 italic — wired as `--font-family-alt: \"Times New Roman\"` with Didot as the primary substitution. The closest open-source substitute for Helvetica Now Text is Inter at weight 300; for Didot, GFS Didot or Playfair Display italic both work." - id: "sub-brand-fonts" title: "Why does ZARA declare so many sub-brand font families?" answer: "ZARA wires four sub-brand font families into separate CSS vars, each scoped to a single product collection or sub-line. `--font-family-origins: \"XXemeEtageRegular\", \"Helvetica Now Text\", \"Arial\", Sans-Serif` carries the Origins archival collection. `--font-family-gilroy: \"Gilroy\", \"Helvetica Now Text\", \"Arial\", Sans-Serif` carries the secondary marketing tier and some chat-widget surfaces. `--font-family-srpls: \"Apercu\", \"Helvetica Now Text\", \"Arial\", Sans-Serif` carries the Srpls (Surplus) collection product copy. `--font-family-athleticz: \"ZaraAthleticz\", \"Helvetica Now Text\", \"Arial\", Sans-Serif` carries the Athleticz activewear line. Each falls back to Helvetica Now Text and then to Arial. The pattern lets each sub-line carry typographic identity without dropping the base Helvetica Now Text fallback chain — closer to a Vogue-style multi-collection editorial system than to a single-family retail brand." - id: "rounding" title: "What corner-radius scale does ZARA use?" answer: "The radius scale is essentially zero. The captured page renders only one borderRadius value across all 7988 scanned elements: 2px, with a frequency of 1. The chat-widget surface declares `--chat-border-radius: 0px` explicitly. Every CTA, every card, every input, every modal corner sits at 0px — the country-select modal CTAs are pure-rectangle black-on-white blocks. The only round elements in the system are the icon avatars and the shopping-bag count badge, which use 50% radius rendered as a full circle via inline style rather than a token. There is no 4px / 8px / 12px middle tier; the system is deliberately rectilinear, which is the runway-magazine convention rather than the retail-tile convention." - id: "wordmark" title: "What is the deal with ZARA's overlapping wordmark?" answer: "The current ZARA wordmark (introduced in 2019, designed by Baron & Baron) is a thin Didot-style serif with deliberately overlapping letterforms — the A's almost touch the Z's and R, creating a single-block visual mass rather than five distinct letters. The wordmark was widely criticized at launch as cramped and unreadable; the brand has stuck with it, and Balenciaga, Vetements, and Telfar have since adopted similar overlapping-letter treatments, making ZARA the early adopter of a now-common editorial-fashion convention. The current page renders the wordmark in Didot italic for the campaign covers and in a custom geometric serif (the static logo) for the navigation. The overlapping pale-grey letters bleeding through behind the country-select modal in the captured screenshot are a campaign-cover treatment, not chrome — they belong to the campaign asset, not to the design system itself." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own fashion-retail site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce ZARA's specific moves: zero accent voltage above the fold, pure black-and-white chrome carrying every CTA, nav, and label surface, Helvetica Now Text at weight 300 across every body tier, Didot italic for the editorial title moments, 0px corners universally, and uppercase tracking-normal labels at 10-13px as the dominant typographic tier. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. 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, but when it does, the chrome reads as runway-magazine rather than as fast-fashion retail." mockups: - "marketing-hero" - "media-grid" colors: canvas: "#ffffff" ink: "#000000" ink-mid: "#555555" ink-soft: "#262626" ink-faint: "#757575" hairline: "#cccccc" hairline-soft: "#e5e5e5" surface-low: "#f2f2f2" focus-ring: "#0170e9" emphasis: "#ff3b30" success: "#0a882a" sales: "#23f444" notification: "#ff9500" danger: "#e90d01" typography: display-md: fontFamily: "Didot, \"Helvetica Now Text\", Arial, sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 39.392px letterSpacing: 0 hero-label: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 16px letterSpacing: 0 body-sm: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 300 lineHeight: 16px letterSpacing: 0 nav-link: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 22px letterSpacing: 0 uppercase-cap: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 300 lineHeight: 16px letterSpacing: 0 uppercase-md: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 16px letterSpacing: 0 caption: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 9px fontWeight: 300 lineHeight: 20px letterSpacing: 0 button-md: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 300 lineHeight: 16px letterSpacing: 0 button-bold: fontFamily: "\"Helvetica Now Text\", Helvetica, Arial, sans-serif" fontSize: 9px fontWeight: 700 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" xs: "2px" full: "9999px" spacing: xs: "2px" sm: "4px" md: "8px" base: "12px" lg: "20px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "2px 12px" height: "32px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "2px 12px" height: "32px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 32px" height: "32px" top-nav-dark: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 32px" height: "32px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 0px" height: "32px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" hero-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.hero-label}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" modal-cta-block: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.uppercase-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "44px" modal-cta-outlined: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.uppercase-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "44px" borderColor: "{colors.ink}" small-caps-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.uppercase-cap}" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0px" cookie-banner: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "20px" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "48px 32px" sales-chip: backgroundColor: "{colors.sales}" textColor: "{colors.ink}" typography: "{typography.uppercase-cap}" rounded: "{rounded.none}" padding: "2px 8px" height: "18px" --- ## Overview ZARA's marketing chrome does something the global fast-fashion category almost never attempts. **Zero-voltage chrome.** The above-fold surface runs on pure white-and-pure-black with no accent colors of any kind — no held-in-reserve red the way H&M deploys its `--base-brand-logo`, no accent orange the way Hermès does, no soft pastel the way Glossier does. The country-select modal renders its primary CTA as a pure-rectangle black-on-white block ("YES, STAY ON UNITED STATES" — uppercase, 13px Helvetica Now Text at weight 300, 0px corners) and its secondary as an outlined version below; the hero behind it is a runway campaign cover with the controversial overlapping pale-serif wordmark bleeding through the modal. Where H&M holds its red voltage in reserve for the logo lockup, and where Uniqlo paints its hero red, ZARA holds nothing — the chrome is the absence of voltage, and the runway photography carries every chromatic job. The system declares 379 CSS custom properties on `:root` — the largest variable count of any retail brand on this directory. Most of those properties are spacing scales (`--spacing-00` through `--spacing-16`, an 0.125rem to 7.5rem scale), grid template values (`--grid-template-spacing-01` through `--grid-template-spacing-12`), and typography metrics (`--font-size-*`, `--line-height-*`, `--letter-spacing-*`, `--font-stretch-*`, `--text-transform-*` for every type role × every locale). The chromatic surface is tiny by comparison: 12 color tokens captured, of which 4 carry the entire above-fold chrome. Typography runs Helvetica Now Text at weight 300 across every body, label, button, and nav surface — wired as `--font-family-main: "Helvetica Now Text", "Helvetica", "Arial", Sans-Serif`. The 13px / 300 / uppercase tracking-normal nav-link tier dominates the page (frequency 86 on the smaller 10px / 300 / uppercase caption tier; 17 on the 13px / 300 / sentence-case body). Editorial titles flip to Didot at 32px / weight 300 italic — wired as `--font-family-alt: "Times New Roman"` with Didot as the primary substitution; this is the editorial moment that carries "ZARA presents" and the campaign-cover wordmarks. **Key Characteristics:** - Zero brand-voltage above the fold (`{colors.canvas}` #ffffff and `{colors.ink}` #000000 carry the entire chrome). - Helvetica Now Text at weight 300 across every body, label, button, and nav surface — no semibold (500/600) tier on the captured page. - Didot italic for editorial display titles at 32px / weight 300 — wired with Times New Roman as the formal alt-font declaration. - Four sub-brand font families (`--font-family-origins`, `--font-family-gilroy`, `--font-family-srpls`, `--font-family-athleticz`) each scoped to one collection or sub-line. - 0px corners universal — only a single 2px borderRadius declared across 7988 scanned elements. - Uppercase tracking-normal labels at 10-13px as the dominant typographic tier. - Functional semantic colors (`{colors.focus-ring}`, `{colors.success}`, `{colors.danger}`, `{colors.emphasis}`) live in the chat widget and validation states, never in the marketing chrome. - 379 CSS custom properties on `:root` — the largest variable count of any retail brand on this directory. ## Colors ### Structural (the entire above-fold chrome) - **Canvas** (`{colors.canvas}` — #ffffff): frequency 1348. Used as text (648), border (648), bg (52). Wired as `--color-background-base`, `--color-content-inverse`, `--color-main-000`, `--color-basic-white`, `--color-surface-low`. The page floor and the dominant text-on-dark color across the entire chrome. - **Ink** (`{colors.ink}` — #000000): frequency 63. Used as text (32), border (30), bg (1). Wired as `--color-background-contrast`, `--color-content-high`, `--color-main`, `--color-basic-black`, `--color-surface-high`. The body-text default on white surfaces and the modal-CTA bg fill. - **Ink Mid** (`{colors.ink-mid}` — #555555): frequency 2. Used as text (1), border (1). The secondary text tone for de-emphasized body copy and footer metadata. - **Ink Soft** (`{colors.ink-soft}` — #262626): wired as `--chat-agent-message-background-color-dark`, `--chat-user-message-border-color-dark`. Reserved for chat-widget surfaces in dark mode; not rendered in the marketing chrome. - **Ink Faint** (`{colors.ink-faint}` — #757575): wired as `--color-content-mid`, `--form-input-label-border-color-unfocused`. Reserved for placeholder text and unfocused-input borders; not rendered in the captured chrome above the fold. ### Hairlines - **Hairline** (`{colors.hairline}` — #cccccc): frequency 2. Used as border (2). Wired as `--color-main-020`, `--color-content-low`, `--chat-button-primary-background-color-on-hover-dark`. The dominant hairline tone where the system does use a non-zero border color. - **Hairline Soft** (`{colors.hairline-soft}` — #e5e5e5): wired as `--color-main-010`, `--chat-user-message-background-color-light`, `--color-background-low-alt`. The faintest tonal lift for subdued surface tiles. - **Surface Low** (`{colors.surface-low}` — #f2f2f2): wired as `--color-main-005`. The faintest off-white for subtle surface contrast in the cookie banner and chat-widget background. ### Functional / semantic (never in marketing chrome) - **Focus Ring** (`{colors.focus-ring}` — #0170e9): the lone brand-layer hex in the entire system, wired as `--color-focus-ring` and `--color-semantic-info-high`. Reserved for keyboard-focus outlines and info-message accents in the form-validation surface. Never appears in the marketing chrome. - **Emphasis** (`{colors.emphasis}` — #ff3b30): wired as `--color-emphasis` and `--color-emphasis-background`. Reserved for inline error / validation emphasis in the chat widget. - **Sales** (`{colors.sales}` — #23f444): wired as `--color-sales` and `--color-semantic-sales`. The single high-saturation color in the system — reserved for sale-price chips and discount badges on product tiles below the fold. - **Success** (`{colors.success}` — #0a882a): wired as `--color-semantic-success-high`. Reserved for form-validation success states. - **Notification** (`{colors.notification}` — #ff9500): wired as `--color-notification` and `--color-notification-background`. Reserved for cart-update toasts and order-status badges. - **Danger** (`{colors.danger}` — #e90d01): wired as `--color-semantic-danger-high`. Reserved for form-validation error states. ## Typography ### Font Family The system runs **Helvetica Now Text** for every body, label, button, and nav surface — wired as `--font-family-main: "Helvetica Now Text", "Helvetica", "Arial", Sans-Serif`. Editorial display titles flip to **Didot at 32px / weight 300 italic** — wired as `--font-family-alt: "Times New Roman"` with Didot as the primary substitution and Times New Roman as the formal alt-font fallback. Four sub-brand families are declared as separate CSS vars, each scoped to a single product collection: `--font-family-origins: "XXemeEtageRegular", "Helvetica Now Text", "Arial", Sans-Serif` (the Origins archival collection); `--font-family-gilroy: "Gilroy", "Helvetica Now Text", "Arial", Sans-Serif` (secondary marketing tier); `--font-family-srpls: "Apercu", "Helvetica Now Text", "Arial", Sans-Serif` (Srpls / Surplus collection); `--font-family-athleticz: "ZaraAthleticz", "Helvetica Now Text", "Arial", Sans-Serif` (Athleticz activewear line). ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-md}` | 32px | 300 | 39.392px | Editorial display — "ZARA presents," campaign-cover wordmarks (Didot italic) | | `{typography.hero-label}` | 15px | 300 | 24px | Hero subhead, modal title ("HELLO,") | | `{typography.nav-link}` | 13px | 300 | 22px | Top-nav links (SHOPPING BAG, LOG IN, HELP) — uppercase | | `{typography.body-md}` | 13px | 300 | 16px | Default running text, modal body copy | | `{typography.body-sm}` | 12px | 300 | 16px | Cookie banner, footer link grid | | `{typography.uppercase-md}` | 13px | 300 | 16px | CTA labels — uppercase | | `{typography.uppercase-cap}` | 10px | 300 | 16px | Small-caps labels — uppercase, frequency 86 (the dominant tier across the captured page) | | `{typography.button-md}` | 13px | 300 | 16px | The primary CTA label ("Yes, stay on United States") | | `{typography.button-bold}` | 9px | 700 | 20px | The rare emphasized chat-button label — the only weight 700 moment on the page | | `{typography.caption}` | 9px | 300 | 20px | Micro-metadata, "We are present in over 156 stores" copy | ### Principles Body weight is uniformly **300**. There is no semibold (500/600) tier rendered on the captured page; weight 700 appears exactly once, on the 9px chat-button label. The 13px / 300 / uppercase tracking-normal tier dominates the chrome (between the nav and the CTAs and the small-caps labels combined, it carries the page). Tracking is uniformly normal — no negative letter-spacing on any tier. The CSS declares `--letter-spacing-title-alt-l: calc(-1 * 1)` (which evaluates to -1, conventional negative tracking) for the alt-display tier, but the captured page renders Didot at letter-spacing normal. ### Note on Font Substitutes Helvetica Now Text is proprietary to Monotype. **Inter at weight 300** is the closest open-source substitute; the metrics transfer cleanly and the geometric proportions read close to Helvetica Now Text at the 12-15px body sizes. For Didot italic at 32px, **GFS Didot** or **Playfair Display italic** at weight 300 both work as substitutes. The four sub-brand families (XXemeEtageRegular, Gilroy, Apercu, ZaraAthleticz) are all proprietary; the Helvetica Now Text fallback is what renders when they fail to load. ## Layout ### Spacing System - **Base unit:** 4px (with 8px as the dominant module, declared as `--spacing-03: 0.75rem` and `--spacing-04: 1rem`). - **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.md}` 8px · `{spacing.base}` 12px · `{spacing.lg}` 20px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Section padding (vertical):** 8x0 is the dominant module (frequency 40), with 20x0x0 (11 occurrences) as the section-break step. Hero padding leaves the runway video edge-to-edge. - **Card internal padding:** 0px on product tiles (the photography fills the tile); 20px on the cookie banner; 8x24 on the country-select modal CTAs. ### Grid & Container - **Container:** the system declares `--grid-columns: 12`, `--zds-layout-columns: 8`, `--grid-column-gutter: 1.25rem` (20px), `--layout-lateral-margin: 7rem` (112px). The desktop grid is 12 columns with 20px gutters and 112px lateral margins — a much wider gutter and a much wider lateral margin than the typical fashion-retail grid. - **Top nav:** 32px height with `--menu-desktop-padding-top: 1.3125rem` (21px), housing the hamburger menu icon, the SEARCH input at the right edge, and SHOPPING BAG / LOG IN / HELP as right-aligned uppercase links. - **Footer:** 48x32 padding on a pure-black floor, with link columns rendered in white at 12px / 300 / sentence-case. ### Rhythm The page alternates between **edge-to-edge runway photography** (the hero) and **constrained editorial bands** (the country-select modal, the cookie banner, the product tile grids below the fold). There is no atmospheric gradient between bands; every section terminates on the same pure-white canvas, and depth comes from the photography itself rather than from any background-color shift. ## Elevation The system has **no shadow tier**. The captured page renders zero drop shadows on any surface — the country-select modal sits on the runway-photography hero with a single hairline border at `{colors.hairline}` (#cccccc), not with a shadow. The cookie banner at the bottom sits on the canvas without any elevation cue. - **Flat (no shadow):** every above-fold surface — nav, hero, modal, cookie banner, footer. Zero shadows on the captured page. - **Hairline outlines:** `{colors.hairline}` (#cccccc) marks the modal-CTA outlined-secondary border and the cookie-banner edge. White-on-runway-photography is the dominant lift treatment. - **Tonal lift:** `{colors.surface-low}` (#f2f2f2) is the slightly-cool surface tone for subdued surface tiles and the chat-widget background. ## Shapes The radius scale is **essentially zero**: - `{rounded.none}` 0px — the universal corner treatment. Every CTA, every card, every input, every modal corner sits at 0px. The chat-widget surface declares `--chat-border-radius: 0px` explicitly. - `{rounded.xs}` 2px — frequency 1 across 7988 scanned elements. The single non-zero radius value the system uses. - `{rounded.full}` 9999px — used only on icon avatars and the shopping-bag count badge, via inline 50% radius rather than a declared token. There is no 4px / 8px / 12px / 16px middle tier. The system is deliberately rectilinear, which is the runway-magazine convention rather than the retail-tile convention. ## Components **`button-primary`** — The signature CTA. Pure-black `{colors.ink}` fill, white text, `{rounded.none}` 0px radius, 2x12 padding, 32px height. "YES, STAY ON UNITED STATES" on the country-select modal is the canonical instance — uppercase, 13px Helvetica Now Text at weight 300. **`button-secondary`** — White fill with black text and a 1px black border, `{rounded.none}` 0px radius. Used for the "NO, GO TO THE ISRAEL SITE." secondary on the country-select modal. **`top-nav`** — White `{colors.canvas}` surface, 32px height, 5x32 padding, `{typography.nav-link}` link labels. Floats over the runway-photography hero with no background fill — the page floor shows through. **`top-nav-dark`** — Pure-black `{colors.ink}` fill, white text. Used on the inverted nav state when the hero photography is light enough that white-on-photography wouldn't read; the captured page does not render this state. **`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (13px / 300 / uppercase / 22px line-height), 5x0 padding. SHOPPING BAG (with cart-count appended), LOG IN, HELP, SEARCH. **`hero-heading`** — Ink text on transparent, `{typography.display-md}` (32px / 300 / Didot italic). The "ZARA presents" wordmark and the campaign-cover editorial titles. **`hero-label`** — Ink text, `{typography.hero-label}` (15px / 300 / Helvetica Now Text). The modal h1 "HELLO," and other 15px caption-style hero labels. **`body-paragraph`** — Default ink text at `{typography.body-md}` (13px / 300 / 16px line-height). Cookie-banner copy, modal body text. **`modal-cta-block`** — Pure-black `{colors.ink}` fill, white text, `{rounded.none}` 0px corners, 8x24 padding, 44px height. The country-select primary CTA is the canonical instance. **`modal-cta-outlined`** — White fill, black text, black 1px border, `{rounded.none}` 0px corners. The country-select secondary CTA. **`small-caps-label`** — Ink text, `{typography.uppercase-cap}` (10px / 300 / uppercase). The dominant section-label treatment across the page — frequency 86, the most-used type tier in the captured surface. **`product-tile`** — White `{colors.canvas}` fill, ink text, `{rounded.none}` 0px corners, 0px padding (the photography fills the tile edge-to-edge). The product-grid card below the fold. **`cookie-banner`** — White `{colors.canvas}` fill, ink text at `{typography.body-sm}`, `{rounded.none}` 0px corners, 20px padding. Sits at the bottom-left of the page with the dismissed-X icon top-right. **`footer`** — Pure-black `{colors.ink}` floor, white text at `{typography.body-sm}`, 48x32 padding. The link grid columns sit on the black floor with 12px / 300 / sentence-case copy. **`sales-chip`** — High-saturation green `{colors.sales}` fill (#23f444), ink text, `{rounded.none}` 0px corners, 2x8 padding, 18px height. The only chromatic moment in the captured page — appears on sale-price tiles below the fold via the `--color-sales` var. ## Do's and Don'ts **Do** keep the above-fold chrome at zero brand voltage. The system depends on the absence of accent color to read as runway-magazine rather than as fast-fashion retail. Adding a held-in-reserve red the way H&M does, or a brand cobalt the way Lowe's does, would break the editorial register. **Do** render every CTA as a pure-rectangle 0px-corner block. The country-select modal CTAs at 32-44px height with 0px corners are the canonical instances; adding even a 2px corner would shift the chrome toward retail-tile and away from runway-magazine. **Do** use Helvetica Now Text at weight 300 across every body and nav surface. The light weight is the system's signature; bumping to 400 or 500 would turn the editorial chrome into a generic fashion-retail register. **Do** render editorial display in Didot italic at 32px / weight 300. The Didot tier is the only typographic moment in the system that breaks the Helvetica Now Text default, and it carries the campaign-cover wordmarks. Replacing it with a heavier sans would lose the magazine-editorial signal. **Don't** introduce a held-in-reserve accent color above the fold. The functional semantics (`{colors.focus-ring}` blue, `{colors.success}` green, `{colors.danger}` red) live in the chat widget and form-validation surface only; rendering them in the marketing chrome would dilute the zero-voltage principle. **Don't** apply `{colors.sales}` (#23f444) anywhere except sale-price chips. It is the single high-saturation color in the system, scoped to `--color-sales` and `--color-semantic-sales`; using it as a CTA fill or as a section band would compete with the runway photography and break the chrome's editorial register. **Don't** introduce a 4px or 8px corner radius tier. The system renders at 0px universally (only one 2px occurrence in 7988 scanned elements). Adding rounded corners to CTAs or cards would feel borrowed from a retail-tile aesthetic (Wayfair, Amazon) rather than from ZARA's runway-magazine chrome. **Don't** use the `{colors.focus-ring}` cobalt #0170e9 as a brand accent. It is the one brand-layer hex in the system, but it is wired only as `--color-focus-ring` and `--color-semantic-info-high` — keyboard-focus outline only. Rendering it on a CTA or chip would falsely suggest ZARA has a primary blue voltage when it does not. ## Known Gaps - **Hover and focus states:** the captured surface is the country-select modal entry state. Hover treatments for the nav-link / CTA / category-card are not exposed; the CSS declares `--input-hover-border-color: black` and a chat-widget hover-fill on a charcoal tone, but those are chat-widget overrides only. - **Product-detail-page (PDP) chrome:** the captured DESIGN.md covers the homepage entry state only. The PDP renders product-image carousels with Apercu (Srpls), XXemeEtageRegular (Origins), or ZaraAthleticz (Athleticz) font overrides based on the collection — those sub-brand chrome moments are not represented here. - **Sub-brand surface tokens:** ZARA Origins, ZARA SRPLS, and ZARA Athleticz each have their own sub-page chrome with custom photography treatments and editorial typography moments; this spec captures only the Helvetica Now Text base layer. - **Chat widget:** the system declares 47 `--chat-*` CSS variables covering the in-page customer-support widget (which the captured page does not render). The chat widget runs the only semantic-color treatments (`{colors.focus-ring}`, `{colors.emphasis}`, `{colors.success}`, `{colors.danger}`). - **Locale typography overrides:** the system declares per-locale font-family and font-size overrides (e.g. `--fds-text-nav-xl-locale-ja-jp-*`, `--fds-text-nav-xl-locale-ko-kr-*`); the captured surface is the US locale, and the locale-specific typography metrics are not represented here. - **Motion:** the runway hero auto-plays at full bleed; transitions on the modal entry/exit and on the nav reveal carry timing curves declared in JS rather than CSS. The spec captures end-state values only. - **Dark mode:** ZARA declares a full `--chat-*-dark` token tier covering the chat widget in dark mode, plus `--color-content-inverse` rendering as canvas white and `--color-background-contrast` rendering as ink black as the structural inversion. The marketing chrome itself does not flip to dark mode.