<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: On
tagline: Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs.
updated_at: 2026-05-28T23:13:24.739Z
published_at: 2026-05-28T23:13:24.739Z
author: webdesignhot
source_url: https://www.on.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [retail]
tags: [light, structured, sans, commerce, athletic, monochrome, pill, swiss, photographic, e-commerce]
preview_swatch: ['#ffffff', '#000000', '#e63312']
related: [nike, adidas, allbirds, lululemon]
description: 'On''s commerce system is Swiss-performance minimalism made literal — true-black ink (`#000000`) on a paper-white canvas (`#ffffff`), set entirely in the brand''s custom geometric `On` sans with bold 700 headlines that sit white-on-photography across full-bleed running imagery. The signature gesture is the CTA: a crisp white pill (`#ffffff` fill, `#000000` text) at a generous 40px radius — fuller and rounder than the typical 24–30px e-commerce button — that reads like the rounded heel of the CloudTec sole made into geometry. The system reserves all chromatic energy for the product photograph and a single signature coral (`#e63312`) that appears only on sale flags and the rare campaign accent; everything else is black, white, and a whisper of cool gray. The result is athletic-premium and engineering-precise: a Zurich design office that learned to sell shoes — high-contrast type, edge-to-edge image, pill geometry, and almost nothing between them.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-coral
  muted: text-muted

colors:
  bg: '#ffffff'                    # canvas — primary page floor, paper white
  bg-dark: '#000000'               # ink-grounded campaign / footer / membership band
  surface: '#ffffff'               # default card / sheet surface
  surface-soft: '#f5f5f5'          # soft gray — product image stage, secondary fill, utility strip
  surface-warm: '#fafafa'          # subtle alt-row / panel tint
  ink: '#000000'                   # primary text + brand black on every pill CTA
  ink-soft: '#0a0a0a'              # near-black for dense panels where true black is too heavy
  charcoal: '#333333'              # softer body where ink is too strong
  mute: '#525252'                  # product subtitle, footer link, secondary metadata (AAA on white)
  mute-soft: '#767676'             # lowest-emphasis utility text (AA on white)
  stone: '#9a9a9a'                 # inverse secondary on dark surfaces, placeholder
  hairline: '#d4d4d4'              # 1px divider — filter rows, footer columns, PDP disclosure
  hairline-soft: '#e5e5e5'         # inset 1px under sticky bars — the system's lightest depth cue
  text: '#000000'                  # body
  text-strong: '#000000'           # display — same as body; weight carries hierarchy
  text-muted: '#525252'
  text-soft: '#767676'
  text-on-ink: '#ffffff'           # inverse text on black CTAs and dark sections
  brand: '#000000'                 # On's brand "color" — true black, the ink on every white pill
  brand-hover: '#1a1a1a'           # ink CTAs lift slightly toward charcoal on hover
  brand-active: '#000000'          # press = scale(0.98), bg unchanged
  on-brand: '#ffffff'
  pill-light: '#ffffff'            # the signature white pill — fill on photography
  pill-light-text: '#000000'       # ink label inside the white pill
  link: '#000000'                  # default link is ink + underline only
  link-hover: '#525252'            # link hover softens to mute
  visited: '#000000'               # no visited distinction — links treated uniformly
  selected: '#000000'              # selected filter = inverted ink chip
  disabled-bg: '#e5e5e5'
  disabled-text: '#9a9a9a'
  accent-coral: '#e63312'          # On's signature coral/red — sale flag, rare campaign accent
  accent-coral-deep: '#b3260d'     # pressed / hover coral, dark-surface anchor
  sale: '#e63312'                  # discounted price + "% off" copy
  success: '#1f8a4c'               # in-stock, eligibility tick
  success-bright: '#34c873'        # inverse success on dark surfaces
  warning: '#a35316'
  danger: '#d11507'                # validation error, destructive confirm
  info: '#1151ff'                  # rare informational badge accent
  scrim: 'rgba(0,0,0,0.55)'        # modal backdrop
  ring: '#000000'                  # focus ring on light surfaces
  ring-on-dark: '#ffffff'          # focus ring on ink / photographic surfaces

typography:
  display:
    family: 'On, "Helvetica Now Display", "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif'
    weights: [500, 600, 700]
  body:
    family: 'On, "Helvetica Now Text", "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80,    weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56,    weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 48,    weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32,    weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24,    weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20,    weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18,    weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,    weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-strong:     { size: 16,    weight: 500, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14,    weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    button:          { size: 16,    weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    button-sm:       { size: 14,    weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    label:           { size: 13,    weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12,    weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    price:           { size: 16,    weight: 500, lineHeight: 1.4,  tracking: '0',        family: body, opentype: ['tnum'] }
    overline:        { size: 11,    weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body, transform: uppercase }

radius:
  none: 0
  micro: 2
  sm: 4                            # input / small control corner
  md: 8                            # card-internal control, secondary button
  lg: 12                           # product card, panel
  xl: 16                           # large media panel
  cta: 40                          # the signature full-pill CTA radius
  pill: 9999                       # swatch dots, circular icon buttons, chips

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  utility-bar-height: 36
  filter-rail-width: 240
  section-gap: 64

