耐克 Nike

version: alpha name: Nike-design-analysis 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.

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"

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

rounded: none: 0px sm: 18px md: 24px lg: 30px full: 9999px

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}"

概述

Nike 的电商系统建立在一个近乎暴力的简单理念之上：让产品摄影说话，框架本身保持沉默。每一页都像一本运动刊物——高大的全大写 Futura 显示文字（{typography.display-campaign}）直接烧印在满幅的活动大片上，而其他一切（导航、筛选、按钮、卡片、页脚）则简化为中性的字体排版与药丸状几何形态，铺陈在 {colors.canvas} 与 {colors.soft-cloud} 上。系统中没有任何装饰性渐变、没有对柔光阴影的怀旧，也没有用点缀色去营造"调性"——所有色彩能量都被保留给产品摄影，以及少数真正需要发出信号的瞬间（促销价 {colors.sale}、成功提示 {colors.success}、色卡圆点）。

最终呈现出的是一种具有"物质感"的布局——活动首屏、产品网格、运动分类卡片、页脚——像印刷的型录一样层层堆叠，而非典型的 SaaS 落地页那样动效飞舞。信息密度高却不显拥挤，因为系统依赖三种近乎偏执的手法：铺在 {colors.soft-cloud} 上的 1:1 或近 1:1 产品图，作为锚点的药丸形黑色 CTA（{rounded.full}），以及一个紧凑的 8px 基础间距尺度，让卡片与筛选器在 PLP、PDP 和编辑型页面上保持数学级对齐。

无论在 /men、越野跑列表页、Zegama PDP、/membership 还是 Jordan Golf 上，相同的框架以完全一致的比例出现——只有摄影和文案在变。这正是系统的标志：在画面上做最大的编辑表达，在其他所有地方做最大的机制克制。

核心特征：

• 编辑型活动首屏使用 {typography.display-campaign}（Nike Futura ND，96px，行高 0.9，全大写）直接烧印在满幅大片上
• 纯黑/纯白/单一灰色 UI 配色：{colors.ink}、{colors.canvas} 与 {colors.soft-cloud} 承担约 95% 的框架面积
• 处处都是药丸几何：每个 CTA、搜索框、筛选芯片、徽标都使用 {rounded.full}（30px）或 {rounded.md}（24px）——系统中不存在直角按钮
• 产品卡片零圆角、零阴影，直接落在 {colors.soft-cloud} 色板背景上——照片本身就是卡片
• 双调 CTA 层级：{component.button-primary}（在浅色上的黑色）与 {component.button-secondary}（在亮色上的 {colors.soft-cloud}）——同一表面上绝不会同时出现
• 8px 间距系统，段落节奏为 {spacing.section}（48px），在 PLP、PDP 与编辑型页面上保持一致的纵向呼吸
• 在零售框架里，唯一的非中性色就是促销信号：原价加删除线、折后 {colors.sale}、加 % off 文案——没有任何徽标底色

配色

来源页面： /men（主页面）、/w/mens-acg-trail-running-shoes-…、/t/acg-zegama-…、/membership、/w/jordan-golf-…。五个页面的框架配色完全一致——只有摄影在变。

品牌与点缀

• Nike 黑（{colors.ink} — #111111）：品牌唯一的"颜色"。它是主 CTA、色卡圆点、激活态筛选芯片、活动叠加层、标题色以及正文字色。Nike 想强调什么，就用黑色。
• 纯白（{colors.on-primary}、{colors.canvas} — #ffffff）：与黑色对等重要。承担所有页面背景、图上 CTA，以及在 {colors.ink} 表面上的反色文字。

表面

• Soft Cloud（{colors.soft-cloud} — #f5f5f5）：整个系统中使用最多的非白色表面。产品卡片图像背景、搜索药丸、次级 CTA、工具栏、运动分类色块卡片。它是每张产品照片"舞台"的颜色。
• Hairline（{colors.hairline} — #cacacb）：筛选行、页脚栏与 PDP 披露行之间的 1px 分隔线。
• Hairline Soft（{colors.hairline-soft} — #e5e5e5）：吸顶栏与标签条下沿的 1px 内阴影，是系统唯一的"阴影"用法。

文字

