update DESIGN.md v2

design-md/nike/DESIGN.md

@@ -1,363 +1,575 @@
-# Design System Inspired by Nike
+---
+version: alpha
+name: Nike
+description: |
+  A photography-first commerce system built on extreme typographic contrast — towering uppercase Futura display lockups burned into editorial campaign imagery, sitting above a dense, neutral, near-monochrome retail chrome of pill-shaped black CTAs, gray search and tag pills, and tight 8px-grid product cards. The brand's voice is athletic, kinetic, and absolute: pure black, pure white, a single soft surface gray, and a deliberately small set of semantic accents (sale red, success green, restrained category tints) — every chromatic moment is reserved for editorial photography or pricing signal, never decorative chrome.
 
-## 1. Visual Theme & Atmosphere
+colors:
+  primary: "#111111"
+  on-primary: "#ffffff"
+  canvas: "#ffffff"
+  soft-cloud: "#f5f5f5"
+  ink: "#111111"
+  charcoal: "#39393b"
+  ash: "#4b4b4d"
+  mute: "#707072"
+  stone: "#9e9ea0"
+  hairline: "#cacacb"
+  hairline-soft: "#e5e5e5"
+  sale: "#d30005"
+  sale-deep: "#780700"
+  success: "#007d48"
+  success-bright: "#1eaa52"
+  info: "#1151ff"
+  info-deep: "#0034e3"
+  accent-pink: "#ed1aa0"
+  accent-pink-soft: "#ffb0dd"
+  accent-purple-soft: "#beaffd"
+  accent-purple-pale: "#d6d1ff"
+  accent-teal: "#0a7281"
+  accent-pink-deep: "#4c012d"
 
-Nike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.
+typography:
+  display-campaign:
+    fontFamily: Nike Futura ND
+    fontSize: 96px
+    fontWeight: 500
+    lineHeight: 0.9
+    letterSpacing: 0
+    textTransform: uppercase
+  heading-xl:
+    fontFamily: Helvetica Now Display Medium
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: 0
+  heading-lg:
+    fontFamily: Helvetica Now Display Medium
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: 0
+  heading-md:
+    fontFamily: Helvetica Now Display Medium
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.75
+    letterSpacing: 0
+  body-md:
+    fontFamily: Helvetica Now Text
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-strong:
+    fontFamily: Helvetica Now Text Medium
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0
+  button-lg:
+    fontFamily: Helvetica Now Display Medium
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: 0
+  button-md:
+    fontFamily: Helvetica Now Text Medium
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0
+  button-sm:
+    fontFamily: Helvetica Now Text Medium
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0
+  link-md:
+    fontFamily: Helvetica Now Text
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.75
+    letterSpacing: 0
+    textDecoration: underline
+  caption-md:
+    fontFamily: Helvetica Now Text Medium
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption-sm:
+    fontFamily: Helvetica Now Text Medium
+    fontSize: 12px
+    fontWeight: 500
+    lineHeight: 1.5
+    letterSpacing: 0
+  utility-xs:
+    fontFamily: Helvetica Neue
+    fontSize: 9px
+    fontWeight: 500
+    lineHeight: 1.75
+    letterSpacing: 0
 
-The "Podium CDS" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (`#111111`) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.
+rounded:
+  none: 0px
+  sm: 18px
+  md: 24px
+  lg: 30px
+  full: 9999px
 
-The typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 18px
+  xl: 24px
+  xxl: 30px
+  section: 48px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 16px 32px
+    height: 48px
+  button-primary-active:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+  button-secondary:
+    backgroundColor: "{colors.soft-cloud}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 16px 32px
+    height: 48px
+  button-outline-on-image:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 12px 24px
+  button-icon-circular:
+    backgroundColor: "{colors.soft-cloud}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: 40px
+  search-pill:
+    backgroundColor: "{colors.soft-cloud}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 8px 16px
+    height: 40px
+  search-pill-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.md}"
+  filter-chip:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 8px 16px
+  filter-chip-active:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+  badge-promo:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-sm}"
+    rounded: "{rounded.full}"
+    padding: 4px 12px
+  badge-sale-text:
+    textColor: "{colors.sale}"
+    typography: "{typography.caption-md}"
+  product-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-strong}"
+    rounded: "{rounded.none}"
+    padding: 0px
+  product-card-image:
+    backgroundColor: "{colors.soft-cloud}"
+    rounded: "{rounded.none}"
+  swatch-dot:
+    backgroundColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: 12px
+  swatch-dot-active:
+    backgroundColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    size: 12px
+  campaign-tile:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.display-campaign}"
+    rounded: "{rounded.none}"
+  category-icon-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-md}"
+    rounded: "{rounded.none}"
+  member-benefit-card:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.heading-lg}"
+    rounded: "{rounded.none}"
+  faq-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.heading-md}"
+    rounded: "{rounded.none}"
+    padding: 24px 0px
+  pdp-disclosure-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-strong}"
+    rounded: "{rounded.none}"
+    padding: 24px 0px
+  utility-bar:
+    backgroundColor: "{colors.soft-cloud}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-sm}"
+    rounded: "{rounded.none}"
+    height: 36px
+  primary-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-strong}"
+    rounded: "{rounded.none}"
+    height: 56px
+  filter-sidebar:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-strong}"
+    rounded: "{rounded.none}"
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.mute}"
+    typography: "{typography.caption-md}"
+    rounded: "{rounded.none}"
+---
+
+## Overview
+
+Nike's commerce system is built on a single, almost violently simple idea: photography speaks, the chrome doesn't. Every page reads as an athletic editorial — towering uppercase Futura display lockups (`{typography.display-campaign}`) burned into full-bleed campaign imagery, with everything else (nav, filters, buttons, cards, footer) reduced to neutral typography and pill geometry on `{colors.canvas}` and `{colors.soft-cloud}`. There is no decorative gradient, no soft shadow nostalgia, no accent color used for "tone" — the system saves all chromatic energy for product photography and the small handful of moments that actually need to signal (sale price `{colors.sale}`, success `{colors.success}`, swatch dots).
+
+The result is a layout that feels physical — campaign hero, product grid, sport tile, footer — stacked like a printed catalog rather than animated like a typical SaaS landing page. Density is high but never crowded, because the system relies on three relentless devices: square or near-square 1:1 product imagery on `{colors.soft-cloud}`, pill-shaped black CTAs (`{rounded.full}`) anchoring every actionable surface, and a tight 8px-base spacing scale that keeps cards and filters mathematically aligned across PLP, PDP, and editorial pages.
+
+Across `/men`, the trail-running listing, the Zegama PDP, `/membership`, and Jordan Golf, the same chrome appears in identical proportions — only the photography and copy change. That is the system's signature: maximum editorial expression in the imagery, maximum mechanical restraint everywhere else.
 
 **Key Characteristics:**
