---
version: alpha
name: On
description: "A white page, black ink, and one small ochre word doing all the shouting."
colors:
  on-surface-variant: "#F0ECEB"
  on-surface: "#000000"
  surface: "#FFFFFF"
  primary: "#0000EE"
  plate-mid: "#F6F7F8"
  plate-deep: "#ECEEF0"
  label-ochre: "#995C00"
  ink-soft: "#333333"
  ink-tab: "#4D4D4D"
  ink-fine: "#666666"
  hairline: "#CCCCCC"
  control-tint: "#E5E5E5"
  block-ink: "#151522"
  billboard-grey: "#999999"
  veil-5: "rgba(0, 0, 0, 0.05)"
  veil-10: "rgba(0, 0, 0, 0.1)"
typography:
  display:
    fontFamily: On
    fontSize: 67.904px
    fontWeight: 400
    lineHeight: 74.6944px
    letterSpacing: -1.35808px
  headline:
    fontFamily: On
    fontSize: 52.992px
    fontWeight: 400
    lineHeight: 58.2912px
    letterSpacing: -0.52992px
  headline-link:
    fontFamily: On
    fontSize: 52.992px
    fontWeight: 400
    lineHeight: 63.5904px
    letterSpacing: -0.52992px
  title:
    fontFamily: On
    fontSize: 42px
    fontWeight: 400
    lineHeight: 50.4px
    letterSpacing: -0.42px
  section:
    fontFamily: On
    fontSize: 32.96px
    fontWeight: 400
    lineHeight: 39.552px
    letterSpacing: -0.42px
  modal-headline:
    fontFamily: On
    fontSize: 32.96px
    fontWeight: 400
    lineHeight: 39.552px
    letterSpacing: -0.3296px
  lede:
    fontFamily: On
    fontSize: 32.96px
    fontWeight: 400
    lineHeight: 42.848px
    letterSpacing: 0em
  card-headline:
    fontFamily: On
    fontSize: 26px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: 0em
  pull-copy:
    fontFamily: On
    fontSize: 26px
    fontWeight: 400
    lineHeight: 39px
    letterSpacing: 0em
  nav:
    fontFamily: On
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  subtitle:
    fontFamily: On
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  control:
    fontFamily: On
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  body:
    fontFamily: On
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.2px
  field-label:
    fontFamily: On
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  product-title:
    fontFamily: On
    fontSize: 15.936px
    fontWeight: 400
    lineHeight: 23.904px
    letterSpacing: 0em
  price:
    fontFamily: On
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  fine-print:
    fontFamily: On
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: 0em
  cta-mono:
    fontFamily: On Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0.84px
  label-mono:
    fontFamily: On Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 1.44px
  badge:
    fontFamily: On
    fontSize: 8px
    fontWeight: 400
    lineHeight: 8px
    letterSpacing: 0em
rounded:
  input-filter-bar-footer-section: 0px
  text-badge: 2px
  status-label: 3px
  editorial-card-and-its-image: 4px
  modal-dialog: 12px
  pill-button-chip: 40px
spacing:
  hair: 4px
  tight: 8px
  snug: 12px
  base: 16px
  comfortable: 24px
  wide: 32px
  column: 40px
  gutter: 63.936px
  section: 64px
  block: 96px
  page-top: 128px
---
# On — Style Reference

> A white page, black ink, and one small ochre word doing all the shouting.

**Theme:** light