• Ink（{colors.ink} — #111111）：浅色表面的主要文字——标题、品名、价格、导航。
• Charcoal（{colors.charcoal} — #39393b）：在 Ink 偏重时稍软的正文色。
• Ash（{colors.ash} — #4b4b4d）：深色表面上的禁用次级边框，以及极低优先级的工具文字。
• Mute（{colors.mute} — #707072）：产品品类副标题（如 "Men's Trail Running Shoes"）、页脚链接文字、次级元数据。
• Stone（{colors.stone} — #9e9ea0）：深色表面上的反色次级文字，最低优先级的工具文字。

语义色

• Sale（{colors.sale} — #d30005）：折后价颜色与 "% off" 文案——整个零售框架中唯一的红色。
• Sale Deep（{colors.sale-deep} — #780700）：折后价的悬停/按下态，以及暗色模式下的促销锚点色。
• Success（{colors.success} — #007d48）：确认消息、有货指示、资格勾选。
• Success Bright（{colors.success-bright} — #1eaa52）：在深色表面上的反色成功提示。
• Info（{colors.info} — #1151ff）：会员体验横幅中的信息链接/徽标点缀色。
• Info Deep（{colors.info-deep} — #0034e3）：Info 点缀色的按下态。

分类点缀（运动 / 系列芯片）

这些颜色出现得极为克制——几乎只作为小芯片底色、色卡圆点或编辑型卡片中的分类插画。它们从不会被用于文字或主 CTA。

• Accent Pink（{colors.accent-pink} — #ed1aa0）：SKIMS / 女性系列相关场景。
• Accent Pink Soft（{colors.accent-pink-soft} — #ffb0dd）：会员体验卡片的柔和底色。
• Accent Purple Soft（{colors.accent-purple-soft} — #beaffd）：编辑型色卡圆点、柔和分类芯片。
• Accent Purple Pale（{colors.accent-purple-pale} — #d6d1ff）：最浅的柔和色块底色。
• Accent Teal（{colors.accent-teal} — #0a7281）：越野 / 户外 / ACG 编辑型标题中的点缀色。
• Accent Pink Deep（{colors.accent-pink-deep} — #4c012d）：最深的编辑型叠加色调，用作 Heritage / Jordan 卡片的底色。

字体排版

字体家族

• Nike Futura ND（仅用于活动首屏显示）——专有的几何无衬线字体，用于直接烧印在活动首屏摄影上的高耸全大写标题。回退到 Helvetica Now Text Medium → Helvetica → Arial。
• Helvetica Now Display Medium（标题 16–32px）——为展示尺寸调校过的现代 Helvetica 切割；承担所有区块标题、PDP 品名和对话框标题。
• Helvetica Now Text Medium（UI 12–16px）——按钮、说明文字、色卡标签、徽标文字。系统的 UI 主力。
• Helvetica Now Text（正文与链接）——长文本正文与带下划线的行内链接。
• Neue Frutiger Arabic——阿拉伯语地区的 RTL 配对字体，用于 {typography.heading-lg} 与说明文字尺寸。
• Helvetica Neue 9px——仅用于法律小字行的工具栏文字（{typography.utility-xs}）。

在没有 Nike 专有字体的系统上替换时：将 Inter（Display 700 用于正文框架，Display 500 用于按钮）与 Bebas Neue 或 Anton 配对，活动首屏标题层级使用 96px/0.9 行高。替换字体时可将字距略微收紧（-0.5%），以贴近 Futura ND 的视觉重量。

层级

设计原则

系统建立在极端的字体对比之上：一个 96px 全大写的展示层级专门留给编辑型活动瞬间，另一个安静的 12–16px Helvetica Now Text/Medium 层级承担其他所有内容。中间几乎没有过渡——从 {typography.heading-xl}（32px）直接跳到 {typography.body-strong}（16px）是有意为之，制造出"上方是广告牌，下方是型录"的视觉效果，贯穿每一页。字距保持为 0（Futura ND 与 Helvetica Now 都是为大尺寸下紧密视觉贴合而设计的字体）。

字体替换说明

最接近 Nike 展示层级的开源替代是 Bebas Neue（免费、几何压缩体），使用 96px / 0.9 / 全大写 / 500。UI 文字方面，Inter 是最安全的替代——匹配 400/500 字重后，按钮与说明文字的呈现几乎一致。

布局

间距系统

