---
version: alpha
name: Zara
description: "Black ink on white paper, and the clothes supply every colour."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#000000"
  primary: "#FFFFFF"
  action-black: "#000000"
  veil: "rgba(255, 255, 255, 0.75)"
  dialog-hairline: "#CCCCCC"
  field-rule: "#797979"
  label-grey: "#6B6B6B"
  legal-grey: "#757575"
typography:
  display:
    fontFamily: Didot
    fontSize: 56px
    fontWeight: 300
    lineHeight: 56px
    letterSpacing: 0em
  dialog-title:
    fontFamily: Helvetica Now Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  body:
    fontFamily: Helvetica Now Text
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  base:
    fontFamily: Helvetica Now Text
    fontSize: 15px
    fontWeight: 400
    lineHeight: 18.465px
    letterSpacing: 0em
  nav-link:
    fontFamily: Helvetica Now Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  control:
    fontFamily: Helvetica Now Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  button:
    fontFamily: Helvetica Now Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  section-label:
    fontFamily: Helvetica Now Text
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  caption-link:
    fontFamily: Helvetica Now Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  eyebrow:
    fontFamily: Helvetica Now Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.8px
  fine-print:
    fontFamily: Helvetica Now Text
    fontSize: 9px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
rounded:
  primary-secondary-button: 0px
  auth-and-social-buttons: 0px
  dialog-wrapper: 0px
  input-field-and-search-box: 0px
  product-tile-figure: 0px
  page-wrapper-and-body: 0px
spacing:
  "1": 4px
  "2": 8px
  "3": 12px
  "4": 16px
  "5": 20px
  "6": 24px
  "16": 64px
  "24": 96px
  "30": 120px
  "80": 320px
---
# Zara — Style Reference

> Black ink on white paper, and the clothes supply every colour.

**Theme:** light

Zara's web system is one system in two registers rather than two systems: an editorial front-of-house where photography runs edge to edge and the chrome retreats to hairlines and micro-labels, and a transactional back-of-house — bag, sign-in, help — where the same white canvas carries dense uppercase text at twelve and thirteen pixels. The palette holds no hue: black ink, white paper, and a short ladder of greys that surface as a legal line, a field label and two hairlines, so every colour a visitor sees comes from the garments. Corners stay square and surfaces stay flat; depth is done with a one-pixel rule and a white veil that dims the page behind a dialog rather than with any drop shadow. Type is Helvetica Now Text at Light almost everywhere, with a Didot at fifty-six pixels set solid for the category title — the brand trusts a serif at scale, not extra weight, for its loudest moment. The rhythm is slow and wide: twelve-pixel gaps inside the header rail, ninety-six between grid columns, a hundred and twenty above and below the footer bands.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-ink` | Body, nav, labels, product titles, prices — the default text colour on every captured page. The census's most-painted text rows carry it untinted — `.footer-links__link` at 12px, `.zds-dialog-title` at 18px. |
| Action Black | `#000000` | `--color-action` | The single filled control fill (`.zds-button--primary`). Its rarity is the signal: one black rectangle per decision, and the alternative is outlined, not coloured. |
| Rule Black | `#000000` | `--color-border` | 1px borders on the header search link, the login field's Continue and social buttons, and the help search input. The system's structural line. |
| Paper White | `#FFFFFF` | `--color-canvas` | Body fill on all four pages, and the fill of every product-tile figure. It is both the page and the packshot ground — the seam is invisible by design. |
| Inverse Ink | `#FFFFFF` | `--color-ink-inverse` | Text on the black primary button, at 14px/300. Used nowhere else as ink; white is a surface first. |
| Veil | `rgba(255, 255, 255, 0.75)` | `--color-veil` | The dialog backdrop and the help-page image veil. White over white — the system dims by bleaching, not by darkening. |
| Dialog Hairline | `#CCCCCC` | `--color-border-soft` | Border on the geolocation dialog wrapper. The soft rule exists so a floating white panel can sit on a white page. Not a general-purpose divider. |
| Field Rule | `#797979` | `--color-border-field` | The 1px underline on the login email control. `.mds-base-field__control` rests at this grey while the `.mds-button.mds-button--secondary.mds-button--size-m.mds-button--` ("Continue") beneath it takes a 1px `#000000` border — the field is quieter than the control it feeds. |
| Label Grey | `#6B6B6B` | `--color-ink-label` | The "Email" field label. The system's one softened label ink, and it appears above the field, not inside it. |
| Legal Grey | `#757575` | `--color-ink-quiet` | Footer copyright and the marketing spot's fine print. Reserved for text that has to be present and must not compete. |

