ZARA Design System

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

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.