• 基础单位： 8px
• Token（前置元数据）： {spacing.xxs}（2px）· {spacing.xs}（4px）· {spacing.sm}（8px）· {spacing.md}（12px）· {spacing.lg}（18px）· {spacing.xl}（24px）· {spacing.xxl}（30px）· {spacing.section}（48px 及以上）
• 统一节奏： 每套页面都以 {spacing.section}（48px）作为主要内容块之间的纵向间距（活动首屏 → 趋势行 → 精选行 → 按运动选购 → 最新服装 → 页脚）。PLP 卡片网格使用 {spacing.sm}（8px）作为列间距。PDP 披露行以 {spacing.xl}（24px）的纵向内边距堆叠。
• 卡片内部内边距： 产品卡片使用 0px 内边距——图片满幅展示；元数据行直接排在下方，名称、副标题与价格之间以 {spacing.sm}（8px）分隔。

网格与容器

• 最大宽度： 内容区域约 1440px，在 1920px 下边缘留白增至约 80px（系统倾向于让极宽视口留出呼吸，而非撑满）。
• 列模式： PLP 列表在桌面端使用 3 列，在 1023px 时折叠为 2 列，在 599px 时折叠为 1 列。男士主页 /men 则混合了 2 列活动首屏、3 或 4 列的 "Trending Now" 行、横向滚动的 "Shop by Sport" 轨道以及 4 列的 "Latest in Clothing" 缩略图网格。
• 筛选侧栏： 桌面端 PLP 上的约 220px 固定宽度左侧栏，在窄屏下折叠为 Hide Filters 切换按钮。

留白哲学

留白是分隔的工具，而非呼吸的奢侈。各区块以 {spacing.section} 的节奏直接纵向相接，产品照片在网格内逐边相接——产品图像本身不包裹任何内边距。"空气感"来自于照片的 {colors.soft-cloud} 背景，而非布局的外边距。标题上方不留装饰性空白；它们紧贴在区块分隔线之下。

层次与深度

系统在零售框架中完全没有使用 drop-shadow 层次。卡片在页面上不会"浮起"。唯一的深度线索是吸顶条上的 1px 内嵌细线，以及满幅摄影与 {colors.soft-cloud} 产品背景之间的对比。

装饰性深度

Nike 系统中的深度完全来自摄影，而非 CSS 效果：

• 编辑型活动卡片通过电影化的视角营造深度——如跑者在山间小径、模特在庭院中——并将 Futura 展示标题以白色或 {colors.ink} 直接覆盖在图像上。
• 产品卡片摄影在扁平的 {colors.soft-cloud} 上拍摄，以消除任何背景深度，使产品本身成为页面上唯一具有形态的元素。
• 运动分类卡片在主页上是满幅的电影化摄影，左下角锚定一颗小型 {component.button-outline-on-image} 药丸，在氛围化图像上提供清晰的白色药丸瞬间。

形状

圆角尺度

摄影几何

• 产品卡片： 一致的 1:1 正方形或近正方形（高挑产品约 4:5 竖图），在卡片内满幅展示，无内边距，落在 {colors.soft-cloud} 背景上。
• 编辑型活动首屏： 约 16:9 或更宽的电影化裁切，在内容最大宽度内满幅，Futura 展示标题烧印在左下或左上三分之一区域。
• 运动分类轨道： 4:5 竖图满幅缩略图，左下角锚定一颗小型 CTA 药丸。
• PDP 主图： 方形主图，左侧为竖向缩略图栏（约 5–7 张小尺寸堆叠），便于快速浏览颜色/角度而无需离开页面。
• 头像/分类图标卡片： 居中插画图标约 80–96px，置于 {colors.canvas} 上，下方为 {typography.caption-md} 标签。

组件

根据系统策略，未记录 hover 状态。每个规范只涵盖默认与激活/按下态；变体作为独立的 components: 条目存在于前置元数据中。

按钮

button-primary —— 通用的 Nike CTA

• 背景 {colors.ink}，文字 {colors.on-primary}，字体 {typography.button-md}，内边距 16px 32px，高度 {spacing.section}（48px），圆角 {rounded.lg}（30px 药丸）。
• 用于系统中每一个主操作："Sign Up"、"Notify Me"、"Buy"、"Türkiye" 地域确认、运动卡片上的 "Shop" 浮层、"Continue"。
• 按下态存在于 button-primary-active——背景保持 {colors.ink}，但表面收缩为 scale(0.5) 并以 opacity: 0.5 显示（Nike 标志性的"点击塌缩"反馈，从五个页面中均被提取到）。

button-secondary —— 浅色表面上的柔和替代