The site also declares a dark-mode variable set for its chat widget — panel, message and button colours the captured pages never paint.

## Tokens — Typography

### Helvetica Now Text — the working face: nav, labels, buttons, product titles, prices, body copy, legal text · `--font-body`
- **Substitute:** Helvetica Neue, Inter, Arial
- **Weights:** 300, 400, 500, 700
- **Sizes:** 9px, 12px, 13px, 14px, 15px, 18px
- **Line height:** 14.4px–28px (1.2 at the tightest, 2.67 on 9px fine print)
- **Letter spacing:** normal almost everywhere; +0.8px on uppercase micro-labels at weight 500; −0.5px on the bag counter's digit
- **Role:** the working face — nav, labels, buttons, product titles, prices, body copy, legal text.

### Didot — the display serif, set solid at 56px for the category title · `--font-display`
- **Substitute:** Didot LT Pro, Bodoni 72, GFS Didot
- **Weights:** 300
- **Sizes:** 56px
- **Line height:** 56px (1.0 — set solid)
- **Letter spacing:** normal
- **Role:** the display serif. The census paints it on one element, the category title "The New" (`.products-category-title`) — a high-contrast serif dropped into an otherwise sans page.

### Times — present in the font stack; no census text row carries it · `--font-serif`
- **Substitute:** Times New Roman, Liberation Serif, Tinos
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** present in the font stack; no census text row carries it, so treat it as the serif fallback behind Didot rather than a face to design with.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display (Didot) | 56px | 56px | normal | `--text-display` |
| Dialog title | 18px | 28px | normal | `--text-title` |
| Body | 15px | 24px | normal | `--text-body` |
| Base (inherited) | 15px | 18.465px | normal | `--text-base` |
| Nav link | 14px | 22px | normal | `--text-nav` |
| Control | 14px | 16px | normal | `--text-control` |
| Button (auth) | 14px | 20px | normal | `--text-button` |
| Section label | 13px | 20px | normal | `--text-label` |
| Caption / link | 12px | 20px | normal | `--text-caption` |
| Eyebrow (500) | 12px | 20px | 0.8px | `--text-eyebrow` |
| Fine print | 9px | 24px | normal | `--text-fine` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable at page scale, compact at control scale — the page breathes in 96px and 120px steps while a button pads 4px × 16px.

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 1 | 4px | `--spacing-1` |
| 2 | 8px | `--spacing-2` |
| 3 | 12px | `--spacing-3` |
| 4 | 16px | `--spacing-4` |
| 5 | 20px | `--spacing-5` |
| 6 | 24px | `--spacing-6` |
| 16 | 64px | `--spacing-16` |
| 24 | 96px | `--spacing-24` |
| 30 | 120px | `--spacing-30` |
| 80 | 320px | `--spacing-80` |

### Border Radius
| Element | Value |
|---------|-------|
| Primary / secondary button | 0px |
| Auth and social buttons | 0px |
| Dialog wrapper | 0px |
| Input field and search box | 0px |
| Product tile figure | 0px |
| Page wrapper and body | 0px |

The radii census records nothing beyond 0px on any carrier it walked. There is no radius vocabulary here — there is a refusal of one.

### Shadows
None. The walk records `box-shadow` on every element it touches and the shadows block comes back empty, so any shadow in a rebuild is an invention.

### Layout
- **Page max-width:** `not measured` — no wrapper in the census caps width; the grids and hero images run to the viewport edge.
- **Section gap:** 120px vertical on the footer sitemap band and the desktop content block; 96px on the footer bottom-nav band; 320px on the help search block.
- **Card padding:** 24px on the dialog wrapper; 20px on the login page wrapper; 0px on the product-tile figure.
- **Element gap:** 12px in the header action rail; 4px in the product info stack; 8px in the density selector and the email field; 24px inside the dialog, the auth form and the social section; 20px on the desktop layout row.