White ground, black type, and the entire colour budget spent on a single burnt ochre reserved for status words. The signature move is the pill: controls resolve to a capsule or a perfect circle, filled black, filled white, or filled with a pale grey — a shape vocabulary so narrow that a rectangle reads as a mistake. Type carries hierarchy through scale and negative tracking rather than colour or weight variety; the display face never leaves its heaviest cut. Two registers share the one canvas — the home page runs editorial, white pills laid over full-bleed photography and category links set at headline size, while shop and category pages run catalogue, a white filter bar, outlined chips, and a grid whose columns nearly touch. The layout is full-bleed to a fixed gutter, the product plate is a three-stop white-to-grey gradient, and depth is nearly absent.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FFFFFF` | `--color-canvas` | Page ground, footer, filter bar, modal. Also a fill: what a control wears when it sits on photography. |
| Ink | `#000000` | `--color-ink` | Every heading, body line and price. Doubles as the filled-control surface and the scrollbar thumb — the system's only dark plane. |
| Plate Mid | `#F6F7F8` | `--color-plate-mid` | Middle stop of the product-media gradient; never a flat fill on its own. |
| Plate Deep | `#ECEEF0` | `--color-plate-deep` | Final stop of that gradient, the grey the shoe's shadow lands on. |
| Placeholder Warm | `#F0ECEB` | `--color-placeholder` | Image-container fill before art loads. Warm, so an unloaded tile reads as paper rather than a hole. |
| Label Ochre | `#995C00` | `--color-label-ochre` | The entire accent budget: status words and their outline. Text and border only — never a CTA, never a heading. |
| Ink Soft | `#333333` | `--color-ink-soft` | Modal body copy. One step off black, so the lede sits under its headline without a second type size. |
| Ink Tab | `#4D4D4D` | `--color-ink-tab` | Inactive tabs and SEO links on the catalogue pages — de-emphasis carried by inline links, not surfaces. |
| Ink Fine | `#666666` | `--color-ink-fine` | Legal fine print, input placeholder, carousel scrollbar track. The quietest legible ink. |
| Hairline | `#CCCCCC` | `--color-hairline` | The chip outline. A border colour, never a rule across the page. |
| Control Tint | `#E5E5E5` | `--color-control-tint` | Fill on the small circular icon button. The one grey a control is allowed to wear. |
| Block Ink | `#151522` | `--color-block-ink` | A blue-black section band on the home page. Use it full-width and editorially, never for type. |
| Billboard Grey | `#999999` | `--color-billboard-grey` | Fill behind the home hero's billboard — a hold state, not a designed surface. |
| Veil 5% | `rgba(0, 0, 0, 0.05)` | `--color-veil-5` | The input's fill and its border at once: the field is a tint, not an outlined box. |
| Veil 10% | `rgba(0, 0, 0, 0.1)` | `--color-veil-10` | Fill on the footer's circular social icons — the only round tinted chip. |
| Link Default | `#0000EE` | `--color-link-default` | Computed link ink inherited by anchors and image wrappers. No blue type appears in the tiles — an unset UA default, not a brand colour. |

## Tokens — Typography

### On — the whole voice of the system: headings, nav, body, product titles, prices, and control labels · `--font-on`
- **Substitute:** Söhne, Neue Haas Grotesk, Inter
- **Weights:** 400, 500, 700
- **Sizes:** 67.904px, 52.992px, 42px, 32.96px, 26px, 20px, 16px, 15.936px, 14px
- **Line height:** 1.00 (16px/16px on utility text) to 1.50 (16px/24px body, 26px/39px pull copy) — display and headings compress to 1.10–1.20
- **Letter spacing:** negative and proportional at scale — −1.35808px at 67.904px, −0.52992px at 52.992px, −0.42px at 42px and at 32.96px, −0.3296px on the modal headline; positive only on two small rows, 0.2px on the footer link and 0.16px on the chip label; `normal` everywhere else
- **Role:** the whole voice of the system: headings, nav, body, product titles, prices, and control labels

### On Mono — status labels and result counts; the only face allowed wide tracking · `--font-on-mono`
- **Substitute:** GT America Mono, IBM Plex Mono, Roboto Mono
- **Weights:** 400, 500
- **Sizes:** 12px, 16px
- **Line height:** 18px at 12px (1.50), 16px at 16px (1.00)
- **Letter spacing:** 1.44px at 12px; `normal` at 16px
- **Role:** status labels and result counts; the only face allowed wide tracking

### On Diatype Standard — the uppercase inline call-to-action on catalogue pages · `--font-on-diatype`
- **Substitute:** ABC Diatype, Söhne Breit, Inter
- **Weights:** 700
- **Sizes:** 14px
- **Line height:** 14px (1.00)
- **Letter spacing:** 0.84px
- **Role:** the uppercase inline call-to-action on catalogue pages