• 背景 {colors.soft-cloud}，文字 {colors.ink}，字体 {typography.button-md}，内边距 16px 32px，圆角 {rounded.lg}。
• 当主 CTA 已存在时作为较低强调度的备选，例如黑色 "Türkiye" 确认旁的 "United States" 地域拒绝；浅色卡片上的 "Cancel" 或 "Discover More"。

button-outline-on-image —— 摄影之上的浮层 CTA

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.button-md}，内边距 12px 24px，圆角 {rounded.lg}。
• 锚定在每个满幅运动分类和编辑型活动卡片左下角的清晰白色药丸。

button-icon-circular —— 框架图标控件

• 背景 {colors.soft-cloud} 或透明，图标 {colors.ink}，圆角 {rounded.full}，尺寸 40px。
• 用于返回箭头、轮播拨片（左右）、心愿单爱心、分享和 "Hide Filters" 切换。

filter-chip + filter-chip-active

• 默认：背景 {colors.canvas}，文字 {colors.ink}，1px 细线 {colors.hairline}，字体 {typography.button-md}，圆角 {rounded.lg}，内边距 8px 16px。
• 激活：背景 {colors.ink}，文字 {colors.on-primary}——选中后芯片完全反色。无中间态。

输入与表单

search-pill + search-pill-focused

• 默认：背景 {colors.soft-cloud}，文字 {colors.ink}，字体 {typography.body-md}，圆角 {rounded.md}（24px），内边距 8px 16px，高度 40px。锚定在主导航右侧，带一个小型放大镜图标。
• 聚焦：背景 {colors.canvas}，2px 实心边框 {colors.ink}，外层带 12px {colors.soft-cloud} 光晕（系统唯一的"聚焦环"效果）。药丸形态保持 {rounded.md}，使光晕读起来像一只柔软的手套，而非硬质描边。

卡片与容器

product-card

• 容器：背景 {colors.canvas}，圆角 {rounded.none}，内边距 0，无阴影。
• 图像区：{component.product-card-image}——铺在 {colors.soft-cloud} 方形背景上的满幅产品照片。
• 图像下方（按此顺序排列，每行间隔 {spacing.sm}）：色卡圆点行（3–6 个 12px 圆形圆点）、适用的促销徽标（{component.badge-promo} 如 "Just In"、"Coming Soon"、"Recycled Materials"）、品名 {typography.body-strong} {colors.ink}、品类副标题 {typography.caption-md} {colors.mute}、价格行。
• 价格行：常规价 {typography.body-strong} {colors.ink}。若促销：折后价 {colors.sale} 后接带删除线的原价 {colors.mute}，再后接 {colors.sale} 的 "% off"。

campaign-tile —— 品牌标志性的编辑型单元

• 满幅摄影，叠加 {typography.display-campaign} 标题（全大写、96px、行高 0.9）。
• 标题颜色根据底层图像的可读性，从 {colors.canvas} 或 {colors.ink} 中选择——不作为参数化处理；按素材逐个决定。
• 卡片左下角锚定一颗 {component.button-outline-on-image} 药丸承担行动号召。

category-icon-card

• 容器：背景 {colors.canvas}，圆角 {rounded.none}。
• 居中的分类插画（约 80px）+ 紧贴下方的标签 {typography.caption-md} {colors.ink}。用于 /men 上的 "Latest in Clothing" 4–8 列图标条。

member-benefit-card

• 满幅摄影卡片，深色图像背景；左下角文案槽位包含 {typography.heading-lg} 标题 {colors.on-primary}，下方是 {component.button-outline-on-image} "Explore" 药丸。
• 用于 /membership 的 "Member Benefits" 3 列网格。

swatch-dot + swatch-dot-active

• 12px 圆，圆角 {rounded.full}，默认无边框。在每个产品卡片与 PDP 颜色选择器上呈现颜色选项。
• 默认：以该颜色方案的实际产品色填充（运行时从产品图像中提取），对白色/浅色色板增加 1px {colors.hairline} 浅外环，使其在 {colors.canvas} 上仍然可见。
• 激活：相同填充，外加 2px {colors.ink} 外环和 2px 白色内间隔，形成 Nike 标志性的同心环"已选"状态。默认与激活之间没有尺寸变化。

badge-promo

• 背景 {colors.canvas}，1px 细线 {colors.hairline}，文字 {colors.ink}，字体 {typography.caption-sm}，圆角 {rounded.lg}，内边距 4px 12px。
• 置于产品图像之上（卡片左上角），文案如 "Just In"、"Coming Soon"、"Recycled Materials"、"Member Exclusive"。

badge-sale-text