## Components

### Header Action Rail
**Role:** The persistent top-right stack — search, bag, log in, help — that stays out of the photography's way.
Built on `.layout-actionable.layout-ss26-desktop-action-search.layout-deskt`: an anchor with no fill, 14px/300 at 22px line-height, padding 0px 0px, radius 0px, and a 1px `#000000` border — a search field expressed as a single black rule, not a box. The rail's own rhythm is the 12px gap carried by `.layout-actionable.layout-header-desktop-action-cart.link`, `.layout-actionable.layout-desktop-account-action.layout-header-de` ("LOG IN") and `.layout-actionable.layout-header-desktop-action-help.link`. The bag counter measures two ways: `.bag-with-count__count-number` is 13px/300 at 20px with −0.5px tracking on the home and help pages, and 13px/500 at 20px with +0.8px tracking on the cart, where the count is the thing you are looking at.

### Hamburger Mark
**Role:** The menu affordance, and the only mark in the top-left corner.
Two spans, `.animated-hamburger-ss26__line-1` and `.animated-hamburger-ss26__line-2`, each filled `#000000` with padding 0px 0px, radius 0px, border none and shadow none, carried on the home, cart and help pages. Stroke weight and length are `not measured`; the tiles show two short horizontal rules stacked with a visible gap, sitting flush to the page's top-left corner rather than inside a chrome bar. Build it as geometry, not an icon font: two filled rectangles in the ink colour, no container and no rounded caps.

### Product Tile
**Role:** The unit of the grid — a packshot, a name, a price, and nothing else.
`.product-grid-product__figure` is a figure filled `#FFFFFF` with padding 0px 0px, radius 0px, border none and shadow none — the tile has no visible container at all; the white of the photograph continues into the white of the page. Titles are h3 at 12px/300, 20px line-height, `#000000` ("CHECK BOMBER JACKET"). The price stack sits on a 4px gap (`.price__amount-wrapper`), and the info block on the same 4px (`.product-grid-product-info__product-data.product-grid-product-inf`). The list gap measures two ways: `.product-grid__product-list` runs 0px row / 96px column on the home page and 64px row / 96px column on the cart's recommendations.

### Grid Density Selector
**Role:** The zoom control that lets a shopper choose how many products fill a row.
`.view-option-selector__label-text` sets the word "VIEW" at 14px/300, 16px line-height, `#000000`. The options are where the detail lives: `.view-option-selector-button__option` paints "1" at 14px/500 with 0.8px tracking, and "2" at 14px/400 with normal tracking — the selected state is carried entirely by a weight step and a tracking step, with no underline, no box and no colour change. Spacing is 4px between options (`.view-option-selector__list`) inside an 8px group gap (`.view-option-selector.products-category-view__zoom-selector`).

### Scrim
**Role:** The layer that pushes the page back when a dialog opens.
`.zds-backdrop` is a div filled `rgba(255, 255, 255, 0.75)` with padding 0px 0px, radius 0px, border none and shadow none, present on the home, cart and help pages; the help page adds a second veil of the same value on `.help-view__background-image-veil.help-view__background-image-vei` over its hero photography. This is the system's signature move and it inverts the convention: instead of darkening behind a modal, Zara bleaches, so a page of editorial photography fades toward its own white canvas. Every tile in this capture was shot with the veil active — the pale look of the imagery is the scrim, not the art direction.

### Geolocation Dialog
**Role:** The country-confirmation panel that greets a visitor before they browse.
`.zds-dialog__wrapper.geolocation-modal__container` is a div filled `#FFFFFF`, padding 24px 24px, radius 0px, border 1px `#CCCCCC`, shadow none, with a 24px gap between its stacked children. `.zds-dialog-header` carries the title at 18px/300, 28px line-height with no fill of its own; `.zds-dialog-title` sets "Hello," at 18px/300/28px in `#000000` — sentence case, comma included, the warmest line in the system. The fine print runs 9px/300 at 24px, and its inline `here` action (`.geolocation-modal__presence-action`) is where the census's weight 700 lands: bold at nine pixels, underlined, and no larger than the sentence around it.

