Nike

---
version: alpha
name: "Nike"
description: "Nike 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Nike 的 commerce system 建立在一个近乎强硬的简单原则上：photography 说话，chrome 退场。每个页面都像 athletic editorial：巨大的 uppercase Futura display lockup（`{typography.display-campaign}`）直接压在 full-bleed campaign imagery 上，其它元素（nav、filter、button、card、footer）都降到中性 typography 与 pill geometry，并落在 `{colors.canvas}` 与 `{colors.soft-cloud}` 之上。系统没有 decorative gradient，没有柔软 shadow nostalgia，也不会把 accent color 当作 "tone" 使用；所有 chromatic energy 都保留给 product photography，以及少数确实需要 signal 的场景（sale price `{colors.sale}`、success `{colors.success}`、swatch dot）。

结果是一个具有物理感的 layout：campaign hero、product grid、sport tile、footer 像印刷 catalog 一样层层堆叠，而不是像典型 SaaS landing page 那样用动画推进。Density 很高但不拥挤，因为系统依赖三件持续重复的工具：在 `{colors.soft-cloud}` 上的 square 或近 square 1:1 product imagery、锚定每个 actionable surface 的 black pill CTA（`{rounded.full}`）、以及让 PLP、PDP 与 editorial page 保持数学对齐的 8px-base spacing scale。

在 `/men`、trail-running listing、Zegama PDP、`/membership` 与 Jordan Golf 中，相同 chrome 以相同比例出现，变化的只有 photography 与 copy。这就是系统 signature：imagery 中最大 editorial expression，其它地方最大 mechanical restraint。

**关键特征：**
- Editorial campaign hero 使用 `{typography.display-campaign}`（Nike Futura ND，96px，line-height 0.9，uppercase）直接压入 full-bleed photography。
- 纯 black/white/single-gray UI palette：`{colors.ink}`、`{colors.canvas}`、`{colors.soft-cloud}` 承担约 95% chrome surface area。
- Pill geometry everywhere：每个 CTA、search field、filter chip、badge 使用 `{rounded.full}` (30px) 或 `{rounded.md}` (24px)，系统中没有 sharp-corner button。
- Product card 无 radius、无 shadow，直接放在 `{colors.soft-cloud}` swatch background 上；photograph 本身就是 card。
- Two-tone CTA hierarchy：`{component.button-primary}`（黑底，位于任何 light surface）与 `{component.button-secondary}`（`{colors.soft-cloud}`，位于 bright surface）区分明确，不在同一 surface 上同时使用两者。
- 8px spacing system，section rhythm 使用 `{spacing.section}` (48px)，在 PLP、PDP 与 editorial page 中创造一致 vertical breathing。
- Retail chrome 中非中性色只出现在 sale signal：`{colors.sale}` price + strike-through original price，无 badge background。

## Colors

> **Source pages:** `/men`、`/w/mens-acg-trail-running-shoes-…`、`/t/acg-zegama-…`、`/membership`、`/w/jordan-golf-…`。五个页面的 chrome palette 一致，变化仅来自 photography。

### Brand & Accent
- **Nike Black** (`{colors.ink}` — `#111111`): 品牌唯一的 "color"。它是 primary CTA、swatch dot、active filter chip、campaign overlay、headline color 与 body text。Nike 需要强调时，就使用 black。
- **Pure White** (`{colors.on-primary}`, `{colors.canvas}` — `#ffffff`): Black 的平等搭档。承载页面背景、on-image CTA，以及 `{colors.ink}` surface 上的 inverse text。

### Surface
- **Soft Cloud** (`{colors.soft-cloud}` — `#f5f5f5`): 系统中最常用的非白 surface。用于 product card image background、search pill、secondary CTA、utility bar、sport-category swatch tile，是每张 product photograph 的 "studio"。
- **Hairline** (`{colors.hairline}` — `#cacacb`): filter row、footer column、PDP disclosure row 之间的 1px divider。
- **Hairline Soft** (`{colors.hairline-soft}` — `#e5e5e5`): sticky bar 与 tab strip 下方的 inset 1px shadow，也是系统唯一的 "shadow"。