• 价格行中的行内 {colors.sale} 文字，无背景——系统中唯一没有容器的"徽标"。

导航

utility-bar —— 顶部工具栏

• 背景 {colors.soft-cloud}，文字 {colors.ink}，字体 {typography.caption-sm}，高度约 36px，圆角 {rounded.none}。
• 右对齐组合："Find a Store · Help · Join Us · Sign In"。始终存在，从不折叠。

primary-nav —— 主导航

• 背景 {colors.canvas}，文字 {colors.ink}，导航链接字体 {typography.body-strong}，高度 56–64px，圆角 {rounded.none}。
• 布局：左侧 Nike swoosh 标志（32×32），居中导航行（"New & Featured · Men · Women · Kids · Jordan · Nike SKIMS · Sport"），右侧组合（搜索药丸、心愿单爱心图标、购物袋图标）。
• 当前选中区块获得 2px 底部下划线，颜色为 {colors.ink}——无背景填充。

Sub-nav 条（PLP）—— 出现在主导航之下，包含面包屑 + 排序 + 隐藏筛选控件。

• 相同 {colors.canvas} 背景，底部带 1px 内嵌 hairline-soft 边缘。
• 左侧：面包屑 {typography.caption-md} {colors.mute} 以 " / " 分隔。
• 右侧："Hide Filters" 切换 + "Sort By: …" 下拉菜单——均为 {typography.button-md} 配雪佛龙图标。

移动端顶部导航

• 汉堡菜单图标（左）、Nike swoosh（中）、搜索 + 购物袋图标（右）。
• 搜索药丸在窄屏下折叠为仅图标的按钮；点击后展开为全宽覆盖式搜索药丸，使用 {rounded.md}。
• 主导航折叠为从左侧滑入的全高抽屉，导航行自上而下排列，纵向内边距 {spacing.xl}。

标志性组件

pdp-disclosure-row —— PDP 信息手风琴行

• "View Product Details"、"Shipping & Returns"、"Reviews (n)" 等堆叠行，纵向内边距 {spacing.xl}，每行下方有 1px {colors.hairline} 分隔线。
• 标签 {typography.body-strong} {colors.ink} 左对齐；雪佛龙 {colors.ink} 右对齐。

faq-row —— /membership FAQ 手风琴

• 与 pdp-disclosure-row 模式相同，但标签字重使用 {typography.heading-md}；每行下方有 1px {colors.hairline} 分隔线。

filter-sidebar —— PLP 左侧栏

• 容器 {colors.canvas}，圆角 {rounded.none}。
• 区块标题 {typography.body-strong} {colors.ink}，组之间垂直间距 {spacing.lg}（18px）。
• 激活筛选带 1px 黑色下划线；括号中的计数使用 {colors.mute}。

footer

• 背景 {colors.canvas}，顶部带 1px {colors.hairline} 分隔线。
• 四栏：Resources / Help / Company / Promotions & Discounts，每栏标题 {typography.body-strong} {colors.ink}，链接列表 {typography.caption-md} {colors.mute}。
• 栏目下方：水平分隔线，然后是 {typography.utility-xs} {colors.mute} 的小字行（版权、地域切换、条款、隐私、供应链法案）。

推荐与避免

推荐

• 将 {typography.display-campaign} 专门留给编辑型活动首屏标题——永远不要将 96px Futura 用于区块标题或品名。
• 每个视口使用 {component.button-primary}（{colors.ink} 药丸）作为唯一主操作。最多与 {component.button-secondary}（{colors.soft-cloud} 药丸）配对作为柔和的备选。
• 将每张产品摄影都搭建在 {colors.soft-cloud} 上——这种灰色就是系统的"影棚"。
• 所有 CTA 保持 {rounded.lg}（30px）药丸形态。永远不要引入方形或 {rounded.sm} 按钮。
• 仅在价格行使用 {colors.sale}——绝不用于背景、徽标或框架。
• 内容区块以 {spacing.section}（48px）的节奏堆叠，区块之间无装饰性分隔；摄影的出血边缘本身就是分隔线。
• 在图像上的 CTA 用 {component.button-outline-on-image}（白色药丸）锚定在左下角——这是系统通用的"购买此图"位置。

避免

