Design tokens (YAML front matter)
name: Zara
colors:
main: '#000000'
main-080: '#333333'
main-060: '#666666'
content-mid: '#757575'
main-040: '#999999'
main-020: '#cccccc'
main-010: '#e5e5e5'
background-low: '#f7f7f7'
canvas: '#ffffff'
focus-ring: '#0170e9'
emphasis: '#ff3b30'
danger: '#e90d01'
success: '#0a882a'
warning: '#b66009'
sales: '#23f444'
notification: '#ff9500'
typography:
button:
fontSize: 13px
fontWeight: 300
use: uppercase buttons and labels
rounded:
none: 0px
components:
button-black:
type: button
backgroundColor: '#000000'
textColor: '#ffffff'
rounded: 0px
height: 32px
padding: 2px 12px
typography: 13px / 300
hover: '#333333'
pressed: '#333333'
focus: 'outline 2px solid #0170e9'
use: 'SÍ, CONTINUAR EN ESPAÑA — a square black button with light uppercase text; hover #333333 (--color-main-080); a 2px #0170e9 focus outline.'
button-white:
type: button
backgroundColor: '#ffffff'
textColor: '#000000'
rounded: 0px
height: 32px
padding: 2px 12px
typography: 13px / 300
hover: 'fg #757575'
pressed: 'fg #757575'
focus: 'outline 2px solid #0170e9'
use: 'NO, IR A LA WEB DE … — the white twin; hover greys the text to #757575 (--color-content-mid).'
omitted:
- section: spacing
reason: No verified values in current evidence.
fonts:
roles:
sans: Helvetica Now Text
display: DidotDesign System Inspiration of Zara
Overview
Visual Theme & Atmosphere
“Zara es una de las principales empresas de moda internacional. Pertenece a Inditex, uno de los mayores grupos de distribución del mundo.” Its business model “integra diseño, fabricación, distribución y venta, a través de una amplia red de tiendas propia”. Online sales in Spain are made by ZARA ESPAÑA, S.A., Avda. de la Diputación, Edificio Inditex, 15143 Arteixo (A Coruña).
The site is black and white and almost nothing else: #000000 and #ffffff, a grey ramp
from #333333 to #f7f7f7, square corners, and light uppercase type in Helvetica Now Text, with
Didot also loaded. Colour appears only for meaning — a bright sales green #23f444, emphasis
red, a blue focus ring.
What makes it worth reading:
- A monochrome system with a grey ramp.
--color-main#000and--color-main-000…-080(white to#333) — every neutral is a percentage of black. - Uppercase as a token.
--text-transform-*sets titles, labels and headings to uppercase and paragraphs to none. - Colour reserved for signals. Sales
#23f444, emphasis#ff3b30, notification#ff9500, focus#0170e9.
Primary tasks
- Browse collections; search; shop.
- Choose the store region.
Brand Narrative
Inditex’s fashion brand keeps its interface out of the way: black, white, grey, square, uppercase — and colour only when it has something to say.
Principles
- The customer at the centre. Its business model’s stated focus.
- Monochrome by default.
- Signals only.
Personas
Not researched. No persona claim is made from a UI capture.
Colors
Measured with getComputedStyle on zara.com/es: 379 root custom properties — --font-* 107,
--chat-* 53, --color-* 46, --line-* 29, --letter-* 26, --grid-* 24, --text-* 23 … All
first-party.
Monochrome
- Main (
#000000) —--color-main,--color-content-high. - Main 080 (
#333333) — the black button’s hover · Main 060 (#666666). - Content mid (
#757575) · Main 040 (#999999) · Main 020 (#cccccc) · Main 010 (#e5e5e5). - Background low (
#f7f7f7) · Canvas (#ffffff).
Signals
Focus ring #0170e9 · Emphasis #ff3b30 · Danger #e90d01 · Success #0a882a ·
Warning #b66009 · Sales #23f444 · Notification #ff9500.
Typography
Font family
Helvetica Now Text (300, 400, 700) for the interface; Didot is also loaded. Both via
document.fonts.
Scale
Buttons 13px/300 uppercase; titles, labels and headings uppercase by token.
Layout
- Not surveyed beyond the region chooser; the page behind it was not laid out for measurement.
Responsive Behavior
Not measured. Desktop 1440×1000 only.
Elevation & Depth
Flat; translucent white overlays (--color-background-overlay-alt 75%) sit over imagery.
Motion & Easing
Not measured.
Components
Measured on the region chooser shown to a visitor from outside Spain (not answered), with focus
under a real Tab key and a hover counted only when :hover matched; cookies rejected.
- Black button —
#000000, white 13px/300 uppercase, square, 32px. Hover and press#333333; focus a 2px#0170e9outline. - White button —
#ffffff, black text. Hover and press grey the text to#757575; same focus.
Radius
0 — everything is square.
States
Hover: black lifts to #333333; white buttons grey their text to #757575. Press: the same. Focus: a
2px #0170e9 outline.
Do’s and Don’ts
Do
- Stay black and white; take neutrals from the percentage-of-black ramp.
- Set titles and labels in light uppercase.
- Use colour only for signals — sales, errors, focus.
Don’t
- Don’t round corners.
- Don’t introduce a brand accent colour.
- Don’t use heavy weights for buttons; they are 300.
Voice & Tone
Not assessed as authored voice.
Agent Prompt Guide
Quick Color Reference
#000000 black · #333333 hover · #757575 mid · #e5e5e5 line · #f7f7f7 low · #ffffff white ·
#0170e9 focus · #23f444 sales
Example Component Prompts
- “A square 32px black button with white 13px/300 uppercase Helvetica Now Text; hover
#333333; focus a 2px#0170e9outline.” - “A white twin whose text greys to
#757575on hover.”