### Primary Button
**Role:** The affirmative action — one per decision, and it is the only thing on the panel with a fill.
`.zds-button.geolocation-modal__button.zds-button--primary.zds-but` is a button filled `#000000` with `#FFFFFF` text at 14px/300, padding 4px 16px, radius 0px, border none, shadow none. Its label sets at 14px/300 with a 16px line-height in `#FFFFFF` ("Yes, continue on Australia"), rendered uppercase. Note the padding ratio: 4px vertical against 16px horizontal, a 1:4 that produces a wide, shallow bar rather than a chunky pill. The button stretches to the panel's content width, so the black rectangle reads as a band across the dialog — its shape does the emphasis that a colour would do in another system.

### Secondary Button
**Role:** The alternative path, given equal footprint and none of the weight.
`.zds-button.geolocation-modal__button.zds-button--secondary.zds-b` is the primary's exact twin inverted: filled `#FFFFFF`, text `#000000`, 14px/300, padding 4px 16px, radius 0px, shadow none — with a 1px `#000000` border doing the entire job of making it a control. Same height, same width, same type, opposite value. The pairing is the whole hierarchy model: Zara does not shrink or grey out the road not taken; it removes the fill and keeps the geometry, so declining reads as a real choice rather than a discouraged one.

### Email Field
**Role:** The single input that opens the account flow.
`.mds-base-field__control` is a label with no fill, radius 0px, padding 0px 0px and a 1px `#797979` border — in the tile it reads as a rule beneath the input, with the box's other edges absent. Its label sits above rather than inside: `.mds-label` sets "Email" at 13px/300, 20px line-height in `#6B6B6B`, uppercase, on an 8px gap from the control. The field group (`.mds-base-field.mds-base-field--full-width.mds-text-field.email-i`) stacks on 4px. Resting grey rather than black is deliberate — an empty field asks quietly; the buttons below it are the ones drawn in full ink.

### Auth Continue Button
**Role:** The submit for the sign-in form, and the shape every other button on that page copies.
`.mds-button.mds-button--secondary.mds-button--size-m.mds-button--` is a button with fill none, ink `#000000`, type at 14px/300 with a 20px line-height, padding 0px 12px, radius 0px, a 1px `#000000` border and no shadow, labelled "Continue" in uppercase. Height is `not measured`; the padding row carries only the 12px inline value, so build the height from line-height plus your own vertical rhythm. On a page whose right half is a full-bleed photograph, an unfilled button with a hairline border keeps the form reading as typography on paper.

### Social Sign-In Button
**Role:** The QR, Google and Apple options stacked under "Access with".
`.mds-button.mds-button--size-m.mds-button--secondary.auth-provide` paints three times on the login page: fill none, 14px/300 at 20px line-height, padding 0px 12px, radius 0px, 1px `#000000` border, shadow none. They are visually identical to the Continue button above them, separated only by the provider glyph at the left of the label — and those glyphs are the one place a third-party colour enters the page. The block sits on a 24px gap (`.social-auth-section`). Keep the buttons full-column width and identical to each other; the brand does not let a provider's own button styling in.

### Footer Sitemap
**Role:** The dense end-of-page directory — help, follow, company, policies.
Column heads use `.footer-links__title`: h3 at 12px/500, 20px line-height, 0.8px tracking, `#000000` — the eyebrow style, and the reason weight 500 exists in this system at all. Links under them use the 12px/300/20px caption style (`.footer-links__link`, "My Zara Account"). The band's rhythm comes from section padding: 120px vertical on `.layout-footer__section.layout-footer__section--sitemap` and 96px on `.layout-footer__section.layout-footer__section--bottom-nav`. The last line drops to `#757575` on `.layout-footer__copyright` and the `.zds-label-s` "© All rights reserved" — the only tonal step down in the whole footer.

## Do's and Don'ts