-- Monochromatic UI (black/white/grey) that lets product photography be the only color source
-- Massive uppercase display typography (96px, line-height 0.90) that punches through hero images
-- Full-bleed photography with no border radius — imagery fills every available edge
-- Pill-shaped buttons (30px radius) as the primary interactive element
-- 8px spacing grid with athletic discipline — every measurement snaps to the system
-- Category-driven shopping architecture with large navigational image cards
-- Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only
+- Editorial campaign hero with `{typography.display-campaign}` (Nike Futura ND, 96px, line-height 0.9, uppercase) burned directly into full-bleed photography
+- Pure black/white/single-gray UI palette: `{colors.ink}`, `{colors.canvas}`, and `{colors.soft-cloud}` carry ~95% of the chrome surface area
+- Pill geometry everywhere: every CTA, search field, filter chip, and badge uses `{rounded.full}` (30px) or `{rounded.md}` (24px) — there are no sharp-cornered buttons in the system
+- Product cards have zero radius, zero shadow, sit directly on `{colors.soft-cloud}` swatch backgrounds — the photograph is the card
+- Two-tone CTA hierarchy: `{component.button-primary}` (black on anything light) versus `{component.button-secondary}` (`{colors.soft-cloud}` on anything bright) — never both at once on the same surface
+- 8px spacing system with section rhythm at `{spacing.section}` (48px) creating consistent vertical breathing across PLP, PDP, and editorial pages
+- Sale signaling is the only place a non-neutral color appears in retail chrome: `{colors.sale}` price + strike-through original price, no badge background
 
-## 2. Color Palette & Roles
+## Colors
 
-### Primary
+> **Source pages:** `/men` (primary), `/w/mens-acg-trail-running-shoes-…`, `/t/acg-zegama-…`, `/membership`, `/w/jordan-golf-…`. The chrome palette is identical across all five — only photography varies.
 
-- **Nike Black** (`#111111`): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience
-- **Nike White** (`#FFFFFF`): Primary page canvas, button text on dark, card surfaces, nav bar background
+### Brand & Accent
+- **Nike Black** (`{colors.ink}` — `#111111`): The brand's only "color." It is the primary CTA, the swatch dot, the active filter chip, the campaign overlay, the headline color, and the body text. When Nike wants to assert anything, it goes black.
+- **Pure White** (`{colors.on-primary}`, `{colors.canvas}` — `#ffffff`): Equal partner to black. Carries every page background, the on-image CTA, and the inverse text on `{colors.ink}` surfaces.
 
-### Surface & Background
+### Surface
+- **Soft Cloud** (`{colors.soft-cloud}` — `#f5f5f5`): The most-used non-white surface in the entire system. Product card image backgrounds, search pill, secondary CTA, utility bar, sport-category swatch tiles. It is the "color" of every product photograph's stage.
+- **Hairline** (`{colors.hairline}` — `#cacacb`): 1px dividers between filter rows, footer columns, and PDP disclosure rows.
+- **Hairline Soft** (`{colors.hairline-soft}` — `#e5e5e5`): Inset 1px shadow under sticky bars and tab strips, the only "shadow" the system uses.
 
-- **Snow** (`#FAFAFA`): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)
-- **Light Gray** (`#F5F5F5`): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)
-- **Hover Gray** (`#E5E5E5`): Hover state background, disabled button fill (--podium-cds-color-grey-200)
-- **Dark Surface** (`#28282A`): Primary background on dark/inverted sections (--podium-cds-color-grey-800)
-- **Deep Charcoal** (`#1F1F21`): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)
-- **Dark Hover** (`#39393B`): Hover state on dark backgrounds (--podium-cds-color-grey-700)
+### Text
+- **Ink** (`{colors.ink}` — `#111111`): Primary text on light surfaces — headlines, product names, prices, nav.
+- **Charcoal** (`{colors.charcoal}` — `#39393b`): Slightly softer body where ink is too heavy.
+- **Ash** (`{colors.ash}` — `#4b4b4d`): Disabled secondary border on dark surfaces and very low-emphasis utility text.
+- **Mute** (`{colors.mute}` — `#707072`): Product category subtitles ("Men's Trail Running Shoes"), footer link text, secondary metadata.
+- **Stone** (`{colors.stone}` — `#9e9ea0`): Inverse secondary text on dark surfaces and lowest-emphasis utility text.
 
-### Neutrals & Text
+### Semantic
+- **Sale** (`{colors.sale}` — `#d30005`): Discounted price color and "% off" copy — the only red in the entire retail chrome.
+- **Sale Deep** (`{colors.sale-deep}` — `#780700`): Sale price hover/pressed and dark-mode sale anchor.
+- **Success** (`{colors.success}` — `#007d48`): Confirmation messages, in-stock indicators, eligibility ticks.
+- **Success Bright** (`{colors.success-bright}` — `#1eaa52`): Inverse success on dark surfaces.
+- **Info** (`{colors.info}` — `#1151ff`): Informational link/badge accent in member-experience callouts.
+- **Info Deep** (`{colors.info-deep}` — `#0034e3`): Pressed state for info accent.
 