• 不要引入 drop-shadow 或卡片层次。卡片平铺在页面上；唯一的深度线索是吸顶栏上的 1px 内嵌细线。
• 不要将任何分类点缀色（{colors.accent-pink}、{colors.accent-purple-soft}、{colors.accent-teal}）用于主要框架——它们只属于色卡圆点、柔和色块和编辑瞬间。
• 不要在 CTA 中将 {colors.ink} 替换为接近黑色的灰色（如 {colors.charcoal}）——Nike 的主药丸就是真正的 #111111。
• 不要在产品卡片内部留内边距。图片满幅；元数据直接排在下方，行间间隔 {spacing.sm}（8px）。
• 不要在同一行同一尺度上并列两个活动卡片标题——Nike 是用单张满幅编辑卡与 2 列或 4 列产品/分类网格交错。
• 除 {typography.link-md} 行内链接和主导航当前激活指示器之外，不要给任何东西加下划线。按钮、标题、价格保持无下划线。
• 不要引入第三种按钮形状。药丸或圆形图标——这就是全部的按钮形态词汇。

响应式行为

断点

触控目标

所有交互元素均满足 WCAG AAA（最小 44×44px）。药丸（{component.button-primary}、{component.button-secondary}）高度 48px，水平内边距 32px。圆形图标按钮（{component.button-icon-circular}）为 40px——Nike 的 PDP 轮播拨片与心愿单爱心刚好低于 AAA 但高于 AA，为 40×40，通过命中目标内边距将可点区域延伸至 48px 以上。筛选芯片药丸高度 40px，内边距 16px。

折叠策略

• 主导航： 桌面端中部集群 → 移动端由 swoosh 左侧的汉堡触发的抽屉。
• PLP 网格： 3 列 → 2 列 → 1 列，在 1023、599 及以下断点；列间距在移动端从 {spacing.sm} 降至 {spacing.xs}。
• 筛选侧栏： 220px 固定 → "Hide Filters" 切换 → 移动端画布外全屏筛选抽屉。
• 运动轨道： 桌面端水平滚动约可见 5 张 → 移动端水平滚动约可见 1.5 张（"窥视下一张"模式）。
• 区块间距： {spacing.section} 48px 桌面 → 32px 平板 → 24px 移动，让编辑节奏在小屏上保持紧凑。
• 编辑型活动标题： 桌面 96px → 平板 64px → 移动 48px，行高始终保持 0.9。

图像行为

• 产品图像在所有断点上保持相同的 1:1 比例响应——图像缩放但比例不变。
• 编辑型活动卡片使用艺术指导裁切：桌面端的 16:9 宽幅首屏在移动端切换为 4:5 竖图，使主体居中且标题仍有烧印空间。
• 所有非关键产品图像在用户滚动到下一网格行时延迟加载。

迭代指南

1. 一次只聚焦一个组件。从前置元数据中提取其 YAML 条目，验证每个属性是否能解析。
2. 直接引用组件名称与 token（如 {colors.ink}、{component.button-primary-active}、{rounded.lg}）——不要在正文中改述颜色名或圆角。
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 与 orphaned-tokens 警告会自动标记问题。
4. 将新变体作为独立组件条目（-active、-disabled、-focused）添加——不要将其埋入正文。Nike 的按下态（scale(0.5) opacity 0.5）是有意为之，必须独立成条，而非 hover 的代用品。
5. 正文默认使用 {typography.body-md}；品名与主导航链接使用 {typography.body-strong}；{typography.display-campaign} 仅用于首屏活动标题。
6. 让 {colors.ink} 在每个视口中保持稀缺——同一屏如果出现一个以上的纯黑药丸或色块，将其之一中和为 {component.button-secondary} 或 {component.button-outline-on-image}。
7. 在引入新组件时，先问它能否用现有的药丸 + 平面卡片 + {colors.soft-cloud} 上的摄影这套词汇表达，再考虑新增 token。系统的优势就在于几乎从不需要新 token。

已知缺口

• 未捕获移动端截图——上述响应式行为综合自 Nike 已知的移动模式（汉堡抽屉、1 列网格、标题缩小），来源于桌面端证据与从 token 中提取的断点列表。
• Hover 状态未按系统策略记录——Nike 的 CSS 使用 --pds-color-element-hover 与 --pds-color-text-hover token，但此处未包含。
• 对话框/弹层样式——除地域选择器与国家确认药丸对外，无法从已捕获的表面上确认；购物袋、心愿单与登录浮层均未记录。
• 结账、注册与地址表单的表单字段样式在已捕获的表面中不存在——仅记录了搜索药丸。
• 购物袋与心愿单的图标状态变体（带数字徽标的填充态）在已捕获页面中不可见。