components:
  button-primary:
    bg: '#000000'
    color: '#ffffff'
    radius: 40
    padding: '16px 32px'
    height: 48
    font: button
    use: 'Ink full-pill on light surfaces — Add to Cart, Sign Up, Continue, Subscribe.'
  button-on-image:
    bg: '#ffffff'
    color: '#000000'
    radius: 40
    padding: '14px 28px'
    height: 48
    font: button
    use: 'The signature white full-pill anchored over hero / category photography — "Shop men''s", "Shop women''s".'
  button-secondary:
    bg: '#f5f5f5'
    color: '#000000'
    radius: 40
    padding: '16px 32px'
    height: 48
    use: 'Soft-gray lower-emphasis pill, paired beside the ink primary on light surfaces.'
  button-ghost:
    bg: 'transparent'
    color: '#000000'
    border: '1.5px solid #000000'
    radius: 40
    padding: '14px 30px'
    use: 'Outlined ink pill — tertiary actions, "Learn more", filters apply.'
  button-icon-circular:
    bg: '#f5f5f5'
    color: '#000000'
    radius: 9999
    width: 44
    height: 44
    use: 'Carousel paddle, wishlist heart, share, back arrow, cart toggle.'
  product-card:
    bg: '#ffffff'
    color: '#000000'
    radius: 12
    padding: '0 0 16px 0'
    use: 'Listing tile — product photo on soft gray, swatch row + name + price stacked below.'
  product-card-image:
    bg: '#f5f5f5'
    radius: 12
    aspect: '1:1'
    use: 'Square product photograph backdrop — the soft-gray studio stage.'
  card:
    bg: '#ffffff'
    color: '#000000'
    border: '1px solid #d4d4d4'
    radius: 12
    padding: 24
    use: 'Content / spec card — hairline outline, no shadow, generous internal padding.'
  campaign-tile:
    bg: '#000000'
    color: '#ffffff'
    radius: 0
    use: 'Full-bleed editorial — On sans 48–80px / 700 burned white into running photography, white pill bottom-left.'
  input:
    bg: '#ffffff'
    color: '#000000'
    border: '1.5px solid #d4d4d4'
    radius: 8
    padding: '12px 16px'
    height: 48
    use: 'Text field — hairline border, ink focus, no fill.'
  input-focused:
    bg: '#ffffff'
    border: '1.5px solid #000000'
    ring: '0 0 0 3px rgba(0,0,0,0.08)'
    radius: 8
    use: 'Focus = ink border + soft 3px ink halo, never a hard system outline.'
  filter-chip:
    bg: '#ffffff'
    color: '#000000'
    border: '1px solid #d4d4d4'
    radius: 9999
    padding: '8px 16px'
    height: 40
    use: 'PLP filter pill — outlined default, flips to inverted ink when active.'
  filter-chip-active:
    bg: '#000000'
    color: '#ffffff'
    radius: 9999
    use: 'Selected filter — fully inverted ink, no middle state.'
  badge-promo:
    bg: '#000000'
    color: '#ffffff'
    radius: 9999
    padding: '4px 12px'
    font: caption
    use: '"New", "Re-engineered", "Limited" — ink pill on card image top-left.'
  badge-sale:
    bg: '#e63312'
    color: '#ffffff'
    radius: 9999
    padding: '4px 12px'
    font: caption
    use: 'The one place coral appears as a surface — sale / outlet flag.'
  swatch-dot:
    radius: 9999
    size: 16
    use: 'Colorway dot — 1px subtle ring on light colorways, no border on dark.'
  swatch-dot-active:
    radius: 9999
    ring: '2px outer #000000 + 2px white interior gap'
    use: 'Concentric-ring selected state — no size change.'
  utility-bar:
    bg: '#000000'
    color: '#ffffff'
    height: 36
    radius: 0
    font: caption
    use: 'Top announcement / utility strip — free shipping + returns messaging, centered.'
  primary-nav:
    bg: '#ffffff'
    color: '#000000'
    height: 64
    radius: 0
    font: body-strong
    use: 'On wordmark left, centered nav (Men · Women · Running · Tennis · Hike), search + account + cart right.'
  footer:
    bg: '#000000'
    color: '#9a9a9a'
    radius: 0
    use: 'Ink footer — multi-column link list, white headers, gray links, coral never used here.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  cta-press: 'transform: scale(0.98) over 120ms — subtle mechanical depress, bg unchanged'
  card-hover: 'image swaps to alt-angle / scale(1.02) over 240ms inside its 12px frame; no lift, no shadow'
  reduced-motion: 'respects prefers-reduced-motion: reduce — scale and image-swap degrade to instant; hover becomes color-only.'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'none — On retail chrome is fully flat'
  hairline: '1px solid #d4d4d4'                  # divider language
  hairline-inset: 'inset 0 -1px 0 #e5e5e5'       # sticky bar underline
  focus-halo: '0 0 0 3px rgba(0,0,0,0.08)'       # soft input focus halo
  modal: 'rgba(0,0,0,0.18) 0 12px 32px'
  scrim: 'rgba(0,0,0,0.55)'
  ring: '0 0 0 2px #000000'

accessibility:
  contrast-text-on-bg: 21.0                        # #000000 on #ffffff — AAA
  contrast-text-on-brand: 21.0                     # #ffffff on #000000 — AAA
  contrast-mute-on-bg: 7.81                        # #525252 on #ffffff — AAA
  contrast-mute-soft-on-bg: 4.54                   # #767676 on #ffffff — AA
  contrast-coral-on-bg: 4.33                       # #e63312 on #ffffff — AA (large/bold only)
  contrast-coral-white: 4.33                       # #ffffff on #e63312 — AA (large/bold only)
  focus-ring: '2px solid #000000 with 2px offset on light; 2px solid #ffffff on dark / photographic surfaces'
  reduced-motion-honored: true
  touch-target-min: 44
  keyboard-nav: 'Tab: utility bar → wordmark → primary nav → search → account → cart → main grid → filters → footer.'

dark-mode: null   # Light-only storefront. Campaign hero bands, the utility strip, and the footer flip to ink (#000000) as content moments, but the page proper is white. No system-driven dark variant.
---

## 1. Visual Theme & Atmosphere

On's commerce system is **Swiss performance engineering rendered as interface.** The page floor is paper-white (`#ffffff`), the ink is true black (`#000000` — not a softened off-black), and the entire surface is set in the brand's custom geometric `On` sans. There is no decorative gradient, no soft drop-shadow nostalgia, no brand color used for "tone." The system saves all chromatic energy for two things: the running photograph that fills the hero, and a single signature coral (`#e63312`) that surfaces only on a sale flag or a rare campaign accent. Everything else is the precise black-on-white discipline of a Zurich design office that happens to sell shoes.