-- **Primary Text** (`#111111`): Main body text, headings, nav links (--podium-cds-color-text-primary)
-- **Secondary Text** (`#707072`): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)
-- **Disabled Text** (`#9E9EA0`): Inactive elements, unavailable options (--podium-cds-color-text-disabled)
-- **Disabled Inverse** (`#4B4B4D`): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)
-- **Border Primary** (`#707072`): Standard border color, matching secondary text
-- **Border Secondary** (`#CACACB`): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)
-- **Border Disabled** (`#CACACB`): Inactive border state
-- **Border Active** (`#111111`): Active/focused border, matching primary text
+### Category Accents (sport / collection chips)
+These appear sparingly — almost exclusively as small chip backgrounds, swatch dots, or category illustrations in editorial tiles. They are never used as text or primary CTA color.
+- **Accent Pink** (`{colors.accent-pink}` — `#ed1aa0`): SKIMS / women's collection moments.
+- **Accent Pink Soft** (`{colors.accent-pink-soft}` — `#ffb0dd`): Soft tinting on member-experience tiles.
+- **Accent Purple Soft** (`{colors.accent-purple-soft}` — `#beaffd`): Editorial swatch dot, soft category chip.
+- **Accent Purple Pale** (`{colors.accent-purple-pale}` — `#d6d1ff`): Lightest soft-tile fill.
+- **Accent Teal** (`{colors.accent-teal}` — `#0a7281`): Trail / outdoor / ACG editorial accent in lockups.
+- **Accent Pink Deep** (`{colors.accent-pink-deep}` — `#4c012d`): Deepest editorial overlay tint, used as wash on heritage / Jordan tiles.
 
-### Semantic & Accent
-
-- **Nike Red** (`#D30005`): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)
-- **Bright Red** (`#EE0005`): Red-500, slightly lighter red for emphasis
-- **Nike Orange Badge** (`#D33918`): Badge text, promotional callouts (--podium-cds-color-text-badge)
-- **Orange Flash** (`#FF5000`): Expressive orange accent (--podium-cds-color-orange-400)
-- **Success Green** (`#007D48`): Confirmation, availability, positive states (--podium-cds-color-green-600)
-- **Success Inverse** (`#1EAA52`): Success on dark backgrounds (--podium-cds-color-green-500)
-- **Link Blue** (`#1151FF`): Text links, informational highlights (--podium-cds-color-blue-500)
-- **Info Inverse** (`#1190FF`): Links on dark backgrounds (--podium-cds-color-blue-400)
-- **Warning Yellow** (`#FEDF35`): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)
-- **Focus Ring** (`rgba(39, 93, 197, 1)`): Keyboard focus indicator ring
-
-### Extended Color Spectrum (Podium CDS)
-
-Each color ramp runs 50–900 for expressive use in campaigns and product pages:
-
-- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
-- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
-- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
-- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
-- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
-- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
-- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
-- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`
-
-### Gradient System
-
-Nike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.
-
-## 3. Typography Rules
+## Typography
 
 ### Font Family
+- **Nike Futura ND** (display campaign only) — proprietary geometric sans for the towering uppercase headlines burned into campaign hero photography. Falls back to Helvetica Now Text Medium → Helvetica → Arial.
+- **Helvetica Now Display Medium** (headings 16–32px) — modern Helvetica cut tuned for display sizes; carries every section title, PDP product name, and dialog headline.
+- **Helvetica Now Text Medium** (UI 12–16px) — buttons, captions, swatch labels, badge text. The system's UI workhorse.
+- **Helvetica Now Text** (body and links) — long-form body and underlined inline links.
+- **Neue Frutiger Arabic** — RTL pairing for Arabic locales at `{typography.heading-lg}` and caption sizes.
+- **Helvetica Neue 9px** — legal-fine-print utility row only (`{typography.utility-xs}`).
 
-**Display:** Nike Futura ND (custom condensed Futura variant exclusive to Nike)
-- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
-- Used exclusively for large uppercase display headlines
-- Characteristically tight line-height (0.90) and uppercase transform
-
-**Heading:** Helvetica Now Display Medium
-- Fallbacks: Helvetica, Arial
-- Used for section headings and product titles at 24–32px
-
-**Body Medium:** Helvetica Now Text Medium (weight 500)
-- Fallbacks: Helvetica, Arial
-- Used for links, buttons, captions, emphasized body text
-
-**Body:** Helvetica Now Text (weight 400)
-- Fallbacks: Helvetica, Arial
-- Used for standard body copy, descriptions, metadata
-
-**Arabic:** Neue Frutiger Arabic — locale-specific alternative
+When substituting on systems without proprietary Nike fonts: pair **Inter** (Display 700 for body chrome, Display 500 for buttons) with **Bebas Neue** or **Anton** at 96px/0.9 line-height for the campaign headline tier. Tighten letter-spacing slightly (-0.5%) on the substitute to approximate Futura ND's optical weight.
 
 ### Hierarchy
 
-| Role | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|--------|-------------|----------------|-------|
-| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, hero headlines |
-| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, section titles |
-| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, subsections |
-| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, card titles |
-| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, product descriptions |
-| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, emphasized text |
-| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, navigation links |
-| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, footer/utility links |
-| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, CTA text |
-| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, secondary buttons |
-| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, price labels |
-| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamps |
-| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, legal text |
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-campaign}` | 96px | 500 | 0.9 | 0 | Editorial campaign headline burned into hero photography (uppercase) |
+| `{typography.heading-xl}` | 32px | 500 | 1.2 | 0 | Section headers — "FEATURED FOOTWEAR", "LATEST IN CLOTHING", PDP product title block |
+| `{typography.heading-lg}` | 24px | 500 | 1.2 | 0 | Subsection / member-benefit card title, large CTA label, PDP price |
+| `{typography.heading-md}` | 16px | 500 | 1.75 | 0 | Card title, FAQ row label, filter group header |
+| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Body copy, search-pill placeholder, product description |
+| `{typography.body-strong}` | 16px | 500 | 1.5 | 0 | Product card name, filter row label, primary nav link |
+| `{typography.button-lg}` | 24px | 500 | 1.2 | 0 | Pressed-letter campaign CTA inside hero blocks |
+| `{typography.button-md}` | 16px | 500 | 1.5 | 0 | Standard pill CTAs across the system |
+| `{typography.button-sm}` | 14px | 500 | 1.5 | 0 | Compact pill CTA, badge label, geo-selector button |
+| `{typography.link-md}` | 16px | 500 | 1.75 | 0 | Underlined inline link, "View Product Details" |
+| `{typography.caption-md}` | 14px | 500 | 1.5 | 0 | Product subtitle ("Men's Trail Running Shoes"), filter count, footer link |
+| `{typography.caption-sm}` | 12px | 500 | 1.5 | 0 | Filter chip label, badge text, color count |
+| `{typography.utility-xs}` | 9px | 500 | 1.75 | 0 | Legal copyright / fine-print row at the very bottom |
 
 ### Principles