### On Semi Mono — a fourth family the inventory names but no text row measures · `--font-on-semi-mono`
- **Substitute:** GT America Mono, IBM Plex Mono
- **Weights:** 700
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** a fourth family the inventory names but no text row measures

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 67.904px | 74.6944px | -1.35808px | `--text-display` |
| Headline | 52.992px | 58.2912px | -0.52992px | `--text-headline` |
| Headline Link | 52.992px | 63.5904px | -0.52992px | `--text-headline-link` |
| Title | 42px | 50.4px | -0.42px | `--text-title` |
| Section | 32.96px | 39.552px | -0.42px | `--text-section` |
| Modal Headline | 32.96px | 39.552px | -0.3296px | `--text-modal` |
| Lede | 32.96px | 42.848px | normal | `--text-lede` |
| Card Headline | 26px | 31.2px | normal | `--text-card` |
| Pull Copy | 26px | 39px | normal | `--text-pull` |
| Nav | 20px | 30px | normal | `--text-nav` |
| Subtitle | 20px | 30px | normal | `--text-subtitle` |
| Control | 16px | 20px | normal | `--text-control` |
| Body | 16px | 24px | 0.2px | `--text-body` |
| Field Label | 16px | 22px | normal | `--text-field` |
| Product Title | 15.936px | 23.904px | normal | `--text-product` |
| Price | 14px | 21px | normal | `--text-price` |
| Fine Print | 14px | 18.2px | normal | `--text-fine` |
| CTA Mono | 14px | 14px | 0.84px | `--text-cta` |
| Label Mono | 12px | 18px | 1.44px | `--text-label` |
| Badge | 8px | 8px | normal | `--text-badge` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable at section scale, compact inside the grid

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Hair | 4px | `--spacing-hair` |
| Tight | 8px | `--spacing-tight` |
| Snug | 12px | `--spacing-snug` |
| Base | 16px | `--spacing-base` |
| Comfortable | 24px | `--spacing-comfortable` |
| Wide | 32px | `--spacing-wide` |
| Column | 40px | `--spacing-column` |
| Gutter | 63.936px | `--spacing-gutter` |
| Section | 64px | `--spacing-section` |
| Block | 96px | `--spacing-block` |
| Page Top | 128px | `--spacing-page-top` |

### Border Radius
| Element | Value |
|---------|-------|
| Input, filter bar, footer, section | 0px |
| Text badge | 2px |
| Status label | 3px |
| Editorial card and its image | 4px |
| Modal dialog | 12px |
| Pill button, chip | 40px |
| Icon-only button, social icon | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card Lift | `rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px` | `--shadow-card` |
| Dialog | `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px 0px` | `--shadow-dialog` |

### Layout
- **Page max-width:** not measured — the footer and the filter bar run edge to edge with 63.936px of side padding
- **Section gap:** 64px on footers, navs and short-story blocks; 96px between home-page blocks; 128px above the catalogue's main column
- **Card padding:** not measured on the product card; the footer pads 64px 63.936px and the filter bar 24px 63.936px
- **Element gap:** 4px — the most-painted gap in the system, carried by product cards, link lists and carousel button wrappers

## Components

### Pill Button — Filled
**Role:** the committing action — sign up, shop the collection, submit the form.
From `._button_sfcvn_29._light_sfcvn_71._fullWidth_sfcvn_209._submit_1h`: fill `#000000`, text `#FFFFFF`, 16px/700 label, padding 0px 24px, radius 40px, a 1px `#000000` border matching the fill, no shadow. The border keeps the capsule the same measured size filled or outlined, so the two sit side by side without shifting. With 24px horizontal padding against zero vertical, height comes from the label's 20px line box.

### Pill Button — Outlined
**Role:** the second action in a pair, and the "related pages" link on catalogue pages.
`._button_sfcvn_29._outlined_sfcvn_109._link_9u37e_66` is an anchor: fill none, 1px `#000000` border, radius 40px, padding 0px 24px, 16px/700/20px label, no shadow. Its ink is `not measured`. Geometry is identical to the filled pill down to the padding: swapping the fill is the only difference between primary and secondary. The icon-bearing sibling `._button_sfcvn_29._outlined_sfcvn_109._hasIcon_sfcvn_217` drops to padding 0px 16px at the same 40px radius.

### Pill Button — Inverse
**Role:** the action laid over photography, where black would disappear into the image.
`._button_sfcvn_29._dark_sfcvn_90` is the home page's hero pair: fill `#FFFFFF`, text `#000000`, 16px/700, padding 0px 24px, radius 40px, 1px `#FFFFFF` border, no shadow. The exact inversion of the filled pill, sitting where a photograph is the ground. Do not add a scrim or a shadow beneath it; the white capsule is its own separation.