The signature gesture is the CTA. Where most e-commerce buttons sit at 24–30px radius, On runs its pills at a generous **40px radius** — fuller, rounder, almost capsule. On the hero, that pill is white (`#ffffff` fill, `#000000` text) anchored over full-bleed running imagery: "Shop men's", "Shop women's". The roundness is not arbitrary — it echoes the rounded heel geometry of the CloudTec sole, the brand's most recognizable physical signature, translated into UI. Once you see it, the whole system reads as soft-cornered precision: square photography, sharp type, and these one over-rounded pills doing all the inviting.

The atmosphere is athletic-premium-deadpan. A runner mid-stride on an alpine road, the headline set 48px in bold `On` sans burned white into the lower third, a single white pill beneath it. Below the fold the page resumes white: a row of square 1:1 product tiles on soft gray (`#f5f5f5`), product names in calm 16px sans, prices in tabular figures, a coral sale flag here and there. No scrolljack, no parallax theatre, no gradient overlay diluting the photograph. The kinetic energy lives entirely in the image and the running it depicts; the chrome stays mathematical.

Where Nike builds its editorial moment on towering 96px Futura and Apple builds confidence on neutral-gray product staging, On lands between them — quieter than Nike's billboard scale, warmer-rounded than Apple's hard geometry. The brand's whole proposition is *engineered Swiss precision you can feel underfoot*, and the interface makes that literal: high-contrast monochrome type for the precision, the 40px pill for the feel. It reads like a technical spec sheet that learned how to be beautiful.

**Key Characteristics:**
- True-black ink (`#000000`) on paper-white (`#ffffff`) — the highest-contrast monochrome pair in the catalog, no softened off-black
- Custom `On` geometric sans across the entire system — display, headings, body, buttons, captions all share one family
- Bold **700** headlines at 48px, set white over full-bleed running photography for the brand's editorial moment
- The signature 40px full-pill CTA — fuller than the e-commerce norm, echoing the CloudTec heel; white-on-image is the hero variant
- Soft-gray (`#f5f5f5`) studio stage behind every product photograph — the only non-white surface in normal chrome
- Signature coral (`#e63312`) reserved almost entirely for sale flags and rare campaign accents — never structural chrome
- Flat by default: no card drop-shadows; depth comes from photography and 1px hairlines, never from CSS elevation
- Tight negative tracking on display type (`-0.018em` to `-0.03em`) for a dense, engineered headline texture
- Inverted ink bands (utility strip, footer, campaign tiles) punctuate the white page — content moments, not a theme

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#ffffff`) [→ `bg`]: paper-white default page floor; the studio backdrop behind every grid and editorial spread.
- **Ink** (`#000000`) [→ `text` / `ink`]: true black — the only color the system fully commits to. Body text, headlines, primary pill fill, active filter chip, swatch ring, footer band.
- **Soft Gray** (`#f5f5f5`) [→ `surface-soft`]: the most-used non-white surface; product image stages, secondary pills, alt panels. The "color" of every product photo's stage.

### Brand & Dark
- **Brand Black** (`#000000`) [→ `brand`]: On's brand "color," identical to body ink. There is no separate brand hue — the wordmark, the ink pill, and the type are one black.
- **Ink Soft** (`#0a0a0a`) [→ `ink-soft`]: near-black for dense dark panels where true black feels too heavy against bright photography.
- **Hairline** (`#d4d4d4`) [→ `hairline`]: 1px dividers between filter rows, footer columns, PDP disclosure rows, card outlines.
- **Hairline Soft** (`#e5e5e5`) [→ `hairline-soft`]: inset 1px under sticky bars — the lightest depth cue the system uses.

### Accent
- **Signature Coral** (`#e63312`) [→ `accent-coral` / `sale`]: On's one chromatic flourish — sale flags, discounted price copy, the occasional campaign accent. Never structural chrome.
- **Coral Deep** (`#b3260d`) [→ `accent-coral-deep`]: pressed/hover coral and dark-surface anchor where the bright coral would blow out.

### Interactive
- **Link** (`#000000`) [→ `link`]: default link = ink + underline only; On has no separate link hue.
- **Link Hover** (`#525252`) [→ `link-hover`]: softens to mute on hover, never to a brand color.
- **Selected** (`#000000`) [→ `selected`]: selected filter chip = inverted ink fill, white text.
- **Disabled BG** (`#e5e5e5`) [→ `disabled-bg`] / **Disabled Text** (`#9a9a9a`) [→ `disabled-text`].

### Neutral Scale
- **Ink** (`#000000`) — primary text, headlines, product names, prices, nav.
- **Charcoal** (`#333333`) [→ `charcoal`]: slightly softer body where true ink is too strong.
- **Mute** (`#525252`) [→ `mute` / `text-muted`]: product subtitles, footer-on-white links, secondary metadata (AAA on white).
- **Mute Soft** (`#767676`) [→ `mute-soft` / `text-soft`]: lowest-emphasis utility text, captions (AA on white).
- **Stone** (`#9a9a9a`) [→ `stone`]: inverse secondary on dark surfaces, placeholders, disabled text.

### Surface & Borders
- **Canvas** (`#ffffff`) [→ `surface`]: default page floor and card surface.
- **Soft Gray** (`#f5f5f5`) [→ `surface-soft`]: product image stage, secondary pill, utility-panel fill.
- **Surface Warm** (`#fafafa`) [→ `surface-warm`]: very subtle alt-row / panel tint.
- **Hairline** (`#d4d4d4`) — 1px solid divider and card outline.
- **Hairline Soft** (`#e5e5e5`) — inset bottom-line under sticky bars.

### Shadow Colors
- **None observed** for retail chrome — On does not use drop shadows on cards, buttons, or sections.
- **Hairline Inset** `inset 0 -1px 0 #e5e5e5` — the sticky-bar underline, the only shadow-adjacent cue.
- **Focus Halo** `0 0 0 3px rgba(0,0,0,0.08)` — soft ink halo on input focus (not an elevation shadow).
- **Modal** `rgba(0,0,0,0.18) 0 12px 32px` — the one true shadow, reserved for cart / dialog overlays.