+The system runs on extreme typographic contrast: a single 96px uppercase display tier reserved for editorial campaign moments, and a quiet 12–16px Helvetica Now Text/Medium tier carrying everything else. There is almost no middle ground — the jump from `{typography.heading-xl}` (32px) directly to `{typography.body-strong}` (16px) is intentional and creates the "billboard above, catalog below" effect across every page. Letter-spacing is left at 0 (Futura ND and Helvetica Now are both cut for tight optical fit at scale).
 
-Nike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.
+### Note on Font Substitutes
+The closest open-source path to Nike's display tier is **Bebas Neue** (free, geometric condensed) at 96px / 0.9 / uppercase / 500. For UI text, **Inter** is the safest substitute — match weights 400/500 and the system reads almost identically at button and caption sizes.
 
-## 4. Component Stylings
-
-### Buttons
-
-**Primary**
-- Background: Nike Black (`#111111`)
-- Text: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
-- Border: none
-- Border radius: fully rounded pill (30px)
-- Padding: ~12px 24px
-- Hover: background shifts to Grey-500 (`#707072`), text hover color
-- Active: scale(0) ripple effect with opacity 0.5
-- Focus: 2px box-shadow ring in `rgba(39, 93, 197, 1)`
-- Transition: background 200ms ease
-
-**Primary on Dark**
-- Background: White (`#FFFFFF`)
-- Text: Black (`#111111`)
-- Hover: background shifts to Grey-300 (`#CACACB`)
-
-**Secondary (Outlined)**
-- Background: transparent
-- Text: Nike Black (`#111111`)
-- Border: 1.5px solid `#CACACB` (grey-300)
-- Border radius: 30px
-- Hover: border darkens to `#707072`, background to grey-200
-
-**Disabled**
-- Background: Grey-200 (`#E5E5E5`)
-- Text: Grey-400 (`#9E9EA0`)
-- Cursor: not-allowed
-
-**Icon Button**
-- Background: Grey-100 (`#F5F5F5`)
-- Shape: 30px radius (or 50% for circular)
-- Padding: 6px
-- Hover: Grey-500 background
-
-### Cards & Containers
-
-- Background: White (`#FFFFFF`) — no visible card boundary in most cases
-- Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers
-- Shadow: none — Nike uses no card shadows whatsoever
-- Hover: no lift effect on product cards; underline on text links within cards
-- Product cards: image on top (no radius), text metadata below with 12px gap
-- Category cards: full-bleed photography with text overlay on dark gradient
-- Transition: opacity 200ms ease for image swap on hover
-
-### Inputs & Forms
-
-- Background: Grey-100 (`#F5F5F5`)
-- Border: 1px solid `#CACACB` when visible, or borderless on search
-- Border radius: 24px (search inputs), 8px (form inputs)
-- Font: Helvetica Now Text, 16px
-- Focus: border shifts to `#111111` (border-active), 2px focus ring in `rgba(39, 93, 197, 1)`
-- Error: border `#D30005` (critical)
-- Placeholder: Grey-500 (`#707072`)
-- Transition: border-color 200ms ease
-
-### Navigation
-
-- Background: White (`#FFFFFF`), sticky
-- Height: ~60px desktop
-- Left: Nike Swoosh logo (24x24px SVG)
-- Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium
-- Right: Search (24px radius input), Favorites, Cart icons
-- Hover: text color shifts to Grey-500 (`#707072`)
-- Mobile: hamburger menu, full-screen overlay
-- Top banner: promotional message bar with dark background (#111111) and white text
-
-### Image Treatment
-
-- Hero images: full-bleed, no border radius, edge-to-edge
-- Product grid: square (1:1) or 4:3 aspect ratio, no border radius
-- Category cards: 16:9 or 4:3, full-bleed with text overlay
-- Image placeholder: Grey-100 (`#F5F5F5`) solid background
-- Lazy loading: native loading="lazy", skeleton uses #F5F5F5 bg
-- Product hover: secondary image swap (front → side view)
-
-### Promotional Banners
-
-- Full-width dark (`#111111`) background with white text
-- Tight padding (8-12px vertical)
-- Centered text, 12px/500 Helvetica Now Text Medium
-- Used for shipping promotions, member benefits, sale announcements
-
-## 5. Layout Principles
+## Layout
 
 ### Spacing System
-
-Base unit: 4px (primary grid is 8px multiples)
-
-| Token | Value | Use |
-|-------|-------|-----|
-| space-1 | 4px | Tight icon gaps, inline spacing |
-| space-2 | 8px | Base unit, button icon gaps |
-| space-3 | 12px | Card internal padding, tight margins |
-| space-4 | 16px | Standard padding, nav spacing |
-| space-5 | 20px | Product card gaps |
-| space-6 | 24px | Section internal padding, grid gaps |
-| space-7 | 32px | Section breaks |
-| space-8 | 48px | Major section padding |
-| space-9 | 64px | Hero section padding |
-| space-10 | 80px | Large section spacing |
+- **Base unit:** 8px
+- **Tokens (front matter):** `{spacing.xxs}` (2px) · `{spacing.xs}` (4px) · `{spacing.sm}` (8px) · `{spacing.md}` (12px) · `{spacing.lg}` (18px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (30px) · `{spacing.section}` (48px+)
+- **Universal rhythm:** every page in the set uses `{spacing.section}` (48px) as the vertical gap between major content blocks (campaign hero → trending row → featured row → shop-by-sport → latest-in-clothing → footer). PLP card grids use `{spacing.sm}` (8px) gutters. PDP disclosure rows are stacked at `{spacing.xl}` (24px) vertical padding.
+- **Card internal padding:** product cards use 0px internal padding — image is full-bleed; metadata rows sit directly below with `{spacing.sm}` (8px) gap between name, subtitle, and price.
 
 ### Grid & Container
-
-- Max container width: 1920px
-- Standard content width: ~1440px with horizontal padding
-- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
-- Category grid: 3-column with full-bleed images
-- Grid gap: 4-12px between product cards (intentionally tight)
-- Horizontal padding: 48px desktop, 24px tablet, 16px mobile
+- **Max width:** ~1440px content area with edge gutters that grow to ~80px at 1920px (the system lets very wide viewports breathe rather than stretch).
+- **Column patterns:** PLP listing uses 3-up at desktop, collapsing to 2-up at 1023px and 1-up at 599px. The men's home `/men` mixes a 2-up campaign hero row, a 3- or 4-up "Trending Now" row, a horizontal-scroll "Shop by Sport" rail, and a 4-up "Latest in Clothing" thumbnail grid.
+- **Filter sidebar:** ~220px fixed-width left rail on PLP at desktop, collapsing into a `Hide Filters` toggle button at narrow widths.
 
 ### Whitespace Philosophy
+Whitespace is a tool for separation, not for breath. Sections butt directly against each other vertically with `{spacing.section}` rhythm, and product photos tile edge-to-edge inside their grid — there is no padding wrapped around the product image itself. The "air" comes from the `{colors.soft-cloud}` background of the photograph, not from layout margin. Headlines do not have decorative whitespace above them; they sit immediately under the section divider line.
 
-Nike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 — Flat | No shadow, no border | Default for cards, buttons, sections — the dominant treatment |
+| 1 — Hairline divider | 1px solid `{colors.hairline}` | Filter row separators, footer column borders, PDP disclosure-row separators |
+| 2 — Inset bottom-line | `box-shadow: inset 0 -1px 0 {colors.hairline-soft}` | Sticky utility/sub-nav bar bottom edge, tab strip underline |
+
+The system has no drop-shadow elevation in its retail chrome at all. Cards do not lift on the page. The only depth cue is the 1px inset hairline on sticky strips and the contrast between full-bleed photography and `{colors.soft-cloud}` product backdrops.
+
+### Decorative Depth
+Depth in Nike's system comes entirely from photography, not from CSS effects:
+- **Editorial campaign tiles** create depth via cinematic perspective — a runner on a trail, a model in a courtyard — with the Futura display headline overlaid in white or `{colors.ink}` directly on the image.
+- **Product card photography** is shot on flat `{colors.soft-cloud}` to remove any background depth, so the product itself is the only thing with form on the page.
+- **Sport-category tiles** on the home page are full-bleed cinematic photography with a small `{component.button-outline-on-image}` pill anchored at the bottom-left, giving a moment of crisp white pill against atmospheric image.
+
+## Shapes
 
 ### Border Radius Scale
 
-| Value | Context |
-|-------|---------|
-| 0px | Product images, hero photography (sharp edges) |
-| 8px | Form inputs (non-search) |
-| 18px | Small interactive elements |
-| 20px | Containers, cards with UI content |
-| 24px | Search inputs, medium pills |
-| 30px | Buttons, tags, filters (full pill) |
-| 50% | Circular icon buttons, avatar placeholders |
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.none}` | 0px | Cards, campaign tiles, product imagery, navigation, footer — every container in the system |
+| `{rounded.sm}` | 18px | Avatar / icon container in member-benefit lockups |
+| `{rounded.md}` | 24px | Search pill, search submit, filter input |
+| `{rounded.lg}` | 30px | Every CTA pill — primary, secondary, on-image, filter chip, geo-selector, "Notify Me" |
+| `{rounded.full}` | 9999px | Color swatch dots and circular icon buttons (back, share, favorite, carousel paddle) |
 
-## 6. Depth & Elevation
+### Photography Geometry
+- **Product cards:** consistent 1:1 square or near-square (~4:5 portrait on tall product crops), full-bleed within the card with no padding, sitting on `{colors.soft-cloud}` backdrop.
+- **Editorial campaign hero:** ~16:9 or wider cinematic crop, full-bleed across the content max-width, with the Futura display headline burned into the lower-left or upper-left third.
+- **Sport-category rail:** 4:5 portrait full-bleed thumbnails with a small CTA pill anchored bottom-left.
+- **PDP main image:** square primary image with vertical thumbnail rail to its left (~5–7 thumbnails stacked at small size), enabling rapid color/angle browsing without leaving the page.
+- **Avatar / category icon cards:** centered illustrated icon at ~80–96px on `{colors.canvas}` with `{typography.caption-md}` label below.
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat | No shadow, no border | Default state for everything |
-| Divider | `0px -1px 0px 0px #E5E5E5 inset` | Subtle inset line between sections |
-| Focus | `0 0 0 2px rgba(39, 93, 197, 1)` | Keyboard focus ring |
-| Overlay | Dark scrim over photography | Text-on-image legibility |
+## Components
 
-Nike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only "shadow" in the entire system is a 1px inset divider line and the accessibility-required focus ring.
+> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only; variants live as separate `components:` entries in the front matter.
 
-### Decorative Depth
+### Buttons
 
-- **Hero photography overlays**: Dark gradient scrims over full-bleed photography for text readability
-- **Product background gradients**: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)
-- **Banner bars**: Solid dark (#111111) promotional strips at page top
+**`button-primary`** — the universal Nike CTA
+- Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `16px 32px`, height `{spacing.section}` (48px), rounded `{rounded.lg}` (30px pill).
+- Used on every primary action in the system: "Sign Up", "Notify Me", "Buy", "Türkiye" geo-confirm, "Shop" overlay on sport tiles, "Continue".
+- Pressed state lives in `button-primary-active` — the bg stays `{colors.ink}` while the surface shrinks to `scale(0.5)` with `opacity: 0.5` (Nike's signature "tap collapse" feedback that's extracted across all five pages).
 
-## 7. Do's and Don'ts
+**`button-secondary`** — soft alternative on light surfaces
+- Background `{colors.soft-cloud}`, text `{colors.ink}`, type `{typography.button-md}`, padding `16px 32px`, rounded `{rounded.lg}`.
+- Used as the lower-emphasis alternate when a primary CTA already exists, e.g., "United States" geo-decline next to the black "Türkiye" confirm; "Cancel" or "Discover More" on light cards.
+
+**`button-outline-on-image`** — overlay CTA on photography
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.lg}`.
+- The crisp white pill that anchors the bottom-left of every full-bleed sport-category and editorial campaign tile.
+
+**`button-icon-circular`** — chrome icon controls
+- Background `{colors.soft-cloud}` or transparent, icon `{colors.ink}`, rounded `{rounded.full}`, size 40px.
+- Used for back-arrow, carousel paddle (left/right), wishlist heart, share, and "Hide Filters" toggle.
+
+**`filter-chip`** + **`filter-chip-active`**
+- Default: background `{colors.canvas}`, text `{colors.ink}`, 1px hairline `{colors.hairline}`, type `{typography.button-md}`, rounded `{rounded.lg}`, padding `8px 16px`.
+- Active: background `{colors.ink}`, text `{colors.on-primary}` — the chip flips fully inverted when selected. No middle state.
+
+### Inputs & Forms
+
+**`search-pill`** + **`search-pill-focused`**
+- Default: background `{colors.soft-cloud}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (24px), padding `8px 16px`, height `40px`. Anchored to the right of the primary nav with a small magnifier icon.
+- Focused: background `{colors.canvas}`, 2px solid border `{colors.ink}`, with a 12px outer halo of `{colors.soft-cloud}` (the system's only "focus ring" effect). The pill shape stays `{rounded.md}` so the halo reads as a soft glove, not a hard outline.
+
+### Cards & Containers
+
+**`product-card`**
+- Container: background `{colors.canvas}`, rounded `{rounded.none}`, padding 0, no shadow.
+- Image area: `{component.product-card-image}` — full-bleed product photo on `{colors.soft-cloud}` square.
+- Below image (in this order with `{spacing.sm}` between): swatch dot row (3–6 dots at 12px circular), promo badge if applicable (`{component.badge-promo}` "Just In", "Coming Soon", "Recycled Materials"), product name `{typography.body-strong}` `{colors.ink}`, category subtitle `{typography.caption-md}` `{colors.mute}`, price row.
+- Price row: regular price `{typography.body-strong}` `{colors.ink}`. If on sale: discounted price `{colors.sale}` followed by strike-through original `{colors.mute}` followed by "% off" in `{colors.sale}`.
+
+**`campaign-tile`** — the brand's signature editorial unit
+- Full-bleed photography with `{typography.display-campaign}` headline burned in (uppercase, 96px, line-height 0.9).
+- Headline color is whichever of `{colors.canvas}` or `{colors.ink}` reads against the underlying image — not parameterized; chosen per-asset.
+- A single `{component.button-outline-on-image}` pill anchored bottom-left of the tile carries the call-to-action.
+
+**`category-icon-card`**
+- Container: background `{colors.canvas}`, rounded `{rounded.none}`.
+- Centered category illustration (~80px) + label `{typography.caption-md}` `{colors.ink}` directly below. Used in the "Latest in Clothing" 4–8-up icon strip on `/men`.
+
+**`member-benefit-card`**
+- Full-bleed photographic card on a dark image background; copy slot at the bottom-left with `{typography.heading-lg}` headline `{colors.on-primary}` and a `{component.button-outline-on-image}` "Explore" pill below.
+- Used in the `/membership` "Member Benefits" 3-up grid.
+
+**`swatch-dot`** + **`swatch-dot-active`**
+- 12px circle, rounded `{rounded.full}`, no border in default state. Renders the colorway options on every product card and PDP color picker.
+- Default: filled with the colorway's actual product color (extracted at runtime from the product image), 1px subtle outer ring in `{colors.hairline}` for white/light colorways so they remain visible on `{colors.canvas}`.
+- Active: identical fill with a 2px `{colors.ink}` outer ring and 2px white interior gap, creating Nike's signature concentric-ring "selected" state. No size change between default and active.
+
+**`badge-promo`**
+- Background `{colors.canvas}` with 1px hairline `{colors.hairline}`, text `{colors.ink}`, type `{typography.caption-sm}`, rounded `{rounded.lg}`, padding `4px 12px`.
+- Sits on top of product imagery (top-left of card) with copy like "Just In", "Coming Soon", "Recycled Materials", "Member Exclusive".
+
+**`badge-sale-text`**
+- Inline price-row text in `{colors.sale}` with no background — the only "badge" in the system that has no container.
+
+### Navigation
+
+**`utility-bar`** — top utility strip
+- Background `{colors.soft-cloud}`, text `{colors.ink}`, type `{typography.caption-sm}`, height ~36px, rounded `{rounded.none}`.
+- Right-aligned cluster: "Find a Store · Help · Join Us · Sign In". Always present; never collapses.
+
+**`primary-nav`** — main navigation
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-strong}` for nav links, height 56–64px, rounded `{rounded.none}`.
+- Layout: Nike swoosh logo at left (32×32), centered nav row ("New & Featured · Men · Women · Kids · Jordan · Nike SKIMS · Sport"), right cluster (search pill, wishlist heart icon, bag icon).
+- The active section gets a 2px-bottom underline in `{colors.ink}` — no background fill.
+
+**Sub-nav strip** (PLP) — appears under primary nav with breadcrumb + sort + hide-filters controls.
+- Same `{colors.canvas}` background with a 1px inset hairline-soft bottom edge.
+- Left: breadcrumb in `{typography.caption-md}` `{colors.mute}` separated by " / ".
+- Right: "Hide Filters" toggle + "Sort By: …" dropdown — both in `{typography.button-md}` with chevron icons.
+
+**Top Nav (Mobile)**
+- Hamburger menu icon (left), Nike swoosh (center), search + bag icons (right).
+- Search pill collapses into an icon-only button at narrow widths; tapping expands a full-width overlay search pill with `{rounded.md}`.
+- Primary nav collapses into a full-height drawer that slides in from the left, listing nav rows top-down with `{spacing.xl}` vertical padding.
+
+### Signature Components
+
+**`pdp-disclosure-row`** — PDP information accordion rows
+- Stacked rows for "View Product Details", "Shipping & Returns", "Reviews (n)" with `{spacing.xl}` vertical padding and a 1px `{colors.hairline}` divider below each.
+- Label `{typography.body-strong}` `{colors.ink}` left-aligned; chevron `{colors.ink}` right-aligned.
+
+**`faq-row`** — `/membership` FAQ accordion
+- Identical pattern to `pdp-disclosure-row` but with `{typography.heading-md}` label weight; 1px `{colors.hairline}` divider below each.
+
+**`filter-sidebar`** — PLP left rail
+- Container `{colors.canvas}`, rounded `{rounded.none}`.
+- Section headers `{typography.body-strong}` `{colors.ink}` with `{spacing.lg}` (18px) vertical gap between groups.
+- Active filters get a 1px ink underline; counts in parentheses use `{colors.mute}`.
+
+**`footer`**
+- Background `{colors.canvas}` with a single 1px `{colors.hairline}` top divider.
+- Four columns: Resources / Help / Company / Promotions & Discounts, each with column header `{typography.body-strong}` `{colors.ink}` and link list `{typography.caption-md}` `{colors.mute}`.
+- Below the columns: a horizontal rule, then a fine-print row with `{typography.utility-xs}` `{colors.mute}` (copyright, locale switcher, terms, privacy, supply-chain act).
+
+## Do's and Don'ts
 
 ### Do
-
-- Use Nike Black (#111111) for all primary text — never pure #000000
-- Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants
-- Use full-bleed, edge-to-edge photography for hero sections — no border radius on images
-- Let product photography provide all color vibrancy; keep UI monochromatic
-- Use uppercase Nike Futura ND ONLY for display headlines (96px+)
-- Maintain tight product grid gaps (4-12px) for a dense, abundant feel
-- Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds
-- Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)
-- Use weight 500 (Medium) for all interactive text elements
+- Reserve `{typography.display-campaign}` exclusively for editorial campaign hero lockups — never use 96px Futura for section headers or product titles.
+- Use `{component.button-primary}` (`{colors.ink}` pill) as the single primary action per viewport. Pair it at most with `{component.button-secondary}` (`{colors.soft-cloud}` pill) for a soft alternative.
+- Stage every product photograph on `{colors.soft-cloud}` — the gray is the system's "studio."
+- Keep all CTAs pill-shaped at `{rounded.lg}` (30px). Never introduce a square or `{rounded.sm}` button.
+- Use `{colors.sale}` only on price rows — never on backgrounds, badges, or chrome.
+- Stack content sections at `{spacing.section}` (48px) rhythm with no decorative dividers between them; the photography's bleed-edge is the divider.
+- Anchor on-image CTAs with `{component.button-outline-on-image}` (white pill) at bottom-left — the system's universal "shop this image" position.
 
 ### Don't
+- Don't introduce drop shadows or card elevation. Cards sit flat on the page; the only depth cue is the 1px inset hairline on sticky bars.
+- Don't use any of the category accent colors (`{colors.accent-pink}`, `{colors.accent-purple-soft}`, `{colors.accent-teal}`) for primary chrome — they belong to swatch dots, soft tile fills, and editorial moments only.
+- Don't replace `{colors.ink}` with a near-black gray like `{colors.charcoal}` for a CTA — Nike's primary pill is true `#111111`.
+- Don't pad inside product cards. The image is full-bleed; metadata sits directly below with `{spacing.sm}` (8px) between rows.
+- Don't put two campaign-tile lockups in the same row at the same scale — Nike alternates a single full-bleed editorial tile with a 2-up or 4-up product/category grid.
+- Don't underline anything other than `{typography.link-md}` inline links and the active primary-nav indicator. Buttons, headings, and prices stay un-underlined.
+- Don't introduce a third button shape. Pill or icon-circular — that's the entire button shape vocabulary.
 