### Circular Icon Button
**Role:** the dismiss, the wishlist heart, the carousel step — an action with a glyph and no word.
`._button_sfcvn_29._light_sfcvn_71._extraSmall_sfcvn_59._hasIcon_s` fills `#E5E5E5` with text `#000000`, 16px/700, padding 0px 0px, radius 50%, no border, no shadow — the pale disc used for the modal close. A separate variant, `._button_sfcvn_29._dark_sfcvn_90._hasIcon_sfcvn_217._iconOnly_sfc`, fills `#FFFFFF` with text `#000000`, padding 0px 0px, radius 50%, 1px `#FFFFFF` border. A third, `._button_sfcvn_29._link_sfcvn_67._hasIcon_sfcvn_217._iconOnly_sfc`, carries no fill and sets its label at 14px/700/14px with 0.84px tracking — the naked carousel arrow. Zero padding on all three: the tap area is the icon's own box.

### Product Card
**Role:** one shoe, one garment — the unit the catalogue is built from.
The plate is `._productMedia_1g3ii_29._medium_1g3ii_65`, a div painting a three-stop gradient `#FFFFFF → #F6F7F8 → #ECEEF0` — a top-lit fall that puts the product's contact shadow on the deepest grey with no border and no radius. Copy stacks in one weight step: `._title_1d3gn_132` at On 15.936px/700/23.904px `#000000`, the descriptor at 15.936px/400/23.904px in the same ink, then `._price_1d3gn_138` at On 14px/400/21px. Card padding is `not measured`; internal rhythm is the 4px gap on `._productCard_fauzw_27` and the same 4px on `._floatingContainer_fauzw_75`. Nothing separates a card from its neighbour but the gap.

### Editorial Card
**Role:** the home page's storytelling tile — a photograph with a title sitting inside it.
`._editorialCard_1a6n8_47` is an anchor with fill none, radius 4px, no border, no shadow; its gradient sibling `._editorialCard_1a6n8_47._dark_1a6n8_97._gradient_1a6n8_113._resp` measures identically and adds the scrim that lets white type sit on the image. The title is `._textWrapper_1a6n8_179` at On 26px/700/31.2px — `#FFFFFF` when the card is dark, `#000000` when it is not. Internals: 8px on `._content_1a6n8_138`, 24px between actions on `._ctas_1a6n8_148`. 4px is the editorial register's whole shape language: soft enough to read as a card, not as a widget.

### Status Label
**Role:** the one-word claim over a product — new, limited edition, bestseller.
`._label_1d3gn_102` is a paragraph, ink `#995C00`, On Mono 12px/500/18px with 1.44px tracking, padding 0px, radius 3px, no border. Uppercase in every tile, and the tracking is what keeps the caps legible at 12px. The bordered variant `._label_1d3gn_102._outlinedLabel_1d3gn_124` takes the same ink and type, adds padding 1px 4px and a 1px `#995C00` border at the same 3px radius — the box promotes the word one notch. Ochre paints ink and border, never a fill.

### Filter Chip
**Role:** the applied filter and the category toggle above a product grid.
`._chipInner_134le_70._responsive_134le_132` is a span: fill `#FFFFFF`, 1px `#CCCCCC` border, radius 40px, padding 0px 24px, 16px/400/16px, no shadow. Its outer `._chip_134le_28._responsive_134le_132._chip_18l3a_32` is a button with fill none, padding 0px, radius 40px, no border — the button is the hit area, the inner span the visible capsule. The label rides at On 16px/500/21.6px with 0.16px tracking on `._label_134le_151`. `#CCCCCC` paints six border observations, all on these chips: a chip colour, not a structural rule.

### Email Capture Field
**Role:** the newsletter input — the only text input the pages paint.
`._input_1j5dp_18` fills `rgba(0, 0, 0, 0.05)` and borders with the same `rgba(0, 0, 0, 0.05)` at 1px, radius 0px, padding 16px 16px, text at 16px/400/16px with a `#666666` placeholder. That 0px radius against the 40px pill beneath it is the sharpest shape contrast in the system: the field is a tinted region of the page, the button is an object. Its label `._label_1j5dp_106` sits at On 16px/400/22px in `#000000`. Tint and border are the same value, so the edge reads as density, not as a frame.

### Modal Dialog
**Role:** the interruptive newsletter offer that opens over the page.
`._baseModalContent_1gi0q_293._center_1gi0q_341._withoutTopPadding` fills `#FFFFFF` at radius 12px with zero padding of its own and the heavier shadow: `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px 0px`. Its 12px radius is larger than any non-pill corner in the system. Inside, `._contentModalHeadline_1iacw_44` sets the headline at On 32.96px/700/39.552px with −0.3296px tracking, `._contentModalText_1iacw_60` the lede at On 20px/400/30px in `#333333`, and `._paragraph_1uhxl_118._paragraph_10hxs_28` the consent copy at On 14px/400/18.2px in `#666666`. Header elements space at 16px on `._baseModalHeader_1gi0q_192`.