### Semantic
- **Success** (`#1f8a4c`) [→ `success`]: confirmation, in-stock, eligibility ticks.
- **Success Bright** (`#34c873`) [→ `success-bright`]: inverse success on dark surfaces.
- **Sale / Coral** (`#e63312`) [→ `sale`]: discounted price and "% off" copy.
- **Danger** (`#d11507`) [→ `danger`]: validation error, destructive confirm.
- **Warning** (`#a35316`) [→ `warning`]: low-stock / caution copy.
- **Info** (`#1151ff`) [→ `info`]: rare informational badge accent.

## 3. Typography Rules

### Font Family

- **Display & Headings**: `On` — the brand's proprietary geometric sans, used for everything from the 80px hero down to 20px subheads. Tight negative tracking and bold 700 weight give it an engineered, almost industrial texture at scale. Falls back to Helvetica Now Display → Helvetica Neue → system-ui.
- **Body / UI**: `On` again — there is no separate body family; weight (400/500/600) and size carry the distinction. Falls back to Helvetica Now Text → Helvetica Neue → system-ui.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo` — rare, for SKU codes, size charts, and order numbers.
- **Open-source substitutes**: For the `On` display tier, **Inter** at 700 with `-0.02em` tracking, or **Space Grotesk** for a touch more geometric character, both read close at headline sizes. For UI/body, **Inter** 400/500/600 is a near drop-in. Keep the tight negative tracking — it is the single most important property to preserve when substituting.

OpenType features: `tnum` (tabular figures) on prices and size charts so columns align across product cards and PDP stacks.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Tracking | OT | Notes |
|------|------|------|--------|-------------|----------|----|-------|
| display-hero | On | 80 | 700 | 1.0 | -0.03em | — | Largest campaign / landing headline, white over photography |
| display-lg | On | 56 | 700 | 1.05 | -0.02em | — | Secondary campaign headline, section opener |
| h1 | On | 48 | 700 | 1.1 | -0.018em | — | Page / hero headline (live-probed at 48px / 700, white on image) |
| h2 | On | 32 | 600 | 1.2 | -0.012em | — | Section header, collection title, PDP product name |
| h3 | On | 24 | 600 | 1.25 | -0.005em | — | Subsection, card group header, PDP price |
| h4 | On | 20 | 600 | 1.3 | 0 | — | Card title, FAQ label, filter group header |
| body-lg | On | 18 | 400 | 1.55 | 0 | — | Lead paragraph, hero supporting copy, PDP description |
| body | On | 16 | 400 | 1.55 | 0 | — | Default body, search placeholder, product description (live body: 16/400) |
| body-strong | On | 16 | 500 | 1.55 | 0 | — | Product card name, nav link, filter row label |
| body-sm | On | 14 | 400 | 1.5 | 0 | — | Secondary descriptions, helper text |
| button | On | 16 | 600 | 1.2 | 0 | — | Standard pill CTA label |
| button-sm | On | 14 | 600 | 1.2 | 0 | — | Compact pill CTA, chip-as-button |
| label | On | 13 | 500 | 1.4 | 0 | — | Form field label, swatch label |
| caption | On | 12 | 500 | 1.4 | 0.02em | — | Badge text, filter count, footer fine print |
| price | On | 16 | 500 | 1.4 | 0 | tnum | Product price — tabular numerals for column alignment |
| overline | On | 11 | 600 | 1.4 | 0.08em | uppercase | Eyebrow / category overline above headlines |

### Principles

The system runs on **one family, wide weight range, and tight display tracking.** Because every tier is `On` sans, hierarchy is built almost entirely from size, weight, and negative letter-spacing rather than from contrasting typefaces.

- **Tight negative tracking on display.** Display tiers run `-0.018em` to `-0.03em` — this dense optical fit is the headline's signature engineered texture. Body stays at `0`.
- **Weight does the work.** 700 carries display and h1; 600 carries h2–h4 and buttons; 500 marks product names and labels; 400 handles body. There are no 800s.
- **Bold 700 headlines, white on photography.** The live h1 is 48px / 700 set white over imagery — the canonical hero treatment.
- **No serif, no script, no second family.** The discipline is total: `On` sans throughout, the brand's voice made typographic.
- **Tabular numerals on prices.** `tnum` keeps the price column mathematically aligned across product cards — Swiss precision applied to figures.
- **Generous body line-height.** Body runs at `1.55` for calm, readable spec-sheet legibility — a contrast to the dense, tight headlines.

## 4. Component Stylings

### Buttons

**`button-primary`** — the ink full-pill
- Background `#000000`, text `#ffffff`, type button (16/600), padding `16px 32px`, height 48px, **radius 40px**. The default primary action on light surfaces: "Add to Cart", "Sign Up", "Continue", "Subscribe".
- **Press state**: `transform: scale(0.98)` over 120ms — a subtle mechanical depress, bg unchanged. Hover lifts toward charcoal (`#1a1a1a`).

**`button-on-image`** — the signature white pill (live-probed)
- Background `#ffffff`, text `#000000`, type button, padding `14px 28px`, radius 40px. The hero gesture: a crisp white capsule anchored over full-bleed running photography — "Shop men's", "Shop women's". This is the brand's most recognizable UI element.

**`button-secondary`** — soft-gray alternate
- Background `#f5f5f5`, text `#000000`, radius 40px, padding `16px 32px`. Lower-emphasis pill paired beside the ink primary on light surfaces.

**`button-ghost`** — outlined ink pill
- Background transparent, text `#000000`, `1.5px solid #000000` border, radius 40px, padding `14px 30px`. Tertiary actions: "Learn more", "Apply filters", "View all".

**`button-icon-circular`** — chrome icon control
- Background `#f5f5f5` or transparent, icon `#000000`, radius 9999, 44×44px. Carousel paddle, wishlist heart, share, back arrow, cart toggle.

### Cards & Containers

**`product-card`** — the brand's signature catalog unit
- Container: bg `#ffffff`, radius 12px, no shadow.
- Image area: square product photo on `#f5f5f5` (1:1), radius 12px to match the container.
- Below image (16px stack): swatch dot row (16px circles), promo/sale badge if applicable, product name body-strong ink, category subtitle caption mute, price row.
- Price row: regular price price-token ink. If on sale: discounted price `#e63312`, then strike-through original `#767676`, then "% off" in `#e63312`.