-- Don't add shadows to cards — Nike's elevation model is entirely flat
-- Don't use border radius on product imagery — only UI elements get rounded corners
-- Don't introduce brand colors beyond the grey scale for UI elements
-- Don't use Nike Futura ND below 24px — it's exclusively a display face
-- Don't add hover lift effects — Nike cards don't animate on hover
-- Don't use regular weight (400) for buttons or links — always use 500
-- Don't place colored backgrounds behind UI elements — color is reserved for product contexts
-- Don't use more than two levels of text hierarchy per card (title + body)
-- Don't add decorative dividers — the 1px inset is the only divider pattern
-- Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum
-
-## 8. Responsive Behavior
+## Responsive Behavior
 
 ### Breakpoints
 
 | Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, hamburger nav, display text scales down, tight 16px padding |
-| Small Tablet | 640-768px | 2-column product grid begins, nav still collapsed |
-| Tablet | 768-960px | 2-column grids, category cards scale, horizontal padding 24px |
-| Small Desktop | 960-1024px | Nav expands to full horizontal, 3-column product grid |
-| Desktop | 1024-1440px | Full layout, expanded nav, 3-column grids, 48px padding |
-| Large Desktop | >1440px | Max-width container centered, increased margins, hero images full-bleed |
+|---|---|---|
+| ultrawide | 1920px+ | Content max-width holds at ~1440px; outer gutters grow to ~80px on each side |
+| desktop-large | 1440px | Default desktop layout — 3-up product grid, 4-up clothing strip, full primary nav |
+| desktop | 1200px | Same as large with slightly narrower outer gutters |
+| desktop-small | 1024px | Filter sidebar starts compressing; sport rail shows ~3 visible tiles |
+| tablet | 1023–961px | 3-up PLP collapses to 2-up; "Hide Filters" becomes a default toggle |
+| tablet-narrow | 960–640px | Primary nav center cluster collapses to a hamburger drawer; search pill becomes icon-only |
+| mobile-landscape | 639–600px | 2-up PLP collapses to 1-up; product cards become full-width with image and metadata stacking |
+| mobile | 599–320px | Single-column everything; campaign tiles render at full screen width with shorter Futura sizes (~64px) |
 
 ### Touch Targets