### Global Header
**Role:** the persistent top bar — logo left, three section links centred, utilities right.
Links are `._navigationLink_148b9_27._bold_148b9_61._medium_148b9_78` at On 20px/700/30px with `normal` tracking: `#000000` on the catalogue pages, `#FFFFFF` on the home page where the bar floats over the hero photograph — the same class re-inked for its ground, with no bar fill. Primary links space at 32px on `._navigatonTabList_13xmn_27._primaryNavigation_jnyrn_42`; the utility cluster tightens to 16px on `._navigatonTabList_13xmn_27._utilitiesSection_jnyrn_52`. The feature flag `._textBadgeValue_1hk4v_40._right_1hk4v_66` measures two ways: `#000000` fill with `#FFFFFF` ink on the catalogue pages, `#FFFFFF` fill with `#000000` ink on the home page — both 8px/700/8px, padding 2px 4px, radius 2px, no border.

### Footer
**Role:** the closing plate — sign-up, four link columns, region, legal row, social icons.
`._container_uppxm_28._lightTheme_uppxm_55` is a footer filled `#FFFFFF`, padding 64px 63.936px, radius 0px, no border, no shadow, columns spaced 40px down and 32px across. The footer is the same white as everything above it; 64px of padding is all that marks the transition. Links sit at On 16px/400/24px with 0.2px tracking on `._link_au4t2_34`; `._copyrightText_uppxm_161` matches at 16px/400/24px, `normal` tracking. Social glyphs use `._icon_194g7_57._iconListIcon_uppxm_95`: an 8px-padded span filled `rgba(0, 0, 0, 0.1)` at radius 50%.

## Do's and Don'ts

### Do
- Set display at 67.904px with −1.35808px tracking and a 74.6944px line height. Negative tracking scales with size: −0.52992px at 52.992px, −0.42px at 42px. Below 26px it returns to `normal`.
- Use `--color-label-ochre` `#995C00` on On Mono 12px/500 with 1.44px tracking, uppercase, for status. All 206 of that colour's observations are paragraphs, and each is text or border.
- Keep the gutter at 63.936px. Footer and filter bar both pad to it, so grids, headings and legal rows line up on one vertical.
- Reach for radius 40px on a labelled control and 50% on an icon-only one: 40px is carried 36 times, on `._button_sfcvn_29._light_sfcvn_71._fullWidth_sfcvn_209._submit_1h` and the chips; 50% is carried 38 times, on `._button_sfcvn_29._light_sfcvn_71._extraSmall_sfcvn_59._hasIcon_s` and its icon-only siblings.
- Let the product plate carry the object: the `#FFFFFF → #F6F7F8 → #ECEEF0` gradient on `._productMedia_1g3ii_29._medium_1g3ii_65` replaces border, shadow and card fill in one value.
- Re-ink the nav rather than re-plating it. `._navigationLink_148b9_27._bold_148b9_61._medium_148b9_78` switches between `#000000` and `#FFFFFF` and keeps 20px/700/30px either way.

### Don't
- Don't tint a button. All five control rows fill `#000000` (`._button_sfcvn_29._light_sfcvn_71._fullWidth_sfcvn_209._submit_1h`, `._button_sfcvn_29._light_sfcvn_71`), `#FFFFFF` (`._button_sfcvn_29._dark_sfcvn_90` and its icon-only variant) or `#E5E5E5` (`._button_sfcvn_29._light_sfcvn_71._extraSmall_sfcvn_59._hasIcon_s`) — a coloured CTA is a foreign object here.
- Don't add a third shadow. The captured pages paint exactly two box-shadows: the 2px card lift and the 24px dialog drop. Everything else is flat.
- Don't fill anything with `#995C00`. Its 206 observations are 172 text and 34 border with no fill, and both carriers are labels — `._label_1d3gn_102` paints the ink, `._label_1d3gn_102._outlinedLabel_1d3gn_124` the border. The accent is a word, never a field.
- Don't round the input. `._input_1j5dp_18` is radius 0px while the submit pill below it is 40px — that contrast is the form's rhythm.
- Don't set display type at anything but 700. All six heading rows the census measures are weight 700; the family's 400 and 500 belong to body, subtitles and chip labels.
- Don't separate product cards with borders or shadows. The grid on `._grid_5mgrb_27` spaces 32px down and 4px across — that near-collision is the catalogue's density signal.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground, footer, filter bar, modal body — the default for everything |
| 1 | Product Plate | `#FFFFFF → #F6F7F8 → #ECEEF0` | The gradient behind a product cut-out; the only "card" surface in the grid |
| 1 | Placeholder | `#F0ECEB` | Warm hold state on the image container before art resolves |
| 2 | Control Tint | `rgba(0, 0, 0, 0.05)` | The input's fill and border; `#E5E5E5` is its opaque cousin on the small icon button |
| 3 | Ink Plane | `#000000` | Filled pills, the scrollbar thumb, the text badge — the system's only dark surface |
| 3 | Editorial Band | `#151522` | A single blue-black section block on the home page |