### Do
- Set every corner to 0px: `.zds-dialog__wrapper.geolocation-modal__container`, `.zds-button.geolocation-modal__button.zds-button--primary.zds-but`, `.mds-base-field__control` and `.product-grid-product__figure` each measure radius 0px, and the radii census records nothing beyond 0px.
- Make black the emphasis. `.zds-button--primary` is filled `#000000` with `#FFFFFF` text; its counterpart is the same rectangle with a 1px `#000000` border and no fill.
- Let 12px carry the interface. The 12px/300/20px style (`.footer-links__link`) is the most-painted text row in the census, and it is a link, a label and a product title at once.
- Signal state with weight and tracking. `.view-option-selector-button__option` separates its options with 500 + 0.8px against 400 + normal — nothing else changes.
- Bleach, don't darken. Overlays use `rgba(255, 255, 255, 0.75)` (`.zds-backdrop`), the same value on the help hero veil.
- Keep uppercase for navigation, controls, labels and product titles, and let sentence case survive in dialog copy — "Hello," and "Yes, continue on Australia" are set as written.
- Give the grid air: 96px between product columns (`.product-grid__product-list`) and 120px above the footer sitemap.

### Don't
- Don't add a shadow. The shadows block for these pages is empty; elevation is a 1px rule and a white veil.
- Don't introduce a hue. The painted inventory is `#000000`, `#FFFFFF`, `#CCCCCC`, `#757575`, `#6B6B6B` and `#797979` — colour is the merchandise's job, not the interface's.
- Don't spread the Didot. The census paints it once, on the category title "The New" (`.products-category-title`); a second serif moment on the page would spend the effect.
- Don't put chrome around a product photograph. `.product-grid-product__figure` has padding 0px, border none and a `#FFFFFF` fill that matches the canvas exactly.
- Don't fatten the type. Helvetica Now Text paints 300 across body, nav, buttons and product titles; 500 belongs to eyebrows and selected states, and the census's 700 lands on the dialog's inline `here` action.
- Don't grey out the secondary path. `.zds-button--secondary` keeps full-size type, full ink and full width — it loses only its fill.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Body fill on all four captured pages. |
| 0 | Tile Ground | `#FFFFFF` | `.product-grid-product__figure` — the packshot's white continues the canvas. |
| 1 | Panel | `#FFFFFF` | `.zds-dialog__wrapper.geolocation-modal__container`, separated by a 1px `#CCCCCC` rule rather than a tone shift. |
| 1 | Login Wrapper | `#FFFFFF` | `.main-layout__wrapper`, padding 20px, border none. |
| 1 | Veil | `rgba(255, 255, 255, 0.75)` | Sits over the page beneath a dialog, and over the help hero. |
| 2 | Inverse | `#000000` | The primary button's fill — the darkest plane in the system, and the smallest. |

## Elevation

There is no luminance ladder: the boxes census carries two painted panels and both are filled `#FFFFFF`, the same value as the body. Depth is therefore entirely linear and atmospheric. A raised panel earns a 1px `#CCCCCC` border — softer than the `#000000` used on controls, because the dialog is a surface and a button is an action. Behind it, `rgba(255, 255, 255, 0.75)` washes the page toward white so the panel separates by contrast of content, not of tone. Rebuild this without shadows, without a grey modal ground, and without a tinted overlay; if a surface needs to lift, give it a hairline and take light out of everything else.

## Imagery

Photography is the design. The home page is a full-bleed two-up grid of studio fashion shots that run corner to corner with no gutters, no captions and no chrome floating on them — the header type sits directly on the image. The art direction is consistent: seamless near-white studio backdrops, natural light, models mid-gesture or cropped hard at the shoulder and thigh, garments predominantly black against pale ground, with occasional editorial bands in a single desaturated tone. The login page splits the viewport — form on the left half, one uncropped image on the right — and the help page opens on a paired photograph veiled to `rgba(255, 255, 255, 0.75)`. Product photography is the opposite mode: garments cut out on pure `#FFFFFF`, floating with no shadow and no mannequin. There is no illustration and no 3D anywhere in the capture; icons are hairline glyphs (bag, chat bubble, plus) drawn at the weight of the type around them.

## Layout