-
-- Minimum touch target: 44x44px (WCAG AAA)
-- Mobile nav icons: 48x48px touch area
-- Product cards: full surface is tappable
-- Filter pills: minimum 36px height with 12px padding
+All interactive elements meet WCAG AAA (44×44px minimum). Pills (`{component.button-primary}`, `{component.button-secondary}`) sit at 48px height with 32px horizontal padding. Icon-circular buttons (`{component.button-icon-circular}`) sit at 40px — Nike's PDP carousel paddle and wishlist heart sit just under AAA but above AA at 40×40, with hit-target padding extending the tappable area to 48px+. Filter-chip pills are 40px height with 16px padding.
 
 ### Collapsing Strategy
-
-- **Navigation**: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible
-- **Product grids**: 3-col → 2-col at 960px → 1-col at 640px
-- **Hero sections**: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes
-- **Category cards**: 3-col → 2-col → 1-col with maintained full-bleed imagery
-- **Section padding**: 80px → 48px → 32px → 24px as viewport narrows
-- **Promotional banner**: text wraps or truncates, maintains dark background
+- **Primary nav:** desktop center cluster → mobile drawer triggered by hamburger at left of the swoosh.
+- **PLP grid:** 3-up → 2-up → 1-up at 1023, 599, and below; gutters drop from `{spacing.sm}` to `{spacing.xs}` on mobile.
+- **Filter sidebar:** 220px fixed → "Hide Filters" toggle → off-canvas full-screen filter drawer at mobile.
+- **Sport rail:** desktop horizontal scroll with ~5 visible → mobile horizontal scroll with ~1.5 visible (peek-next-card pattern).
+- **Section spacing:** `{spacing.section}` 48px desktop → 32px tablet → 24px mobile to keep editorial rhythm tight on small screens.
+- **Editorial campaign headline:** desktop 96px → tablet 64px → mobile 48px, line-height stays at 0.9 across all sizes.
 
 ### Image Behavior