**`card`** — content / spec card
- bg `#ffffff`, `1px solid #d4d4d4` hairline outline, radius 12px, padding 24px, no shadow. Used for membership panels, spec blocks, FAQ groups.

**`campaign-tile`** — the brand's editorial unit
- Full-bleed running photography with the `On` headline burned in (48–80px, 700, white). A single `button-on-image` white pill anchored bottom-left carries the CTA. Headline color is white per the live probe; ink is used only where photography is bright enough to require it.

### Badges, Tags, Pills

**`badge-promo`** — bg `#000000`, text `#ffffff`, caption type, radius 9999, padding `4px 12px`. Sits on card image top-left: "New", "Re-engineered", "Limited".

**`badge-sale`** — bg `#e63312`, text `#ffffff`, caption type, radius 9999, padding `4px 12px`. The one place the signature coral becomes a surface — the sale / outlet flag.

**`filter-chip` + `filter-chip-active`**
- Default: bg `#ffffff`, text `#000000`, `1px solid #d4d4d4`, radius 9999, padding `8px 16px`, height 40px. Active: bg `#000000`, text `#ffffff` — fully inverted, no middle state.

**`swatch-dot` + `swatch-dot-active`**
- 16px circle, radius 9999, no border by default; filled with the colorway's actual product color (extracted at runtime), 1px subtle ring on white/light colorways so they stay visible.
- Active: identical fill with a 2px `#000000` outer ring and 2px white interior gap — the concentric-ring "selected" state. No size change.

### Inputs & Forms

**`input` + `input-focused`**
- Default: bg `#ffffff`, text `#000000`, `1.5px solid #d4d4d4` border, radius 8px, padding `12px 16px`, height 48px. No fill.
- Focused: border flips to `1.5px solid #000000` with a soft `0 0 0 3px rgba(0,0,0,0.08)` ink halo — never a hard system outline. Placeholder uses stone (`#9a9a9a`).

### Navigation

**`utility-bar`** — top announcement strip, bg `#000000`, text `#ffffff`, caption type, height 36px. Centered free-shipping / free-returns messaging. The first ink band of the page.

**`primary-nav`** — main nav, bg `#ffffff`, text `#000000`, body-strong type, height 64px. Layout: `On` wordmark left, centered nav row ("Men · Women · Running · Tennis · Hike · Train"), right cluster (search, account, cart). Active section gets a 2px-bottom ink underline — no background fill.

**Mobile nav** — hamburger left, wordmark center, search + cart right. Nav collapses into a full-height drawer that slides in from the left; the search field expands into a full-width overlay pill.

**`footer`** — bg `#000000`, multi-column link list with white column headers and gray (`#9a9a9a`) links, then a fine-print row in caption. Coral never appears in the footer; it stays an ink-and-gray band.

## 5. Layout Principles

### Spacing System

