Zara DESIGN.md

Design 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 #000 and --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.

---

Tier 1 sources: https://www.zara.com/es/ (live homepage — 379 root custom properties read via getComputedStyle; Helvetica Now Text and Didot loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-27); https://www.zara.com/es/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-27); https://www.zara.com/es/es/z-compania-corp1391.html (Empresa — part of Inditex, integrated design-to-store model, read 2026-09-27); https://static.zara.net/static/pdfs/ES/terms-and-conditions/terms-and-conditions-es_ES-20230722.pdf (Condiciones de compra — ZARA ESPAÑA, S.A., Edificio Inditex, 15143 Arteixo (A Coruña), read 2026-09-27)

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 #0170e9 outline.
• 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 #0170e9 outline."
• "A white twin whose text greys to #757575 on hover."