+- Product imagery is responsive at the same 1:1 ratio across all breakpoints — the image scales, the ratio doesn't.
+- Editorial campaign tiles use art-direction crops: a 16:9 wide hero on desktop swaps to a 4:5 portrait on mobile so the figure stays centered and the headline still has burn-in space.
+- All non-critical product imagery is lazy-loaded as the user scrolls into the next grid row.
 
-- Responsive images via Nike CDN (`c.static-nike.com`) with width parameters
-- Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)
-- Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)
-- Lazy loading: native loading="lazy", grey-100 placeholder during load
-- Art direction: hero crops change between desktop and mobile compositions
+## Iteration Guide
 
-## 9. Agent Prompt Guide
+1. Focus on ONE component at a time. Pull its YAML entry from the front matter and verify every property resolves.
+2. Reference component names and tokens directly (`{colors.ink}`, `{component.button-primary-active}`, `{rounded.lg}`) — do not paraphrase color names or radii in prose.
+3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
+4. Add new variants as separate component entries (`-active`, `-disabled`, `-focused`) — do not bury them inside prose. Nike's pressed state (`scale(0.5) opacity 0.5`) is intentional and must be its own entry, not a hover stand-in.
+5. Default body to `{typography.body-md}`; reach for `{typography.body-strong}` for product names and primary nav links; reserve `{typography.display-campaign}` strictly for hero campaign lockups.
+6. Keep `{colors.ink}` scarce per viewport — if more than one solid-black pill or block appears in the same fold, neutralize one to `{component.button-secondary}` or `{component.button-outline-on-image}`.
+7. When introducing a new component, ask whether it can be expressed with the existing pill + flat-card + photography-on-`{colors.soft-cloud}` vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.
 
