Canvas
#ffffffPage backgrounds, form surfaces, image backgrounds — the silent stage on which all content sits
Zara
zara.com
Website preview
The design language
Zara's design system is editorial minimalism pushed to its logical extreme: a flat, monochromatic canvas where the interface deliberately recedes so editorial photography can carry the entire brand experience. The palette is essentially binary — pure black on pure white with a single mid-gray for secondary text — and the only decorative typographic moment is the ZARA wordmark itself, a high-contrast didone-style serif that functions as a logo, not as a heading font. UI typography is unusually compact (11–16px) and uses a single neutral sans-serif, giving every screen the look of a fashion magazine page. Components are borderless or use hairline strokes, with zero shadows, zero gradients, and zero rounded corners — the design language of a gallery wall, not a software product.
Color palette
neutral
Ink
#000000Primary text, icons, hairline borders, button outlines, checkbox marks, form labels
Stone
#757575Secondary/helper text, placeholder text, disabled labels — the only mid-tone that breaks the binary
Typography
Type scale
Minor Second (1.067) · 13px baseheading-sm
16px · 400 · 1.5The quick brown fox jumps
body-lg
15px · 300 · 1.5The quick brown fox jumps
body
13px · 300 · 1.5The quick brown fox jumps
body-sm
12px · 300 · 1.5The quick brown fox jumps
caption
11px · 300 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Now Text
- Weights
- 300, 400
- Sizes
- 11px, 12px, 13px, 15px, 16px
- Line height
- 1.00–1.60
- Letter spacing
- normal
- Fallback
- Inter, Helvetica Neue, Arial
All UI text — form labels, dropdowns, buttons, body copy, helper text, links. The deliberately compressed size range (11–16px) gives every screen an editorial-print feel; body copy at 11–13px is anti-convention for digital, making the interface feel like a magazine layout rather than a software product.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 48px
- Card padding
- 20px
- Element gap
- 20px
Border radius
all
0pxcards
0pxbadges
0pxinputs
0pxbuttons
0pxSpacing scale
2px4px12px16px20px26px32px48px112pxGuidelines
Do
- Use 0px border-radius on every component — buttons, inputs, cards, badges, images. The system is intentionally sharp-cornered.
- Keep the palette to three values: #000000 for text and borders, #ffffff for surfaces, #757575 for secondary text. No additional colors.
- Set body text at 11–13px to maintain the editorial-print scale. Larger sizes break the magazine-layout feel.
- Use the ZARA wordmark (custom didone serif) as the only display/decorative type — never apply it to headings or UI labels.
- Let editorial photography occupy 50–60% of any layout. The image is the content; the form is the frame.
- Use 1px hairline borders in #000000 for all interactive elements. The line weight is the visual language.
- Maintain generous whitespace: 48px between sections, 20px between form elements, 112px outer padding.
Don’t
- Don't introduce any color beyond the three neutrals. No brand accents, no semantic colors, no hover tints.
- Don't use rounded corners on any element. Even 2–4px radius breaks the system.
- Don't apply shadows, gradients, or glow effects. The design is completely flat.
- Don't use bold (700+) weights. The system runs 300–400 only.
- Don't use body text larger than 16px. The compressed scale is a signature choice.
- Don't add icons, badges, tags, or decorative UI elements. The interface is content-only.
- Don't center-align body text or form labels. Everything is left-aligned with uppercase section headers.
Components
ZARA Wordmark
Brand identity markCustom high-contrast didone-style serif (extreme thin-to-thick stroke variation, flat unbracketed serifs). Functions as the sole decorative typographic element in the system. Always rendered in #000000 on white. No tagline, no lockup variations. Substitutes: 'Didot', 'Bodoni Moda'.
Section Header (Uppercase Label)
Form section titleSmall uppercase text at 13px weight 400, #000000, tracking 0. No underline, no accent color, no icon. Examples: 'SELECT YOUR LOCATION', 'LOCATION', 'LANGUAGE'. The uppercase treatment is the only typographic emphasis — no bold, no color change.
Select Dropdown
Location/language selectorFull-width field, 0px radius, no background fill, 1px bottom border in #000000. Label above in 11px #757575 uppercase. Value text in 13px #000000. No focus ring, no box-shadow — the bottom border IS the affordance. Custom dropdown arrow implied, not styled.
Outlined Button
Primary form action (CONTINUE)Rectangular button, 0px radius, 1px solid #000000 border, transparent background, no shadow. Text in 13px weight 400 uppercase, #000000. Padding approximately 12px horizontal × 20px vertical. No hover fill, no color inversion — the outline is the identity. Inverts contextually: the border weight is the only visual weight it carries.
Checkbox
Remember selection / opt-in toggleMinimal square checkbox, 0px radius, 1px solid #000000 border, transparent fill. When checked, filled with #000000. Label to the right in 13px #000000. No focus ring, no animation, no color accent.
Helper Text Link
Inline contextual link13px #000000 text with underline. Used for inline references like 'Islas Canarias'. Underline is the only hover state — no color change, no weight change, no animation.
Editorial Image Block
Full-bleed campaign/model photographyLarge photographic block occupying roughly 60% of viewport width. No border, no radius, no shadow, no overlay. Natural color and lighting — the image is unprocessed UI element, not decoration. Aspect ratio varies but tends to be landscape (roughly 3:2 or 16:9).
Form Container
Left-aligned form columnNarrow column (roughly 280–320px), left-aligned within page, vertically centered. 112px horizontal padding from page edge. Contains all form elements with 20px vertical gaps between fields. No card background, no border, no shadow — floats on white canvas.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background — pure white, no texture, no variation
Level 1
Form Surface
#ffffffForm fields and interactive areas — visually identical to canvas, separated only by hairline borders
The design system has zero elevation. No shadows, no z-axis differentiation. Hierarchy is created through whitespace, border weight, and typography scale — not through depth. Components exist on a single plane, like printed matter on a page.
Layout & imagery
Layout
Asymmetric two-column split for entry screens: a narrow left column (280–320px) holds all form UI, left-aligned with 112px outer padding; the remaining 60% holds a large editorial photograph. The form column is vertically centered. No header bar, no navigation, no footer on entry flows — the ZARA wordmark sits alone at top-left as the only structural element. Content is max-width 1200px on inner pages with generous 48px section gaps. The layout philosophy: the interface is a magazine spread, not a software dashboard.
Imagery
Editorial fashion photography is the sole visual content. Full-color, unprocessed, natural-lit campaign and model photography occupies the dominant visual space on every screen. Images are sharp-cornered, uncontained (no device frames, no polaroid effects), and presented at near-original aspect ratios. No illustrations, no icons-as-decoration, no abstract graphics. The photography carries all brand personality — mood, season, aesthetic — while the interface remains completely neutral.
Design notes
Agent Guide
**Quick Color Reference:** - text: #000000 - background: #ffffff - border: #000000 - secondary text: #757575 - primary action: no distinct CTA color **Example Component Prompts:** 1. Create a location selector screen: white (#ffffff) background, max-width 1200px, two-column asymmetric layout. Left column 320px wide, 112px outer padding, vertically centered. Right column holds a full-bleed editorial photograph with 0px radius. ZARA wordmark top-left in custom didone serif, #000000. Form label 'SELECT YOUR LOCATION' at 13px uppercase weight 400, #000000. Dropdown fields with 1px bottom border #000000, no background, no radius. Continue button: 1px solid #000000 border, transparent fill, 0px radius, 13px uppercase text #000000, 12px 20px padding. 2. Create a product listing section: white (#ffffff) background, 48px top/bottom padding, 20px gaps between items. Product cards: 0px radius, no border, no shadow. Product names at 13px weight 400 #000000, prices at 13px #757575. 3. Create a navigation bar: white (#ffffff) background, 1px solid #000000 bottom border. Menu items at 13px uppercase weight 400, #000000, left-aligned. ZARA wordmark centered or left-aligned in custom didone serif #000000. No background color, no shadow, 0px radius on all elements. 4. Create a category landing page hero: full-viewport editorial photograph as background, no overlay. ZARA wordmark top-left in #000000 over the image. Category title at display size (custom didone serif or large weight 300 Helvetica) centered or bottom-left, #000000 or #ffffff depending on image luminance. No buttons, no CTAs — the imagery is the entry point. 5. Create a form input field: 0px radius, no background, no border except 1px solid #000000 bottom border only. Label above at 11px uppercase weight 400, #757575. Input value at 13px #000000. No focus ring, no box-shadow on focus — the border remains static.
Similar brands
COS
Same monochromatic black-on-white system, same hairline border aesthetic, same editorial photography dominance, same zero-radius flat design
Massimo Dutti
Sibling-brand approach — serif wordmark, compressed UI type scale, pure white canvas, no decorative UI elements, photography-first layout
SSENSE
Extreme minimalism with full-width editorial imagery, monochrome palette, small uppercase UI labels, flat components with no shadows
Aesop
Same hairline-border form fields, same generous whitespace, same binary black/white palette, same editorial-print typography scale
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