## Elevation

Two box-shadows exist in the whole capture: `rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px` on the home page's editorial image containers, and `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px 0px` on the modal. One idea at two scales: a half-pixel contact line plus a soft drop. Everywhere else separation is luminance: white canvas against the `#F6F7F8`/`#ECEEF0` plate, or ink against white. Where a line is needed it is 1px in the object's own colour — `#000000` on the outlined pill, `#CCCCCC` on the chip, `#995C00` on the outlined label, `rgba(0, 0, 0, 0.05)` on the input.

## Imagery

Photography does the emotional work and is never treated. Full-bleed athlete images run edge to edge behind the home hero with type set directly on them and no scrim beneath the headline; editorial tiles apply a gradient only where white 26px titles must survive the image. Product photography is the opposite register: a cut-out shoe, centred, lit from above, on the `#FFFFFF → #F6F7F8 → #ECEEF0` plate with its shadow falling onto the deepest stop. Colour-way swatches beneath each card are the same cut-outs at thumbnail scale, the active one underlined. Corners stay minimal — 4px on editorial images, 0px on the plate. No illustration, no 3D, no iconography beyond the line glyphs in header and footer.

## Layout

Full-bleed, gutter-defined, no visible container. Footer and filter bar both pad to 63.936px horizontally and everything above aligns to that edge; page max-width is `not measured`. Vertical rhythm runs three steps: 64px on footers, navs and short-story blocks; 96px between home-page blocks on `._blocks_ze36t_51._gap_ze36t_57`; 128px above the catalogue's main column on `._wrapper_l1eb1_27`. The home page's signature block is a list of category links, `._link_68imt_74`, at On 52.992px/700/63.5904px with −0.52992px tracking and 12px between lines — headline-scale words used as navigation, so the menu is the design. Catalogue pages open with a title, a chip row, a white filter bar `._bar_1vid6_31` at padding 24px 63.936px, then the grid `._grid_5mgrb_27` at 32px row and 4px column gaps. Carousels expose a scrollbar rather than fading edges: a `#666666` track on `._swiperScrollbar_1ka0e_242.swiper-scrollbar-horizontal`, a `#000000` thumb on `.swiper-scrollbar-drag`, both radius 0px, 4px between arrows on `._swiperButtonWrapper_1ka0e_218`.

## Typography Voice

Two modes, never blurred. Mode one is On at 700 with negative tracking — display, headline, section, card title, nav, control label — fixed at −0.02em for display and −0.01em from 52.992px down, so the largest type is the tightest. Mode two is On Mono at 12px/500 with 1.44px positive tracking in `#995C00`, uppercase, plus On Diatype Standard at 14px/700 with 0.84px tracking for inline CTAs — small, wide, technical, the only place the page raises its voice. Line height inverts against size: display sits at 1.10, body at 1.50, and the 26px pull copy stretches to 1.50 (26px/39px) while the 26px card title holds 1.20 — one size doing two jobs, separated by leading alone.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#000000`
- surface: `#F6F7F8`
- border: `#CCCCCC`
- accent: `#995C00`
- primary action: `#000000`