-### Quick Color Reference
+## Known Gaps
 
-- Primary CTA: Nike Black (`#111111`)
-- Background: White (`#FFFFFF`)
-- Secondary surface: Light Gray (`#F5F5F5`)
-- Heading text: Nike Black (`#111111`)
-- Body text / hover: Secondary Text (`#707072`)
-- Border: Border Secondary (`#CACACB`)
-- Error: Nike Red (`#D30005`)
-- Link: Link Blue (`#1151FF`)
-
-### Example Component Prompts
-
-- "Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)"
-- "Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)"
-- "Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons"
-- "Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius"
-- "Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072"
-
-### Iteration Guide
-
-When refining existing screens generated with this design system:
-1. Focus on ONE component at a time
-2. Reference specific color names and hex codes from this document
-3. Remember: product photography is the color — UI stays monochromatic
-4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072
-5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale
-6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px
-7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements
+- **Mobile screenshots not captured** — responsive behavior described above synthesizes Nike's known mobile pattern (hamburger drawer, 1-up grid, headline downscale) from desktop evidence and the breakpoint list extracted from tokens.
+- **Hover states not documented** by system policy — Nike's CSS uses `--pds-color-element-hover` and `--pds-color-text-hover` tokens but these are not included here.
+- **Dialog / modal styling** beyond the geo-selector and the country-confirmation pill pair could not be confirmed from the captured surfaces; bag, wishlist, and login overlays are not documented.
+- **Form field styling** for checkout, sign-up, and address forms is not present in the captured surfaces — only the search pill is documented.
+- **Bag and wishlist** icon-state variants (filled count badges) not visible in the captured pages.