### Text
- **Ink** (`{colors.ink}` — `#111111`): light surface 上的 primary text，包括 headline、product name、price、nav。
- **Charcoal** (`{colors.charcoal}` — `#39393b`): ink 过重时使用的稍软 body。
- **Ash** (`{colors.ash}` — `#4b4b4d`): dark surface 上 disabled secondary border 与极低强调 utility text。
- **Mute** (`{colors.mute}` — `#707072`): product category subtitle（如 "Men's Trail Running Shoes"）、footer link text、secondary metadata。
- **Stone** (`{colors.stone}` — `#9e9ea0`): dark surface 上 inverse secondary text 与最低强调 utility text。

### Semantic Colors
- **Sale** (`{colors.sale}` — `#d30005`): discounted price 与 "% off" copy，整个 retail chrome 中唯一的红色。
- **Sale Deep** (`{colors.sale-deep}` — `#780700`): sale price hover/pressed 与 dark-mode sale anchor。
- **Success** (`{colors.success}` — `#007d48`): confirmation message、in-stock indicator、eligibility tick。
- **Success Bright** (`{colors.success-bright}` — `#1eaa52`): dark surface 上的 inverse success。
- **Info** (`{colors.info}` — `#1151ff`): member-experience callout 中的 informational link/badge accent。
- **Info Deep** (`{colors.info-deep}` — `#0034e3`): info accent 的 pressed state。

### Category Accents (sport / collection chips)
这些颜色很少出现，几乎只作为小 chip background、swatch dot 或 editorial tile 中的 category illustration；绝不用于 text 或 primary CTA color。
- **Accent Pink** (`{colors.accent-pink}` — `#ed1aa0`): SKIMS / women's collection moment。
- **Accent Pink Soft** (`{colors.accent-pink-soft}` — `#ffb0dd`): member-experience tile 上的 soft tint。
- **Accent Purple Soft** (`{colors.accent-purple-soft}` — `#beaffd`): editorial swatch dot、soft category chip。
- **Accent Purple Pale** (`{colors.accent-purple-pale}` — `#d6d1ff`): 最浅的 soft-tile fill。
- **Accent Teal** (`{colors.accent-teal}` — `#0a7281`): Trail / outdoor / ACG editorial accent。
- **Accent Pink Deep** (`{colors.accent-pink-deep}` — `#4c012d`): 最深的 editorial overlay tint，用作 heritage / Jordan tile 的 wash。

## Typography

### Font Family
- **Nike Futura ND**（仅 display campaign）— 专有 geometric sans，用于 campaign hero photography 中巨大的 uppercase headline。Fallback 为 Helvetica Now Text Medium -> Helvetica -> Arial。
- **Helvetica Now Display Medium**（heading 16–32px）— 现代 Helvetica display cut，承载 section title、PDP product name、dialog headline。
- **Helvetica Now Text Medium**（UI 12–16px）— button、caption、swatch label、badge text，是系统 UI workhorse。
- **Helvetica Now Text**（body 与 link）— long-form body 与 underlined inline link。
- **Neue Frutiger Arabic** — Arabic locale 中 `{typography.heading-lg}` 与 caption size 的 RTL pairing。
- **Helvetica Neue 9px** — 只用于 legal-fine-print utility row（`{typography.utility-xs}`）。