Everything is full-bleed. No wrapper in the census caps page width, and the home grid's images reach both viewport edges with the header's search rule and action rail overlaid on them. The home page's editorial grid runs on `.products-category-grid-block-dynamic-grid__grid` with an 87.15px row gap and no column gap — the images touch side to side and breathe only vertically. The product list (`.product-grid__product-list`) measures two ways: 0px row / 96px column on the home page, 64px row / 96px column on the cart. The help page's content grid runs 120px row / 24px column (`.help-view__content`) below a search block carrying 320px of vertical padding — the widest single interval in the capture, and the reason the help landing reads as a poster before it reads as a directory. Footer bands step down from 120px (`.layout-footer__section--sitemap`) to 96px (`.layout-footer__section--bottom-nav`). Navigation is not a bar: a two-line hamburger anchors the top-left, a 1px-ruled search sits top-right, and the bag / log in / help stack runs down the right edge on a 12px gap, so no horizontal band ever crosses the photography.

## Typography Voice

Two modes, and the split is register, not hierarchy. The display mode is a single Didot at 56px/56px, weight 300, set solid so the ascenders and descenders nearly touch — a high-contrast serif at a size no other element approaches, doing the work of a masthead. Everything else is Helvetica Now Text Light between 9px and 18px, and the interface never climbs above 18px: hierarchy is made by position, case and space instead of by scale. The signature move is the leading. Twelve- and thirteen-pixel text is set on 20px (1.67 and 1.54), nine-pixel fine print on 24px (2.67), while the display is set at 1.0 — so the small type is airier than the big type by a wide margin. Add the +0.8px tracking on uppercase 500 labels and you get the effect: micro-typography that stays legible and calm at sizes most systems would consider unusable, and one serif line that has the whole page to itself.

## Agent Prompt Guide

Build on the `#FFFFFF` that `.zds-theme.zds-theme--light.theme--mouse-user.full-width` fills and write in the `#000000` that `.footer-links__link` sets at 12px/300; keep radius at the 0px `.product-grid-product__figure` and `.zds-button.geolocation-modal__button.zds-button--primary.zds-but` both measure, and add no shadow, since the shadows block for these pages records none. When a generator reaches for an accent colour, a card border or a rounded button, it has almost certainly left this system: the answers the census carries are a 1px `#000000` rule (`.layout-actionable.layout-ss26-desktop-action-search.layout-deskt`), a filled `#000000` rectangle (`.zds-button.geolocation-modal__button.zds-button--primary.zds-but`), or nothing at all.

## Quick Color Reference

- background: `#FFFFFF`
- text: `#000000`
- surface: `#FFFFFF`
- border: `#000000` (soft variant `#CCCCCC` on dialogs)
- accent: `#000000` — no chromatic accent is painted anywhere in the capture
- primary action: `#000000` with `#FFFFFF` text

## Example Component Prompts

1. **Primary button**: A full-width button, background `#000000`, label `#FFFFFF` uppercase in Helvetica Now Text 14px weight 300 with 16px line-height, padding 4px top/bottom and 16px left/right, border-radius 0, no border, no shadow.
2. **Secondary button**: Same geometry as the primary — 14px/300, padding 4px 16px, border-radius 0, no shadow — but background `#FFFFFF`, label `#000000`, and a 1px solid `#000000` border. Identical height and width to the primary sitting above it.
3. **Product tile**: A figure filled `#FFFFFF` with 0 padding, 0 radius, no border and no shadow, holding a cut-out garment photo on white; below it a 12px/300 uppercase title at 20px line-height in `#000000` and a price on a 4px gap. Lay tiles out with a 96px column gap and a 64px row gap.
4. **Geolocation dialog**: A centred white panel, background `#FFFFFF`, 24px padding on all sides, border 1px solid `#CCCCCC`, border-radius 0, no shadow, children stacked on a 24px gap. Title "Hello," at 18px/300 with a 28px line-height in `#000000`, then body at 15px/300/24px, then the primary and secondary buttons, then 9px/300/24px fine print. Behind it, an overlay of `rgba(255, 255, 255, 0.75)`.
5. **Footer sitemap**: Four to five columns of links. Column heads at 12px weight 500, 20px line-height, 0.8px letter-spacing, uppercase, `#000000`; links at 12px weight 300, 20px line-height, `#000000`. 120px of vertical padding on the band, 96px on the bottom-nav band below it, and a closing legal line in `#757575`.