## Example Component Prompts
1. **Filled pill button**: A capsule, background `#000000`, label `#FFFFFF` in a grotesque sans at 16px/700/20px, normal tracking, padding 0 24px, radius 40px, 1px solid `#000000` border matching the fill, no shadow.
2. **Product card**: A grid card with no border, no shadow, no padding. Media plate: linear gradient `#FFFFFF → #F6F7F8 → #ECEEF0`, 0px radius, holding a centred cut-out product. Below it at 4px gaps: uppercase status label in a mono face at 12px/500/18px with 1.44px tracking in `#995C00`; title at 15.936px/700/23.904px `#000000`; descriptor at 15.936px/400/23.904px `#000000`; price at 14px/400/21px `#000000`.
3. **Newsletter modal**: A centred dialog, background `#FFFFFF`, radius 12px, shadow `rgba(0,0,0,0.05) 0 0 3px 0, rgba(0,0,0,0.1) 0 12px 24px 0`. Headline 32.96px/700/39.552px, −0.3296px tracking, `#000000`; lede 20px/400/30px `#333333`; input filled and bordered `rgba(0,0,0,0.05)` at 0px radius, 16px padding, `#666666` placeholder; full-width `#000000` pill at 40px radius; consent copy 14px/400/18.2px `#666666`; close control a 50%-radius `#E5E5E5` disc.
4. **Catalogue filter bar**: A full-width bar filled `#FFFFFF`, padding 24px vertical and 63.936px horizontal, 0px radius, no border. Left: an outlined pill at 40px radius, 1px `#000000` border, padding 0 16px. Right: a result count in a mono face at 16px/400/16px `#000000`.
5. **Home hero over photography**: A full-bleed photographic band with no scrim. Headline 52.992px/700/58.2912px, −0.52992px tracking, `#FFFFFF`; subheadline 32.96px/400/42.848px `#FFFFFF`; then two `#FFFFFF`-filled pills with `#000000` labels at 16px/700/20px, padding 0 24px, radius 40px, 1px `#FFFFFF` border, spaced 24px apart.