没有 Nike 专有字体时：用 **Inter**（Display 700 用于 body chrome，Display 500 用于 button）搭配 **Bebas Neue** 或 **Anton**（96px/0.9 line-height）替代 campaign headline tier，并略微收紧 letter-spacing（-0.5%）模拟 Futura ND 的 optical weight。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-campaign}` | 96px | 500 | 0.9 | 0 | Editorial campaign headline，压入 hero photography（uppercase）。 |
| `{typography.heading-xl}` | 32px | 500 | 1.2 | 0 | Section header，如 "FEATURED FOOTWEAR"、"LATEST IN CLOTHING"、PDP product title block。 |
| `{typography.heading-lg}` | 24px | 500 | 1.2 | 0 | Subsection / member-benefit card title、大 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 | Hero block 内 pressed-letter campaign CTA。 |
| `{typography.button-md}` | 16px | 500 | 1.5 | 0 | 系统标准 pill CTA。 |
| `{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、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。 |

### Principles
系统依赖极端 typographic contrast：一个 96px uppercase display tier 只留给 editorial campaign moment，其它所有内容由安静的 12–16px Helvetica Now Text/Medium tier 承担。几乎没有中间地带；从 `{typography.heading-xl}` (32px) 直接跳到 `{typography.body-strong}` (16px) 是有意的，创造 "上方 billboard、下方 catalog" 的效果。Letter-spacing 保持 0，因为 Futura ND 与 Helvetica Now 都为紧密 optical fit 设计。

### Font Substitutes
最接近 Nike display tier 的开源路径是 **Bebas Neue**（free、geometric condensed），设置为 96px / 0.9 / uppercase / 500。UI text 用 **Inter** 最稳妥，匹配 400/500 weight 后，在 button 与 caption size 上几乎同样成立。

## Layout

### Spacing System
- **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:** 每个页面都用 `{spacing.section}` (48px) 作为 major content block 之间的 vertical gap（campaign hero -> trending row -> featured row -> shop-by-sport -> latest-in-clothing -> footer）。PLP card grid 使用 `{spacing.sm}` (8px) gutter。PDP disclosure row 使用 `{spacing.xl}` (24px) vertical padding 堆叠。
- **Card internal padding:** product card 内部 padding 为 0px；image full-bleed，metadata row 直接在下方，name、subtitle、price 间使用 `{spacing.sm}` (8px) gap。

### Grid & Container
- **Max width:** content area 约 1440px，edge gutter 在 1920px 时增长到约 80px，让超宽 viewport 呼吸而不是拉伸。
- **Column patterns:** PLP desktop 3-up，1023px 折叠到 2-up，599px 折叠到 1-up。`/men` 混合 2-up campaign hero row、3 或 4-up "Trending Now" row、horizontal-scroll "Shop by Sport" rail，以及 4-up "Latest in Clothing" thumbnail grid。
- **Filter sidebar:** PLP desktop 左侧固定约 220px rail，窄宽度下折叠为 `Hide Filters` toggle button。

### Whitespace Philosophy
Whitespace 是 separation tool，不是 breath。Section 以 `{spacing.section}` rhythm 垂直相接，product photo 在 grid 内 edge-to-edge 平铺；product image 自身外没有 padding。"Air" 来自 photograph 的 `{colors.soft-cloud}` background，而不是 layout margin。Headline 上方没有装饰性留白，直接位于 section divider line 下。

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, no border | Card、button、section 的默认处理，也是主导处理。 |
| 1 — Hairline divider | 1px solid `{colors.hairline}` | Filter row separator、footer column border、PDP disclosure-row separator。 |
| 2 — Inset bottom-line | `box-shadow: inset 0 -1px 0 {colors.hairline-soft}` | Sticky utility/sub-nav bar bottom edge、tab strip underline。 |

Retail chrome 中完全没有 drop-shadow elevation。Card 不会从页面抬起。唯一 depth cue 是 sticky strip 上的 1px inset hairline，以及 full-bleed photography 与 `{colors.soft-cloud}` product backdrop 的对比。

### Decorative Depth
Nike 系统中的 depth 完全来自 photography，而不是 CSS effect：
- **Editorial campaign tiles** 通过 cinematic perspective 创造深度，如 trail runner 或 courtyard model，Futura display headline 以 white 或 `{colors.ink}` 直接覆盖在 image 上。
- **Product card photography** 在 flat `{colors.soft-cloud}` 上拍摄，去除背景深度，让 product 本身成为页面中唯一有形体的东西。
- **Sport-category tiles** 是 full-bleed cinematic photography，底部左侧锚定小的 `{component.button-outline-on-image}` pill，形成 atmospheric image 与 crisp white pill 的对比。

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Card、campaign tile、product imagery、navigation、footer，以及系统中每个 container。 |
| `{rounded.sm}` | 18px | Member-benefit lockup 中的 avatar / icon container。 |
| `{rounded.md}` | 24px | Search pill、search submit、filter input。 |
| `{rounded.lg}` | 30px | 每个 CTA pill：primary、secondary、on-image、filter chip、geo-selector、"Notify Me"。 |
| `{rounded.full}` | 9999px | Color swatch dot 与 circular icon button（back、share、favorite、carousel paddle）。 |

### Photography Geometry
- **Product cards:** 一致的 1:1 square 或 near-square（高裁切 product 约 4:5 portrait），card 内 full-bleed 无 padding，位于 `{colors.soft-cloud}` backdrop。
- **Editorial campaign hero:** 约 16:9 或更宽的 cinematic crop，在 content max-width 内 full-bleed，Futura display headline 压在左下或左上三分区。
- **Sport-category rail:** 4:5 portrait full-bleed thumbnail，底部左侧锚定小 CTA pill。
- **PDP main image:** square primary image，左侧有 vertical thumbnail rail（约 5–7 个小 thumbnail），便于不离开页面快速浏览 color/angle。
- **Avatar / category icon cards:** `{colors.canvas}` 上居中约 80–96px illustrated icon，下方是 `{typography.caption-md}` label。

## Components

> **No hover states documented** per system policy。每个 spec 只覆盖 Default 与 Active/Pressed；variant 作为 front matter 中独立 `components:` entry。

### Buttons

**`button-primary`** — 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)。
- 用于系统中每个 primary action："Sign Up"、"Notify Me"、"Buy"、"Türkiye" geo-confirm、sport tile 上的 "Shop" overlay、"Continue"。
- Pressed state 位于 `button-primary-active`；bg 保持 `{colors.ink}`，surface 缩小到 `scale(0.5)` 且 `opacity: 0.5`，这是 Nike 在五个页面中抽取出的 signature "tap collapse" feedback。