- **Base unit**: 4px (a finer grid than Nike's 8px — On uses 4px for tighter control over dense spec layouts).
- **Tokens**: 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- **Universal rhythm**: 64px vertical gap between major content blocks (hero → trending → category rail → editorial → footer). Product grids use 16px gutters. PDP disclosure rows stack at 24px vertical padding.
- **Card internal padding**: product cards have no padding around the image (full-bleed inside the 12px frame); metadata rows sit below with 8px gaps.

### Grid & Container

- **Max width**: ~1280px content area with edge gutters that grow toward ~80px on very wide (1536px+) viewports — the system lets ultrawide breathe rather than stretch.
- **Column patterns**: PLP listing uses 4-up at desktop → 3-up at 1024px → 2-up at 640px → 1-up below. The home page mixes a full-bleed hero, a 3- or 4-up "Trending" row, a horizontal-scroll category rail, and a 2-up editorial split.
- **Filter sidebar**: ~240px fixed-width left rail on PLP at desktop, collapsing into a "Filters" toggle and off-canvas drawer at narrow widths.

### Whitespace Philosophy

Whitespace separates; it does not pad for breath. Sections butt against each other at 64px rhythm, and product photos fill their soft-gray frame edge-to-edge. The air comes from the gray studio backdrop of the photograph, not from layout margin. Headlines sit immediately under their overline or section divider — no decorative space above. The page reads dense-but-precise, like a well-set technical document.

### Section Cadence

Editorial-hero (ink + photography) → product-grid-band (white) → category rail (white) → editorial-split → footer (ink). White dominates the body; the inversions to ink — utility strip, campaign tiles, footer — punctuate it as content moments. The brief ink bands do the rhythmic work that an accent color does for other brands.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| None | 0px | Utility strip, campaign tiles, footer, full-bleed photography |
| Micro | 2px | Inset hairline corners, dense table corners |
| SM | 4px | Inputs, small controls |
| MD | 8px | Card-internal controls, secondary inputs |
| LG | 12px | Product cards, content cards, media panels |
| XL | 16px | Large media / feature panels |
| CTA | 40px | The signature full-pill — every primary, on-image, secondary, and ghost button |
| Pill | 9999px | Swatch dots, circular icon buttons, filter chips, badges |

The system has two radius personalities: **soft-rectangular containers** (8–16px on cards and inputs) and **capsule controls** (40px on CTAs, 9999 on chips and dots). The 40px CTA radius is the deliberate signature — fuller than the 24–30px e-commerce norm — and should never be dialed down to a generic 8px button.

### Photography Geometry

- **Product cards**: consistent 1:1 square inside a 12px-radius frame, full-bleed within the frame on a `#f5f5f5` backdrop.
- **Editorial hero**: ~16:9 or wider cinematic crop, full-bleed across the content width, with the `On` headline burned into the lower-left or center-left third in white.
- **Category rail**: 4:5 portrait full-bleed thumbnails with a white pill or text label anchored bottom-left.
- **PDP main image**: square primary image with a thumbnail rail (~4–6 stacked) enabling rapid color/angle browsing without leaving the page.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, no border | Default for buttons, sections, product images — the dominant treatment |
| 1 — Hairline outline | `1px solid #d4d4d4` | Content cards, filter row separators, footer dividers, PDP disclosure rows |
| 2 — Inset bottom-line | `inset 0 -1px 0 #e5e5e5` | Sticky nav / sub-nav bottom edge, tab strip underline |
| 3 — Focus halo | `0 0 0 3px rgba(0,0,0,0.08)` | Input focus — soft ink halo, not an elevation cue |
| 4 — Modal | `rgba(0,0,0,0.18) 0 12px 32px` | Cart drawer, dialog overlays |
| 5 — Scrim | `rgba(0,0,0,0.55)` | Modal backdrop |

### Shadow Philosophy

On's retail chrome has **no drop-shadow elevation.** Cards do not lift; they are defined by a 12px corner and an optional 1px hairline outline. The only true shadow in the system is reserved for overlay surfaces (cart drawer, dialogs) where a floating layer genuinely needs separation. Otherwise depth comes from:

- **Editorial photography** — cinematic perspective and atmospheric running scenes carry all the spatial drama.
- **Product photography on flat `#f5f5f5`** — the gray removes background depth so the product itself is the only thing with form.
- **The 1px hairline language** — dividers and inset lines do the structural work that shadows do elsewhere.

The deliberate flatness is what makes the system read as engineered rather than decorative.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, color transitions.
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, drawer reveal, hero carousel.

### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Color transitions, focus halo fade-in, link hover |
| Standard | 240ms | Image swap on card hover, modal enter, drawer slide |
| Slow | 320ms | Hero carousel slide, page-section reveals |

### Per-Component Recipes

- **Primary CTA press**: `transform: scale(0.98)` over 120ms — a subtle mechanical depress; bg stays unchanged. Calmer than Nike's tap-collapse, in keeping with On's premium register.
- **Product card hover**: image swaps to an alternate-angle shot or scales to `1.02` inside its 12px frame over 240ms; no lift, no shadow.
- **Filter chip toggle**: bg flips from `#ffffff` to `#000000` with white text over 150ms — instant feel.
- **Input focus**: ink border + 3px soft halo fade in over 150ms.
- **Carousel paddle hover**: icon-circular bg lightens from `#f5f5f5` to `#ffffff` over 150ms.
- **Modal / cart drawer**: scrim fades in over 240ms; drawer translates from `translateX(100%)` to `0` over 320ms emphasized.

### Page Transitions

Page-to-page navigation fires hard navigation with no transition — On prioritizes perceived speed and the magazine cadence where the next page feels like the next spread.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. The CTA press collapses to an instant state change; card image-swap and scale suppress (color change only remains); modal/drawer slide degrades to opacity-only; carousel autoplay halts.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| #000000 ink on #ffffff canvas | 21.0 | AAA |
| #ffffff on #000000 ink (CTA / footer) | 21.0 | AAA |
| #525252 mute on #ffffff | 7.81 | AAA |
| #000000 ink on #f5f5f5 soft gray | 19.26 | AAA |
| #767676 mute-soft on #ffffff | 4.54 | AA |
| #e63312 coral on #ffffff | 4.33 | AA (large / bold text only) |
| #ffffff on #e63312 coral badge | 4.33 | AA (large / bold text only) |

The true-black brand pair sits at a perfect 21.0 — the maximum possible — across all chrome and the ink footer/CTAs. The signature coral holds AA at large/bold sizes only, which is why it is confined to badges, bold sale prices, and short campaign accents rather than body copy.

### Focus Indicators

Focus ring is **2px solid `#000000`** with 2px offset on light surfaces. On ink / photographic surfaces (campaign tiles, footer, utility strip), focus flips to **2px solid `#ffffff`**. Inputs additionally show the soft `0 0 0 3px rgba(0,0,0,0.08)` halo. All interactive surfaces gain the ring on `:focus-visible`.

### ARIA Patterns

- **Search**: `role="search"`, input `aria-label="Search products"`.
- **Filter chip**: `aria-pressed` communicates selection state.
- **Product card**: entire tile wrapped in `<a>` with verbose `aria-label` — "Cloudmonster 2, Men's Road Running Shoes, $169.99".
- **Swatch dot**: `aria-label="Black/White colorway, 1 of 5"` — names color and position.
- **Wishlist heart**: `aria-pressed` with "Add to wishlist" / "Remove from wishlist".
- **Disclosure row**: `aria-expanded` + `aria-controls` for PDP accordions.

### Keyboard Navigation

Tab order: utility bar → wordmark → primary nav (left to right) → search → account → cart → main grid (top to bottom, left to right) → filter rail (when expanded) → footer.

- **Inside filter chip group**: arrow keys navigate, Space toggles, Enter applies.
- **Inside PDP gallery**: arrow keys advance thumbnails; Esc closes lightbox.
- **Inside cart drawer**: focus traps within the drawer; Esc closes and returns focus to the cart toggle.

### Screen Reader Hints

Verbose `aria-label` on icon-only controls (heart, share, paddle, cart). Sale prices use `aria-label="Sale price $119, was $169.99, save 30%"` so the discount narrative is read aloud. The CTA `scale(0.98)` press is purely visual — no `aria-live` announcement required.

### Reduced Motion

All transitions degrade gracefully — CTA press to instant, card image-swap suppressed, modal/drawer to opacity-only, carousel autoplay halted.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| wide | 1536px+ | Content max-width holds at ~1280px; outer gutters grow to ~80px each side |
| desktop | 1280px | Default desktop — 4-up product grid, full centered nav, 240px filter rail |
| tablet | 1024px | 4-up PLP collapses to 3-up; filter rail starts compressing toward a toggle |
| mobile-landscape | 640–1023px | 3-up collapses to 2-up; nav center cluster collapses to a hamburger drawer; search becomes icon-only |
| mobile | <640px | Single-column; campaign tiles render full-width with headline at ~32–40px; filters move off-canvas |

### Touch Targets

All interactive elements meet WCAG AA/AAA (44×44px minimum). Pills sit at 48px height with 32px horizontal padding. Icon-circular buttons sit at 44px — already at the AAA threshold. Filter chips are 40px height with extended hit-target padding to reach 44px+.

### Collapsing Strategy

- **Primary nav**: desktop center cluster → mobile drawer triggered by a left hamburger.
- **PLP grid**: 4-up → 3-up → 2-up → 1-up at 1024, 640, and below; gutters drop from 16px to 8px on mobile.
- **Filter rail**: 240px fixed → "Filters" toggle → off-canvas full-screen drawer at mobile.
- **Category rail**: desktop horizontal scroll with ~4 visible → mobile horizontal scroll with ~1.5 visible (peek-next-card pattern).
- **Section spacing**: 64px desktop → 48px tablet → 32px mobile to keep editorial rhythm tight.
- **Hero headline**: desktop 48–80px → tablet ~48px → mobile ~32–40px; bold 700 and tight negative tracking hold across all sizes.

### Image Behavior

- Product imagery stays at the same 1:1 ratio across all breakpoints — the image scales, the ratio doesn't.
- Editorial hero tiles use art-direction crops: a 16:9 wide hero on desktop swaps to a 4:5 portrait on mobile so the runner stays centered and the headline keeps burn-in space.
- Non-critical product imagery is lazy-loaded as the user scrolls into the next grid row.

### Container Queries

Used in the PLP filter rail — when the rail narrows below ~200px, multi-column filter groups collapse to single column with chevron disclosure.

## 11. Content & Voice

### Tone

Precise, technical, quietly confident — the voice of a Swiss engineering team that lets the product specs speak. On's copy leads with performance language ("Re-engineered CloudTec®", "Helion™ superfoam", "zero-gravity feel underfoot") and stays understated rather than hyped. There is no exclamation theatre; the confidence is in the precision.

The brand consistently positions itself as **the running specialist that engineered something new** — every microcopy moment reads slightly more technical than warm, more spec-sheet than sales pitch.

### Microcopy Patterns

- **Button verbs**: "Shop men's", "Shop women's", "Add to Cart", "Subscribe", "Find your fit". Short, outcome-named, no honorifics.
- **Error recipe**: factual + remedial — "This size is sold out. Choose another size or get a restock alert."
- **Success confirmations**: "Added to cart" — instant, no ceremony.
- **Field labels**: short and direct — "Email", "Postal code", "Shoe size", "Country".
- **Stock urgency**: "Low stock" — two words, no pricing-pressure language.
- **Restock**: "Sold out — Notify me" — names state and action in one line.

### Empty States

- **Empty cart**: "Your cart is empty. Find your next run." — names the next destination.
- **Empty wishlist**: "Save your favorites here. Tap the heart on any product to start." — instructive.
- **Empty search results**: "Nothing found for [query]. Try different keywords or browse Men's, Women's, Running." — names cause + alternatives.

### CTA Verb Conventions

- **Primary**: "Add to Cart", "Subscribe", "Continue", "Find your fit", "Become a member".
- **On-image**: "Shop men's", "Shop women's", "Explore", "Discover".
- **Secondary / tertiary**: "Learn more", "View all", "Size guide", "Read the story".

The verb library is small and athletic-imperative. On avoids SaaS qualifier language ("Get started free", "Try it now") — the register stays specialist and direct.

## 12. Dark Mode & Theming

**Light-only across the storefront.** On's commerce surface ships in the light theme. The utility announcement strip, campaign hero bands, and the footer flip to ink (`#000000`) as editorial content moments, but the page proper resumes white below them — these are not a theme. There is no `prefers-color-scheme: dark` query and no `data-theme="dark"` token swap on the storefront.

The brand's running apps may respect system dark mode independently, but the e-commerce site does not offer a dark variant.

If implementing an On-flavored dark variant for a derived system, swap canvas to `#000000`, soft gray to `#141414`, ink/text to `#ffffff`, mute to `#9a9a9a`, hairline to `#333333` — and keep the 40px CTA pill and bold `On` headlines unchanged. The coral (`#e63312`) reads well on dark and can stay as-is for sale flags.

## 13. Lineage & Influences

On's visual lineage is rooted in the **Swiss International Typographic Style** — the Zurich/Basel tradition of grid discipline, grotesque sans, and ornament-free precision that runs from Müller-Brockmann through Helvetica. The brand was founded in Zurich, and the interface wears that origin plainly: a single geometric sans, absolute black-on-white contrast, mathematical grids, and zero decorative furniture. The 40px pill is the one humanizing softness in an otherwise rigorous system, and it is no accident that it echoes the rounded CloudTec sole — the product's engineering made into the interface's signature.

The system also inherits the **Apple product-photography tradition** (clean staging on neutral gray, the product as the only object with form) and the **sports-editorial broadsheet** instinct (full-bleed action photography with a bold headline burned in). Where Nike pushes that editorial to 96px Futura billboards, On stays calmer and more premium-technical — closer to a high-end spec sheet than a magazine spread. It rejects the gradient washes, soft drop-shadows, and rounded-xl SaaS card stacks of contemporary web design in favor of flat, hairline-defined, high-contrast monochrome.

**Influences:**
- Swiss Style / Josef Müller-Brockmann — https://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann — Grid discipline and grotesque-sans precision that underpins the whole system
- Helvetica / Monotype — https://www.monotype.com — The grotesque-sans lineage behind On's custom geometric type
- Apple — https://www.apple.com — Product photography on neutral gray as the "studio" metaphor
- Dieter Rams / Braun — https://www.braun.com — Functional minimalism: nothing on the page that the product doesn't need
- Nike — https://www.nike.com — The athletic-editorial burn-in headline and pill-CTA e-commerce vocabulary On shares and refines

## 14. Do's and Don'ts

### Do
- Use true black (`#000000`) for ink — not a softened off-black. The maximum-contrast monochrome pair is the brand's signature precision.
- Keep every CTA at the signature **40px pill radius** — fuller than the e-commerce norm. It echoes the CloudTec heel and is the system's most recognizable shape.
- Anchor the white on-image pill (`#ffffff` fill, `#000000` text) over hero photography — "Shop men's" / "Shop women's" is the canonical hero gesture.
- Set headlines in bold `On` 700 with tight negative tracking (`-0.018em` and tighter), white over running photography for the editorial moment.
- Stage every product photo on soft gray (`#f5f5f5`) — the only non-white surface in normal chrome.
- Reserve coral (`#e63312`) almost entirely for sale flags and rare campaign accents; keep it off structural chrome.
- Use `tnum` on every price so columns align mathematically across the grid.
- Punctuate the white page with ink bands (utility strip, campaign tiles, footer) as content moments — not a dark theme.
- Keep cards flat with a 12px corner and optional 1px hairline outline; let photography and dividers carry depth.
- Set focus rings to 2px ink on light, 2px white on dark/photographic surfaces — never to coral.

### Don't
- Don't soften the ink to a near-black gray (`#333` etc.) for CTAs or body — On commits to true `#000000`.
- Don't dial the CTA radius down to a generic 8–12px — the 40px pill is deliberate and load-bearing for the brand.
- Don't use coral (`#e63312`) for primary chrome, nav, or body text — it lives on sale flags and short bold accents only (it only passes AA at large/bold sizes).
- Don't introduce drop-shadow card elevation; cards are defined by corner radius and hairline outline, not lift.
- Don't add a second typeface — the system is `On` sans throughout. Substitute with a single geometric sans (Inter / Space Grotesk) if `On` is unavailable, keeping the tight tracking.
- Don't loosen display tracking to `0` — the tight negative letter-spacing is the headline's engineered texture.
- Don't pad inside product cards; the image fills its 12px frame and metadata sits directly below with 8px gaps.
- Don't put coral in the footer — it stays an ink-and-gray band.
- Don't use SaaS qualifier verbs ("Get started free", "Try it now") — the voice is technical and athletic-imperative.
- Don't add gradient washes or atmospheric blur — the chrome is solid color-block, the photography carries all the atmosphere.
- Don't let body copy drop below 14px or coral text below large/bold sizes — both break the contrast budget.

## 15. Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ffffff`
- Ink (text + brand black): `#000000`
- Soft Gray (product image stage): `#f5f5f5`
- Signature Coral (sale / accent): `#e63312`
- Hairline (1px divider / card outline): `#d4d4d4`
- Hairline Soft (inset): `#e5e5e5`
- Mute (secondary text, AAA): `#525252`
- Mute Soft (caption, AA): `#767676`
- Success: `#1f8a4c`
- Focus ring (light): `#000000`
- Focus ring (dark/photo): `#ffffff`

### Example Component Prompts

1. "Create an On campaign hero — full-bleed running photograph (16:9, athletic action on an alpine road) with a 48px / 1.1-line-height / 700-weight `On` sans headline burned white into the lower-left third, tracking `-0.018em`. Anchor a single white pill (radius 40, padding 14×28, label 'Shop men's' in 16/600 ink) at the bottom-left. No shadow, no border, no gradient overlay."

2. "Design an On product card — 1:1 product photograph on a `#f5f5f5` square backdrop inside a 12px-radius frame, no shadow. Below the image, a 16px stack: 5 swatch dots (16px circles), promo badge if applicable ('New' in an ink pill), product name body-strong ink (16/500), category subtitle caption mute (12/500), price 16/500 tnum ink. If on sale, render the discounted price in `#e63312`, then strike-through original in `#767676`, then '% off' in `#e63312`. Add an ink sale badge (`#e63312`) top-left of the image."

3. "Build an On primary CTA — radius 40 pill, bg `#000000`, text `#ffffff` 16/600, padding 16×32, height 48. Press state: `transform: scale(0.98)` over 120ms (subtle mechanical depress, bg unchanged). Hover lifts toward `#1a1a1a`."

4. "Create an On PLP filter rail — 240px left rail, section headers in h4 ink (20/600), 1px hairline `#d4d4d4` between rows. Filter chips at radius 9999, default bg `#ffffff` with 1px hairline outline, active bg `#000000` text white. Counts in parentheses in mute `#525252`. Below 200px width, collapse multi-column groups to single column with chevron disclosure."

5. "Design the On masthead — ink utility strip (36px, bg `#000000`, centered 'Free shipping & 30-day returns' in caption white) above the primary nav (64px, bg `#ffffff`, `On` wordmark left, centered nav 'Men · Women · Running · Tennis · Hike' in body-strong ink, search + account + cart icons right). Active nav section gets a 2px ink underline."

6. "Build an On PDP image gallery — square primary image at 1:1 with a thumbnail rail (4–6 stacked) to the left. Anchor a wishlist heart icon-circular (44px, bg `#f5f5f5`, ink heart) top-right of the primary image. Below the image: product title in h2 ink (32/600), price in h3 (24/600), then disclosure rows ('Details', 'Shipping & Returns', 'Reviews') with 24px vertical padding and 1px hairline dividers."

### Iteration Guide

1. Focus on ONE component at a time. Pull its tokens from the frontmatter and verify every property resolves to a concrete value before moving on.
2. Reference component names and tokens directly (`button-on-image`, soft gray `#f5f5f5`, radius 40) — never paraphrase the color names or radii in prose.
3. Default body to `body` (16/400) and reach for `body-strong` (16/500) for product names and nav links; reserve `display-hero`/`h1` (48–80px, 700) strictly for hero campaign lockups.
4. Keep the CTA radius locked at 40px — if a button looks generic, the radius is the first thing to check. It is the brand's load-bearing signature.
5. Keep ink (`#000000`) and coral (`#e63312`) scarce per viewport — coral should appear at most once or twice (a sale flag), and never as body or structural chrome.
6. When introducing a new component, ask whether it can be expressed with the existing pill + flat-card + photography-on-`#f5f5f5` vocabulary before adding tokens. The system rarely needs new ones.
7. Preserve the tight negative tracking on all display type — loosening it to `0` is the fastest way to lose the engineered On texture.
8. Run a contrast check on every text/bg pair — the brand pair is a perfect 21.0; coral only clears AA at large/bold sizes, so confine it accordingly.