## Similar Brands
- **Arc'teryx** — the same conviction that a technical product on a near-white plate needs no decoration around it.
- **Aesop** — a colour discipline of one warm accent used for labelling, with typography and spacing carrying everything else.
- **COS** — full-bleed photography, unadorned white canvas, headline type large enough that scale alone builds hierarchy.
- **Rapha** — editorial sport: photography as narrative, with a hard split between story pages and product grids.
- **Muji** — neutral ground, near-zero ornament, the object on the plate the only thing allowed to have colour.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-plate-mid: #F6F7F8;
  --color-plate-deep: #ECEEF0;
  --color-placeholder: #F0ECEB;
  --color-label-ochre: #995C00;
  --color-ink-soft: #333333;
  --color-ink-tab: #4D4D4D;
  --color-ink-fine: #666666;
  --color-hairline: #CCCCCC;
  --color-control-tint: #E5E5E5;
  --color-block-ink: #151522;
  --color-billboard-grey: #999999;
  --color-veil-5: rgba(0, 0, 0, 0.05);
  --color-veil-10: rgba(0, 0, 0, 0.1);
  --color-link-default: #0000EE;
  --gradient-product-plate: linear-gradient(#FFFFFF, #F6F7F8, #ECEEF0);

  /* Typography — Families */
  --font-on: 'On', ui-sans-serif, system-ui, sans-serif;
  --font-on-mono: 'On Mono', ui-monospace, SFMono-Regular, monospace;
  --font-on-diatype: 'On Diatype Standard', ui-sans-serif, system-ui, sans-serif;
  --font-on-semi-mono: 'On Semi Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — Scale */
  --text-display: 67.904px;        --leading-display: 74.6944px;
  --text-headline: 52.992px;       --leading-headline: 58.2912px;
  --text-headline-link: 52.992px;  --leading-headline-link: 63.5904px;
  --text-title: 42px;              --leading-title: 50.4px;
  --text-section: 32.96px;         --leading-section: 39.552px;
  --text-modal: 32.96px;           --leading-modal: 39.552px;
  --text-lede: 32.96px;            --leading-lede: 42.848px;
  --text-card: 26px;               --leading-card: 31.2px;
  --text-pull: 26px;               --leading-pull: 39px;
  --text-nav: 20px;                --leading-nav: 30px;
  --text-subtitle: 20px;           --leading-subtitle: 30px;
  --text-control: 16px;            --leading-control: 20px;
  --text-body: 16px;               --leading-body: 24px;
  --text-field: 16px;              --leading-field: 22px;
  --text-product: 15.936px;        --leading-product: 23.904px;
  --text-price: 14px;              --leading-price: 21px;
  --text-fine: 14px;               --leading-fine: 18.2px;
  --text-cta: 14px;                --leading-cta: 14px;
  --text-label: 12px;              --leading-label: 18px;
  --text-badge: 8px;               --leading-badge: 8px;
  --tracking-display: -1.35808px;
  --tracking-headline: -0.52992px;
  --tracking-title: -0.42px;
  --tracking-modal: -0.3296px;
  --tracking-body: 0.2px;
  --tracking-chip: 0.16px;
  --tracking-cta: 0.84px;
  --tracking-label: 1.44px;

  /* Spacing */
  --spacing-hair: 4px;
  --spacing-tight: 8px;
  --spacing-snug: 12px;
  --spacing-base: 16px;
  --spacing-comfortable: 24px;
  --spacing-wide: 32px;
  --spacing-column: 40px;
  --spacing-gutter: 63.936px;
  --spacing-section: 64px;
  --spacing-block: 96px;
  --spacing-page-top: 128px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-badge: 2px;
  --radius-label: 3px;
  --radius-card: 4px;
  --radius-dialog: 12px;
  --radius-pill: 40px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
  --shadow-dialog: rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-plate-mid: #F6F7F8;
  --color-plate-deep: #ECEEF0;
  --color-placeholder: #F0ECEB;
  --color-label-ochre: #995C00;
  --color-ink-soft: #333333;
  --color-ink-tab: #4D4D4D;
  --color-ink-fine: #666666;
  --color-hairline: #CCCCCC;
  --color-control-tint: #E5E5E5;
  --color-block-ink: #151522;
  --color-billboard-grey: #999999;
  --color-veil-5: rgba(0, 0, 0, 0.05);
  --color-veil-10: rgba(0, 0, 0, 0.1);
  --color-link-default: #0000EE;

  --font-on: 'On', ui-sans-serif, system-ui, sans-serif;
  --font-on-mono: 'On Mono', ui-monospace, SFMono-Regular, monospace;
  --font-on-diatype: 'On Diatype Standard', ui-sans-serif, system-ui, sans-serif;
  --font-on-semi-mono: 'On Semi Mono', ui-monospace, SFMono-Regular, monospace;

  --text-display: 67.904px;        --text-display--line-height: 74.6944px;
  --text-headline: 52.992px;       --text-headline--line-height: 58.2912px;
  --text-headline-link: 52.992px;  --text-headline-link--line-height: 63.5904px;
  --text-title: 42px;              --text-title--line-height: 50.4px;
  --text-section: 32.96px;         --text-section--line-height: 39.552px;
  --text-modal: 32.96px;           --text-modal--line-height: 39.552px;
  --text-lede: 32.96px;            --text-lede--line-height: 42.848px;
  --text-card: 26px;               --text-card--line-height: 31.2px;
  --text-pull: 26px;               --text-pull--line-height: 39px;
  --text-nav: 20px;                --text-nav--line-height: 30px;
  --text-subtitle: 20px;           --text-subtitle--line-height: 30px;
  --text-control: 16px;            --text-control--line-height: 20px;
  --text-body: 16px;               --text-body--line-height: 24px;
  --text-field: 16px;              --text-field--line-height: 22px;
  --text-product: 15.936px;        --text-product--line-height: 23.904px;
  --text-price: 14px;              --text-price--line-height: 21px;
  --text-fine: 14px;               --text-fine--line-height: 18.2px;
  --text-cta: 14px;                --text-cta--line-height: 14px;
  --text-label: 12px;              --text-label--line-height: 18px;
  --text-badge: 8px;               --text-badge--line-height: 8px;

  --tracking-display: -1.35808px;
  --tracking-headline: -0.52992px;
  --tracking-title: -0.42px;
  --tracking-modal: -0.3296px;
  --tracking-body: 0.2px;
  --tracking-chip: 0.16px;
  --tracking-cta: 0.84px;
  --tracking-label: 1.44px;

  --spacing-hair: 4px;
  --spacing-tight: 8px;
  --spacing-snug: 12px;
  --spacing-base: 16px;
  --spacing-comfortable: 24px;
  --spacing-wide: 32px;
  --spacing-column: 40px;
  --spacing-gutter: 63.936px;
  --spacing-section: 64px;
  --spacing-block: 96px;
  --spacing-page-top: 128px;

  --radius-none: 0px;
  --radius-badge: 2px;
  --radius-label: 3px;
  --radius-card: 4px;
  --radius-dialog: 12px;
  --radius-pill: 40px;
  --radius-circle: 50%;

  --shadow-card: rgba(0, 0, 0, 0.05) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
  --shadow-dialog: rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;
}
```