**`button-secondary`** — soft alternative on light surfaces
- Background `{colors.soft-cloud}`, text `{colors.ink}`, type `{typography.button-md}`, padding `16px 32px`, rounded `{rounded.lg}`。
- 当 primary CTA 已存在时作为 lower-emphasis alternate，如黑色 "Türkiye" confirm 旁的 "United States" geo-decline，或 light card 上的 "Cancel" / "Discover More"。

**`button-outline-on-image`** — overlay CTA on photography
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.lg}`。
- 锚定每个 full-bleed sport-category 与 editorial campaign tile 左下角的 crisp white pill。

**`button-icon-circular`** — chrome icon controls
- Background `{colors.soft-cloud}` 或 transparent，icon `{colors.ink}`, rounded `{rounded.full}`, size 40px。
- 用于 back-arrow、carousel paddle、wishlist heart、share、"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}`；选中时 chip 完全反转，没有中间状态。

### 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`。锚定在 primary nav 右侧，带小 magnifier icon。
- Focused: background `{colors.canvas}`, 2px solid border `{colors.ink}`，外层 12px halo 为 `{colors.soft-cloud}`。Pill shape 保持 `{rounded.md}`，让 halo 像 soft glove，而不是硬 outline。

### Cards & Containers

**`product-card`**
- Container: background `{colors.canvas}`, rounded `{rounded.none}`, padding 0, no shadow。
- Image area: `{component.product-card-image}`，在 `{colors.soft-cloud}` square 上的 full-bleed product photo。
- Image 下方按顺序排列：swatch dot row（3–6 个 12px circular dot）、可选 promo badge（`{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，各行间距 `{spacing.sm}`。
- Price row: regular price 使用 `{typography.body-strong}` `{colors.ink}`。Sale 时 discounted price 为 `{colors.sale}`，后接 strike-through original `{colors.mute}`，再接 `{colors.sale}` 的 "% off"。

**`campaign-tile`** — brand signature editorial unit
- Full-bleed photography，内嵌 `{typography.display-campaign}` headline（uppercase，96px，line-height 0.9）。
- Headline color 在 `{colors.canvas}` 与 `{colors.ink}` 中按底图可读性选择，不参数化。
- 单个 `{component.button-outline-on-image}` pill 锚定 tile 左下角承载 call-to-action。

**`category-icon-card`**
- Container: background `{colors.canvas}`, rounded `{rounded.none}`。
- 居中 category illustration（约 80px）+ 直接下方 label `{typography.caption-md}` `{colors.ink}`。用于 `/men` 的 "Latest in Clothing" 4–8-up icon strip。

**`member-benefit-card`**
- Dark image background 上的 full-bleed photographic card；左下角 copy slot 包含 `{typography.heading-lg}` headline `{colors.on-primary}` 与下方 `{component.button-outline-on-image}` "Explore" pill。
- 用于 `/membership` 的 "Member Benefits" 3-up grid。

**`swatch-dot`** + **`swatch-dot-active`**
- 12px circle，rounded `{rounded.full}`，default state 无 border。用于每个 product card 与 PDP color picker 的 colorway option。
- Default: 以 colorway 的真实 product color 填充（runtime 从 product image 提取）；白色/浅色 colorway 使用 `{colors.hairline}` 1px subtle outer ring 以便在 `{colors.canvas}` 上可见。
- Active: 相同 fill，加 2px `{colors.ink}` outer ring 与 2px white interior gap，形成 Nike signature concentric-ring selected state。Default 与 active 之间无 size change。

**`badge-promo`**
- Background `{colors.canvas}`，1px hairline `{colors.hairline}`，text `{colors.ink}`，type `{typography.caption-sm}`，rounded `{rounded.lg}`，padding `4px 12px`。
- 位于 product imagery 上方（card 左上角），copy 如 "Just In"、"Coming Soon"、"Recycled Materials"、"Member Exclusive"。

**`badge-sale-text`**
- Price row 内联 `{colors.sale}` 文本，无 background；这是系统中唯一没有 container 的 "badge"。

### Navigation

**`utility-bar`** — top utility strip
- Background `{colors.soft-cloud}`, text `{colors.ink}`, type `{typography.caption-sm}`, height 约 36px，rounded `{rounded.none}`。
- 右对齐 cluster: "Find a Store · Help · Join Us · Sign In"。始终存在，不折叠。

**`primary-nav`** — main navigation
- Background `{colors.canvas}`, text `{colors.ink}`, nav link 使用 `{typography.body-strong}`, height 56–64px，rounded `{rounded.none}`。
- Layout: 左侧 Nike swoosh logo（32×32），中间 nav row（"New & Featured · Men · Women · Kids · Jordan · Nike SKIMS · Sport"），右侧 cluster（search pill、wishlist heart icon、bag icon）。
- Active section 使用 `{colors.ink}` 2px bottom underline，无 background fill。

**Sub-nav strip** (PLP) — primary nav 下方的 breadcrumb + sort + hide-filters control。
- 同样 `{colors.canvas}` background，底部 1px inset hairline-soft。
- 左侧：`{typography.caption-md}` `{colors.mute}` breadcrumb，用 " / " 分隔。
- 右侧："Hide Filters" toggle + "Sort By: …" dropdown，均使用 `{typography.button-md}` 与 chevron icon。

**Top Nav (Mobile)**
- 左侧 hamburger menu icon，中间 Nike swoosh，右侧 search + bag icon。
- 窄宽度下 search pill 折叠为 icon-only button；点击后展开 full-width overlay search pill，使用 `{rounded.md}`。
- Primary nav 折叠为从左侧滑入的 full-height drawer，nav row 自上而下排列，并使用 `{spacing.xl}` vertical padding。

### Signature Components

**`pdp-disclosure-row`** — PDP information accordion rows
- "View Product Details"、"Shipping & Returns"、"Reviews (n)" 堆叠为 row，每行 `{spacing.xl}` vertical padding，下方 1px `{colors.hairline}` divider。
- Label 使用 `{typography.body-strong}` `{colors.ink}` 左对齐；chevron `{colors.ink}` 右对齐。

**`faq-row`** — `/membership` FAQ accordion
- 与 `pdp-disclosure-row` 模式相同，但 label weight 为 `{typography.heading-md}`；每行下方 1px `{colors.hairline}` divider。

**`filter-sidebar`** — PLP left rail
- Container `{colors.canvas}`, rounded `{rounded.none}`。
- Section header 使用 `{typography.body-strong}` `{colors.ink}`，group 之间 `{spacing.lg}` (18px) vertical gap。
- Active filter 使用 1px ink underline；括号内 count 使用 `{colors.mute}`。

**`footer`**
- Background `{colors.canvas}`，顶部单条 1px `{colors.hairline}` divider。
- 四列：Resources / Help / Company / Promotions & Discounts；column header 使用 `{typography.body-strong}` `{colors.ink}`，link list 使用 `{typography.caption-md}` `{colors.mute}`。
- Column 下方为 horizontal rule，然后是 `{typography.utility-xs}` `{colors.mute}` fine-print row（copyright、locale switcher、terms、privacy、supply-chain act）。

## Do's and Don'ts

### Do
- 将 `{typography.display-campaign}` 只保留给 editorial campaign hero lockup；不要把 96px Futura 用于 section header 或 product title。
- 每个 viewport 使用一个 `{component.button-primary}`（`{colors.ink}` pill）作为 single primary action；最多与 `{component.button-secondary}`（`{colors.soft-cloud}` pill）配对作为 soft alternative。
- 每张 product photograph 都放在 `{colors.soft-cloud}` 上；这个灰色就是系统的 "studio"。
- 所有 CTA 都保持 `{rounded.lg}` (30px) pill shape，绝不引入 square 或 `{rounded.sm}` button。
- `{colors.sale}` 只用于 price row，不用于 background、badge 或 chrome。
- Content section 按 `{spacing.section}` (48px) rhythm 堆叠，section 间不加 decorative divider；photography 的 bleed-edge 就是 divider。
- On-image CTA 使用 `{component.button-outline-on-image}`（white pill）锚定在左下角，这是系统通用的 "shop this image" 位置。

### Don't
- 不要引入 drop shadow 或 card elevation。Card 平铺在页面上；唯一 depth cue 是 sticky bar 上的 1px inset hairline。
- 不要把 category accent color（`{colors.accent-pink}`、`{colors.accent-purple-soft}`、`{colors.accent-teal}`）用于 primary chrome；它们只属于 swatch dot、soft tile fill、editorial moment。
- 不要用 `{colors.charcoal}` 等 near-black gray 替代 CTA 的 `{colors.ink}`；Nike primary pill 是 true `#111111`。
- 不要给 product card 内部加 padding。Image full-bleed，metadata 直接在下方，每行间 `{spacing.sm}` (8px)。
- 不要在同一 row 里放两个同 scale 的 campaign-tile lockup；Nike 会在单个 full-bleed editorial tile 与 2-up / 4-up product/category grid 之间交替。
- 除 `{typography.link-md}` inline link 与 active primary-nav indicator 外，不要 underline；button、heading、price 均不 underline。
- 不要引入第三种 button shape。Pill 或 icon-circular，就是完整 vocabulary。

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width 保持约 1440px；outer gutter 每侧增长到约 80px。 |
| desktop-large | 1440px | 默认 desktop layout：3-up product grid、4-up clothing strip、完整 primary nav。 |
| desktop | 1200px | 与 large 相同，但 outer gutter 更窄。 |
| desktop-small | 1024px | Filter sidebar 开始压缩；sport rail 约显示 3 个 tile。 |
| tablet | 1023–961px | 3-up PLP 折叠到 2-up；"Hide Filters" 成为默认 toggle。 |
| tablet-narrow | 960–640px | Primary nav 中间 cluster 折叠为 hamburger drawer；search pill 变成 icon-only。 |
| mobile-landscape | 639–600px | 2-up PLP 折叠到 1-up；product card full-width，image 与 metadata 堆叠。 |
| mobile | 599–320px | 所有内容 single-column；campaign tile 以 full screen width 渲染，Futura size 降低到约 64px。 |