## Similar Brands

- **COS** — the same conviction that a white page, a hairline and one weight of a grotesque are enough to sell clothes.
- **The Row** — an editorial-serif display moment floating over full-bleed photography, with the interface reduced to text links.
- **Jil Sander** — square corners, no fills, and an interface that treats itself as caption rather than container.
- **Aesop** — a shadowless, achromatic surface system where the only permitted contrast is ink against paper.
- **SSENSE** — micro-typography at 11–13px carrying an entire commerce interface, with the product grid left completely unframed.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-action: #000000;
  --color-border: #000000;
  --color-canvas: #ffffff;
  --color-ink-inverse: #ffffff;
  --color-veil: rgba(255, 255, 255, 0.75);
  --color-border-soft: #cccccc;
  --color-border-field: #797979;
  --color-ink-label: #6b6b6b;
  --color-ink-quiet: #757575;

  /* Typography — Families */
  --font-body: 'Helvetica Now Text', 'Helvetica Neue', Inter, Arial, sans-serif;
  --font-display: 'Didot', 'Didot LT Pro', 'Bodoni 72', 'GFS Didot', serif;
  --font-serif: 'Times', 'Times New Roman', 'Liberation Serif', serif;

  /* Typography — Scale */
  --text-display: 56px;
  --text-title: 18px;
  --text-body: 15px;
  --text-base: 15px;
  --text-nav: 14px;
  --text-control: 14px;
  --text-button: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --text-eyebrow: 12px;
  --text-fine: 9px;
  --leading-display: 56px;
  --leading-title: 28px;
  --leading-body: 24px;
  --leading-base: 18.465px;
  --leading-nav: 22px;
  --leading-control: 16px;
  --leading-button: 20px;
  --leading-label: 20px;
  --leading-caption: 20px;
  --leading-eyebrow: 20px;
  --leading-fine: 24px;
  --leading-cookie: 14.4px;
  --tracking-eyebrow: 0.8px;
  --tracking-count: -0.5px;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-30: 120px;
  --spacing-80: 320px;

  /* Border Radius */
  --radius-button: 0px;
  --radius-input: 0px;
  --radius-card: 0px;
  --radius-dialog: 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-ink: #000000;
  --color-action: #000000;
  --color-border: #000000;
  --color-canvas: #ffffff;
  --color-ink-inverse: #ffffff;
  --color-veil: rgba(255, 255, 255, 0.75);
  --color-border-soft: #cccccc;
  --color-border-field: #797979;
  --color-ink-label: #6b6b6b;
  --color-ink-quiet: #757575;

  --font-body: 'Helvetica Now Text', 'Helvetica Neue', Inter, Arial, sans-serif;
  --font-display: 'Didot', 'Didot LT Pro', 'Bodoni 72', 'GFS Didot', serif;
  --font-serif: 'Times', 'Times New Roman', 'Liberation Serif', serif;

  --text-display: 56px;
  --text-display--line-height: 56px;
  --text-title: 18px;
  --text-title--line-height: 28px;
  --text-body: 15px;
  --text-body--line-height: 24px;
  --text-base: 15px;
  --text-base--line-height: 18.465px;
  --text-nav: 14px;
  --text-nav--line-height: 22px;
  --text-control: 14px;
  --text-control--line-height: 16px;
  --text-button: 14px;
  --text-button--line-height: 20px;
  --text-label: 13px;
  --text-label--line-height: 20px;
  --text-caption: 12px;
  --text-caption--line-height: 20px;
  --text-eyebrow: 12px;
  --text-eyebrow--line-height: 20px;
  --text-eyebrow--letter-spacing: 0.8px;
  --text-fine: 9px;
  --text-fine--line-height: 24px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-30: 120px;
  --spacing-80: 320px;

  --radius-button: 0px;
  --radius-input: 0px;
  --radius-card: 0px;
  --radius-dialog: 0px;
}
```