### Touch Targets
所有 interactive element 满足 WCAG AAA（44×44px minimum）。Pill（`{component.button-primary}`、`{component.button-secondary}`）高 48px，水平 padding 32px。Icon-circular button（`{component.button-icon-circular}`）为 40px；Nike 的 PDP carousel paddle 与 wishlist heart 视觉上略低于 AAA 但高于 AA，hit-target padding 将可点击区域扩展到 48px+。Filter-chip pill 高 40px，padding 16px。

### Collapsing Strategy
- **Primary nav:** desktop center cluster -> mobile drawer，由 swoosh 左侧 hamburger 触发。
- **PLP grid:** 3-up -> 2-up -> 1-up，断点为 1023、599 及以下；mobile gutter 从 `{spacing.sm}` 降到 `{spacing.xs}`。
- **Filter sidebar:** 220px fixed -> "Hide Filters" toggle -> mobile off-canvas full-screen filter drawer。
- **Sport rail:** desktop horizontal scroll 约 5 个可见 -> mobile horizontal scroll 约 1.5 个可见（peek-next-card pattern）。
- **Section spacing:** `{spacing.section}` 48px desktop -> 32px tablet -> 24px mobile，让小屏 editorial rhythm 更紧。
- **Editorial campaign headline:** desktop 96px -> tablet 64px -> mobile 48px，line-height 始终 0.9。

### Image Behavior
- Product imagery 在所有 breakpoint 中保持相同 1:1 ratio；image scale 变化，ratio 不变。
- Editorial campaign tile 使用 art-direction crop：desktop 的 16:9 wide hero 在 mobile 切换为 4:5 portrait，确保 figure 居中且 headline 仍有 burn-in space。
- 所有非关键 product imagery 在用户滚动到下一 grid row 时 lazy-load。

## Iteration Guide

1. 一次只关注 ONE component。从 front matter 拉取它的 YAML entry，并确认每个 property 都能 resolve。
2. 直接引用 component name 与 token（`{colors.ink}`、`{component.button-primary-active}`、`{rounded.lg}`），不要在 prose 中改写 color name 或 radius。
3. 编辑后运行 `npx @google/design.md lint DESIGN.md`；`broken-ref`、`contrast-ratio`、`orphaned-tokens` warning 会自动标出问题。
4. 新 variant 作为独立 component entry 添加（`-active`、`-disabled`、`-focused`），不要埋在 prose 中。Nike 的 pressed state（`scale(0.5) opacity 0.5`）是有意设计，必须是自己的 entry，不是 hover stand-in。
5. Default body 使用 `{typography.body-md}`；product name 与 primary nav link 使用 `{typography.body-strong}`；`{typography.display-campaign}` 严格保留给 hero campaign lockup。
6. 每个 viewport 中保持 `{colors.ink}` 稀缺；如果同一 fold 中出现多个 solid-black pill 或 block，应将其中一个 neutralize 为 `{component.button-secondary}` 或 `{component.button-outline-on-image}`。
7. 引入新 component 前，先判断它是否能用既有 pill + flat-card + photography-on-`{colors.soft-cloud}` vocabulary 表达。系统强度在于几乎不需要新 token。

## Known Gaps

- **Mobile screenshots not captured** — 上述 responsive behavior 基于 desktop evidence 与 token 中提取的 breakpoint list，综合 Nike 已知 mobile pattern（hamburger drawer、1-up grid、headline downscale）。
- **Hover states not documented** by system policy — Nike CSS 使用 `--pds-color-element-hover` 与 `--pds-color-text-hover` token，但这里未包含。
- **Dialog / modal styling** 除 geo-selector 与 country-confirmation pill pair 外未确认；bag、wishlist、login overlay 未记录。
- **Form field styling** for checkout、sign-up、address form 未出现在捕获 surface 中；这里只记录 search pill。
- **Bag and wishlist** icon-state variant（filled count badge）在捕获页面中不可见。