苹果 Apple

version: alpha name: Apple-design-analysis description: A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color. UI chrome recedes so the product can speak — no decorative gradients, no shadows on chrome, only the one signature drop-shadow under product imagery resting on a surface.

colors: primary: "#0066cc" primary-focus: "#0071e3" primary-on-dark: "#2997ff" ink: "#1d1d1f" body: "#1d1d1f" body-on-dark: "#ffffff" body-muted: "#cccccc" ink-muted-80: "#333333" ink-muted-48: "#7a7a7a" divider-soft: "#f0f0f0" hairline: "#e0e0e0" canvas: "#ffffff" canvas-parchment: "#f5f5f7" surface-pearl: "#fafafc" surface-tile-1: "#272729" surface-tile-2: "#2a2a2c" surface-tile-3: "#252527" surface-black: "#000000" surface-chip-translucent: "#d2d2d7" on-primary: "#ffffff" on-dark: "#ffffff"

typography: hero-display: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 600 lineHeight: 1.07 letterSpacing: -0.28px display-lg: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0 display-md: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 34px fontWeight: 600 lineHeight: 1.47 letterSpacing: -0.374px lead: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 1.14 letterSpacing: 0.196px lead-airy: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 24px fontWeight: 300 lineHeight: 1.5 letterSpacing: 0 tagline: fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif" fontSize: 21px fontWeight: 600 lineHeight: 1.19 letterSpacing: 0.231px body-strong: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 600 lineHeight: 1.24 letterSpacing: -0.374px body: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.47 letterSpacing: -0.374px dense-link: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 2.41 letterSpacing: 0 caption: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: -0.224px caption-strong: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.29 letterSpacing: -0.224px button-large: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0 button-utility: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.29 letterSpacing: -0.224px fine-print: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.12px micro-legal: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.3 letterSpacing: -0.08px nav-link: fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.12px

rounded: none: 0px xs: 5px sm: 8px md: 11px lg: 18px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 17px lg: 24px xl: 32px xxl: 48px section: 80px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 11px 22px button-primary-focus: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-primary-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-secondary-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 11px 22px button-dark-utility: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-utility}" rounded: "{rounded.sm}" padding: 8px 15px button-pearl-capsule: backgroundColor: "{colors.surface-pearl}" textColor: "{colors.ink-muted-80}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 8px 14px button-store-hero: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.pill}" padding: 14px 28px button-icon-circular: backgroundColor: "{colors.surface-chip-translucent}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 44px text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body}" text-link-on-dark: backgroundColor: transparent textColor: "{colors.primary-on-dark}" typography: "{typography.body}" global-nav: backgroundColor: "{colors.surface-black}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 44px sub-nav-frosted: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.tagline}" height: 52px product-tile-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-parchment: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-dark: backgroundColor: "{colors.surface-tile-1}" textColor: "{colors.on-dark}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px product-tile-dark-2: backgroundColor: "{colors.surface-tile-2}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" product-tile-dark-3: backgroundColor: "{colors.surface-tile-3}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" store-utility-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.lg}" padding: 24px configurator-option-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 12px 16px configurator-option-chip-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.pill}" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px height: 44px floating-sticky-bar: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink}" typography: "{typography.body}" height: 64px padding: 12px 32px environment-quote-card: backgroundColor: "{colors.surface-tile-1}" textColor: "{colors.on-dark}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: 80px footer: backgroundColor: "{colors.canvas-parchment}" textColor: "{colors.ink-muted-80}" typography: "{typography.fine-print}" padding: 64px

概述

Apple 的网络形象是一门让产品摄影成为视觉主体、UI 退居其次的经典范例。每个页面都是一组边缘到边缘的产品"瓦片"——交替的浅色与深色画布，每块中央放置一个首屏标题、一行一句话 tagline、两个微小的蓝色胶囊 CTA，以及一张极致清晰的产品渲染图。没有元素与产品竞争。字体自信而克制；颜色要么是纯白、要么是浅米色、要么是近黑瓦片；交互元素是单一的、克制的蓝色。

即便按当代 SaaS 标准衡量，信息密度也异常低。每块瓦片大约占据一整个视口，并且没有装饰性边框——没有边框、没有渐变、没有装饰性框、没有标题阴影。只有当产品图像静置于某个表面之上时，才会出现一道极轻微的 rgba(0, 0, 0, 0.22) 3px 5px 30px 投影以提供视觉份量。结果就是一个更像博物馆画廊的目录：墙面消失，展品登场。

Store 与 shop 表面沿用同一底盘，但切换模式。产品配置器（iPhone 17 Pro、配件网格）引入了一张紧密的 {rounded.lg}（18px）圆角带细边白色工具卡片网格，搭配一条持久的细条子导航。环境（environment）页面则更暗、更具编辑感。横跨全部五种表面，字体体系、节奏以及那唯一的蓝色点缀始终一致——这是用不同音量表达的同一种设计语言。

关键特征：

• 以摄影为先的呈现；UI 退后，让产品发声。
• 交替的全幅瓦片区段：白色/米色 ↔ 近黑色，颜色变化本身充当分节符。
• 单一蓝色点缀（{colors.primary} — #0066cc）承载每一个交互元素。没有第二品牌色。
• 两套按钮语法：微小的蓝色胶囊 CTA（{rounded.pill}）与紧凑的工具型矩形（{rounded.sm}）。
• SF Pro Display + SF Pro Text——显示尺寸上负字距，造就标志性的"Apple 紧凑"标题节奏。
• 仅在产品图像需要呼吸感时才使用极弱的层次提升——整个系统中仅有一道投影。
• 紧凑的双行导航：纤细的 {component.global-nav} + 产品专用的 {component.sub-nav-frosted}，后者始终在右端固定一个主要 CTA。
• 跨多个页面的板块节奏：浅色首屏 → 深色产品瓦片 → 浅色工具瓦片 → 深色瓦片 → 米色页脚——可预测的脉动。

配色

已分析的源页面： 首页、environment、store、iPhone 17 Pro 购买页、配件索引。五种表面的色彩体系完全一致；仅表面模式的比例不同。

品牌与点缀

• Action Blue（{colors.primary} — #0066cc）：唯一的品牌级交互色。所有文字链接、所有蓝色胶囊 CTA（"Learn more"、"Buy"），以及聚焦环的根色。这是 Apple 那个克制但无处不在的"点击我"信号。按下态通过 active 缩放变换而非颜色变化来表达。
• Focus Blue（{colors.primary-focus} — #0071e3）：Action Blue 的略亮兄弟色，仅用于按钮上的键盘聚焦环（outline: 2px solid）。
• Sky Link Blue（{colors.primary-on-dark} — #2997ff）：用于深色表面上的内联链接与内嵌提醒——Action Blue 在瓦片背景上会消失。

表面

• Pure White（{colors.canvas} — #ffffff）：主导画布。内容、工具卡片、store 瓦片、配置器栅格。
• Parchment（{colors.canvas-parchment} — #f5f5f7）：Apple 标志性的浅米色。用于交替的浅色瓦片、页脚区，以及 store 工具区段的默认页面画布。刚好与白色有别以形成节奏。
• Pearl Button（{colors.surface-pearl} — #fafafc）：用于次级"幽灵"按钮填充的近白色——比米色画布更浅，因此按钮在 {colors.canvas-parchment} 上仍然读起来像一个按钮。
• Near-Black Tile 1（{colors.surface-tile-1} — #272729）：首页产品栅格上的主要深色瓦片表面。
• Near-Black Tile 2（{colors.surface-tile-2} — #2a2a2c）：微亮一档——用于深色瓦片正好位于 Tile 1 上下方时制造最细微的分离。
• Near-Black Tile 3（{colors.surface-tile-3} — #252527）：微暗一档——用于堆栈底部以及嵌入式视频/播放器框。
• Pure Black（{colors.surface-black} — #000000）：保留给真正的"空"——视频播放器背景、边缘到边缘的摄影叠层、全局导航条背景。
• Translucent Chip Gray（{colors.surface-chip-translucent} — #d2d2d7）：用于摄影之上圆形控件的半透明灰色片的基础十六进制。生产中以约 64% alpha 应用为 rgba(210, 210, 215, 0.64)。

文本

• Near-Black Ink（{colors.ink} — #1d1d1f）：每个标题、每段正文、深色工具按钮填充的声音。选用而非纯黑，以保持页面如摄影般而非印刷般的观感。
• Body（{colors.body} — #1d1d1f）：与 ink 同色——Apple 在所有浅色表面文字上统一使用一种近黑色调。
• Body On Dark（{colors.body-on-dark} — #ffffff）：深色瓦片与全局导航条上的所有文字。
• Body Muted（{colors.body-muted} — #cccccc）：深色瓦片上的次级文字，纯白过亮之处使用。
• Ink Muted 80（{colors.ink-muted-80} — #333333）：白色 Pearl Button 表面上的正文字——略柔和于纯黑。
• Ink Muted 48（{colors.ink-muted-48} — #7a7a7a）：禁用按钮文字与法律小字。

细线与边框

• Divider Soft（{colors.divider-soft} — #f0f0f0）：次级按钮上的"边框"色——其作用更像环形阴影而非硬线。生产中常以 rgba(0, 0, 0, 0.04) 应用。
• Hairline（{colors.hairline} — #e0e0e0）：store 工具卡片与配置器 chip 上的 1px 细线边框。

品牌渐变

没有装饰性渐变。 产品摄影上的氛围深度（iPhone 17 Pro 的相机板、Apple Watch 表带、AirPods 反光）来自影像本身，而非 CSS 渐变叠层。environment 页面的首屏使用摄影氛围（黎明山景），但不涉及渐变令牌。Apple 是少有的设计系统中零渐变令牌的奢侈品牌站点。

字体排版

字体族

• Display：SF Pro Display, system-ui, -apple-system, sans-serif——Apple 专有的显示字体，针对 ≥ 19px 优化。定义每个标题的声音。
• Body / UI：SF Pro Text, system-ui, -apple-system, sans-serif——文本优化变体，用于 20px 以下正文、说明、按钮与链接。
• OpenType 特性：font-variant-numeric: numerator 在数字链接（定价表、规格表）上启用。显示尺寸依赖紧凑字距而非上下文连字。

层级

设计原则

• 显示尺寸上的负字距。 每个 17px 及以上的标题都带轻微的字距收紧（-0.12 → -0.374px）。这造就了标志性的"Apple 紧凑"标题节奏。绝不用于 12px 及以下。
• 正文字号为 17px，而非 16px。 Apple 打破 SaaS 惯例，正文使用 17px。多出来的那一像素带来明确的"阅读，而非扫视"节奏。
• 字重 300 真实存在且罕见。 在少数大字号文本上刻意使用（{typography.button-large} 18px/300 与 {typography.lead-airy} 24px/300）。这并非偶然——它是为内容应具轻盈感时刻保留的"轻盈氛围"信号。
• 显示标题用 600 而非 700。 Apple 标题使用字重 600。字重 700 仅在 {typography.tagline}（21px）这种需要稍强断言时偶尔使用。
• 行高按语境具体而定。 显示尺寸使用 1.07–1.19（紧凑）。正文使用 1.47。页脚/store 的工具链接堆栈使用异常宽松的 2.41（{typography.dense-link}）。2.41 并非 bug——这就是页脚紧凑链接列呼吸的方式。
• 字重 500 刻意缺席。 阶梯为 300 / 400 / 600 / 700。中等字重的文本总用 600。

字体替代说明

SF Pro 是 Apple 专有的系统字体。当离系统构建时：

• 使用 system-ui, -apple-system, BlinkMacSystemFont 作为栈首项——在 macOS/iOS/Safari 上这会解析为真正的 SF Pro。
• 在非 Apple 平台上，Inter（Google Fonts，可变字体）是最接近的开源等价字体。Inter 在字重 600 + font-feature-settings: "ss03" 下近似 SF Pro 的圆形 "a" 字符。
• 将显示尺寸的 letter-spacing 收紧 -0.01em，以重造 Apple 的紧凑感；Inter 的默认字距比 SF Pro 略宽。
• 替换为 Inter 时，正文行高收紧 0.03（从 1.47 → 1.44）——Inter 较高的 x-height 需要更少的行距。

布局

间距系统

• 基础单位： 8px。亚基础值（2、4、5、6、7）用于紧凑的字体调整；结构化布局对齐到 8/12/16/20/24。
• 令牌： {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 17px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 80px。
• 板块垂直内边距： {spacing.section}（80px）用于产品瓦片内部；瓦片以 0 间距边到边堆叠（颜色变化提供分隔）。
• 卡片内边距： {spacing.lg}（24px）用于工具栅格卡片内部。
• 按钮内边距： 垂直 8–11px，水平 15–22px。
• 通用节奏常量： 17px 正文行高倍数（约 25px 行距）与 21px tagline 字号出现在每个已分析的页面上。

栅格与容器

• 最大内容宽度： 文字密集的板块（environment）约 980px；产品栅格（store、配件）约 1440px；产品瓦片（首页）全幅。
• 栏模式： store/配件 3 到 5 列工具卡片栅格；首页偶发区段 2 列并排瓦片；产品瓦片首屏单列居中堆叠。
• 栏间距： 工具栅格卡片之间 20–24px。

留白哲学

Apple 的留白是产品的展台。每个瓦片从标题上方至少 64px 的空气开始，下方 48–64px。产品渲染从不拥挤；离产品图像最近的内容至少 40px。页脚是唯一打破这一点的区域——在那里，Apple 刻意密集，以便一眼可见完整的信息架构。

层次与深度

阴影哲学。 Apple 仅使用一道投影，且仅应用于摄影类产品图像——从不用于卡片、按钮或文字。UI 中的层次来自（a）表面色变化（浅色瓦片 ↔ 深色瓦片）以及（b）粘性条上的背景模糊。唯一的阴影用于赋予产品重量，而非 UI 层级。

装饰性深度

• 氛围影像 在 environment 页面（摄影远景）提供情绪；不涉及 CSS 渐变。
• 边缘到边缘的瓦片交替 创造节奏，无需边框或阴影——颜色变化本身就是分隔。
• Backdrop-filter 模糊 施加于 {component.sub-nav-frosted} 与 {component.floating-sticky-bar}，营造"悬浮于内容之上"的功能性效果，而非装饰性效果。

形态

圆角分级

摄影几何

• 首屏影像： 全幅，首页 21:9 或更高；environment 与 shop 页 16:9。产品渲染图为照片级真实感，常拍摄于带色调的表面，使其成为瓦片背景。
• 产品渲染图： PNG/WebP 带透明；静置于表面瓦片之上，承接系统阴影。
• 配件栅格： 正方形 1:1 裁切，{rounded.lg}（18px）圆角，浅中性背景，产品居中并有 20–40px 内边距。
• 首屏瓦片不使用圆角图像——图像为全幅矩形。圆角（{rounded.sm}、{rounded.lg}）仅出现在内联卡片图像上。
• 通过响应式 srcset 与 sizes 在所有断点懒加载；CDN 优化的 WebP。

组件

顶部导航

global-nav — 持久、超薄的黑色导航条，固定在每个页面顶部。背景 {colors.surface-black}，高度 44px，文字 {colors.on-dark} 字体为 {typography.nav-link}（12px / 400 / -0.12px 字距）。链接克制、约 20px 间距、横跨顶部边缘到边缘。右对齐簇：搜索、Bag 图标——始终可见。在移动端，约 834px 处折叠为汉堡菜单，Apple 标志居中。

sub-nav-frosted — 表面专用导航，粘附于全局导航下方。背景 {colors.canvas-parchment}，80% 不透明度加 backdrop-filter 模糊，营造毛玻璃效果。高度 52px。左侧内容：产品类别名（"iPhone"、"Store"、"Accessories"），字体为 {typography.tagline}（21px / 600）。右侧内容：内联导航链接，字体为 {typography.button-utility}（14px），以一个持久的 {component.button-primary}（"Buy"）或工具链接收尾。

按钮

button-primary — Apple 标志性的动作。背景 {colors.primary}（Action Blue #0066cc），文字 {colors.on-primary} 字体 {typography.body}（SF Pro Text 17px / 400），圆角 {rounded.pill}（完整胶囊——胶囊形），内边距 11px × 22px。完整胶囊圆角本身就是品牌动作信号。

• 激活态：{component.button-primary-active}——transform: scale(0.95)（系统级微交互）。
• 聚焦态：{component.button-primary-focus}——2px 实线 {colors.primary-focus} 描边。

button-secondary-pill — 用于两个蓝色胶囊同时出现时的第二个 CTA（"Learn more" / "Buy"）。背景透明，文字 {colors.primary}，1px 实线 {colors.primary} 边框，圆角 {rounded.pill}，内边距 11px × 22px。读起来像"幽灵胶囊"。

button-dark-utility — 全局导航动作（Sign In、Bag、语言选择器）。背景 {colors.ink}（#1d1d1f），文字 {colors.on-dark} 字体 {typography.button-utility}（14px / 400 / -0.224px 字距），圆角 {rounded.sm}（8px），内边距 8px × 15px。激活态通过 transform: scale(0.95) 缩小。

button-pearl-capsule — 产品卡次级按钮。背景 {colors.surface-pearl}（#fafafc），文字 {colors.ink-muted-80} 字体 {typography.caption}（14px），3px 实线 {colors.divider-soft} 边框（更像柔环而非可见线），圆角 {rounded.md}（11px），内边距 8px × 14px。

button-store-hero — 用于 store 首屏表面的更大主要 CTA。与 {component.button-primary} 同为 Action Blue + 纸白，但使用 {typography.button-large}（18px / 300——罕见的字重 300），内边距稍大（14px × 28px）。在 store landing 上克制使用。

button-icon-circular — 悬浮于摄影之上。44 × 44px，背景 {colors.surface-chip-translucent} 约 64% alpha，图标 {colors.ink}，圆角 {rounded.full}。用于轮播控件、关闭按钮，以及图内控件（iPhone 购买页上的产品图缩略图）。

text-link — {colors.primary}（Action Blue）的内联正文链接。按语境加或不加下划线。

text-link-on-dark — 深色瓦片上的内联正文链接，颜色为 {colors.primary-on-dark}（Sky Link Blue #2997ff）——Action Blue 在 {colors.surface-tile-1} 上会消失。

卡片与容器

product-tile-light — 全幅浅色瓦片。背景 {colors.canvas}（白色），文字 {colors.ink}，圆角 {rounded.none}（0——瓦片边缘相接），垂直内边距 {spacing.section}（80px）。居中堆叠：产品名字体 {typography.display-lg}（40px / 600）→ 一行 tagline 字体 {typography.lead}（28px / 400）→ 两个 {component.button-primary} CTA（"Learn more" / "Buy"）→ 静置于表面的产品渲染图，应用系统阴影。

product-tile-parchment — 同 {component.product-tile-light} 但在 {colors.canvas-parchment}（#f5f5f7）上。用于打破两块相邻的白色瓦片。

product-tile-dark — 全幅深色瓦片。背景 {colors.surface-tile-1}（#272729），文字 {colors.on-dark}，圆角 {rounded.none}，垂直内边距 {spacing.section}（80px）。与浅色瓦片同样的内容堆叠，但内联文案使用 {component.text-link-on-dark}，CTA 使用 {component.button-primary}（Action Blue 在深色表面上仍然有效）。在首页产品栅格上作为交替深色带使用。

product-tile-dark-2 — {colors.surface-tile-2}（#2a2a2c）上的变体。用于深色瓦片正好位于 {component.product-tile-dark} 上下方时，通过微亮一档制造最细微的分离。

product-tile-dark-3 — {colors.surface-tile-3}（#252527）上的变体。用于堆栈底部以及嵌入式视频/播放器框。

store-utility-card — 用于 store 与配件栅格。背景 {colors.canvas}（白色），1px 实线 {colors.hairline} 边框，圆角 {rounded.lg}（18px），内边距 {spacing.lg}（24px）。顶部：产品图像（1:1 裁切，内图 {rounded.sm}（8px）圆角）。下方：产品名字体 {typography.body-strong}（17px / 600），价格字体 {typography.body}（17px / 400），以及一个 {component.text-link}（"Buy" 或 "Learn more"）。默认无阴影；产品渲染图本身承载系统产品阴影。

configurator-option-chip — 用于 iPhone 17 Pro 购买页的胶囊形可点单元。背景 {colors.canvas}，文字 {colors.ink} 字体 {typography.caption}，圆角 {rounded.pill}，内边距 12px × 16px。包含一个小产品缩略图 + 标签 + 价格差。每行排布 4–5 个选项。

configurator-option-chip-selected — 选中态。边框升级为 2px 实线 {colors.primary-focus}。同样的形状与内容。

environment-quote-card — 摄影画布首屏，专门用于 environment 页面。深色摄影背景（黎明山景），回退色为 {colors.surface-tile-1}，居中白字标题字体 {typography.display-lg}（40px），标题上方一个小绿色 "Apple 2030" 图形标志，下方单个 {component.button-primary}。内边距 {spacing.section}（80px）。

floating-sticky-bar — 在 iPhone 17 Pro 购买页滚动期间悬浮于视口底部。背景 {colors.canvas-parchment}，80% 不透明度加 backdrop-filter: blur(N)，高度 64px，内边距 12px × 32px。左侧：滚动价格合计 {typography.body}。右侧：{component.button-primary}（"Add to Bag"）。

输入与表单

search-input — 配件搜索输入。背景 {colors.canvas}，文字 {colors.ink} 字体 {typography.body}（17px），1px 实线 rgba(0, 0, 0, 0.08) 边框，圆角 {rounded.pill}（完整胶囊——搜索也是胶囊形，匹配 CTA 语法），内边距 12px × 20px，高度 44px。前置图标：14px 搜索图形，静音色调。

错误与校验状态在已分析的页面上未出现。

页脚

footer — 背景 {colors.canvas-parchment}（#f5f5f7），文字 {colors.ink-muted-80}。链接列字体 {typography.dense-link}（17px / 400 / 2.41 行距——较宽行距让紧凑列可扫描）。列标题字体 {typography.caption-strong}（14px / 600）。最底部法律行字体 {typography.fine-print}（12px / 400），文字 {colors.ink-muted-48}。垂直内边距 64px。

推荐与避免

推荐

• 使用 {colors.primary}（Action Blue #0066cc）作为每个交互元素——链接、胶囊 CTA、聚焦信号——除此之外不应用于其他。单一点缀不可妥协。
• 标题使用 {typography.hero-display} 或 {typography.display-lg} 并配合负字距（-0.28 → -0.374px），以获得标志性的"Apple 紧凑"节奏。
• 正文运行于 {typography.body}（17px / 400 / 1.47 / -0.374px）——而非 16px。多出来的那一像素定义了品牌的阅读节奏。
• 交替 {component.product-tile-light}（或 parchment）与 {component.product-tile-dark} 形成全幅板块节奏。颜色变化本身就是分隔。
• 将 {rounded.pill} 保留给主要蓝色 CTA 以及任何应读为"动作"的元素（配置器 chip、搜索输入、粘性条 CTA）。
• 单道产品阴影（rgba(0, 0, 0, 0.22) 3px 5px 30px）仅应用于静置于表面的产品渲染图——从不用于卡片、按钮或文字。
• 在每个按钮上使用 transform: scale(0.95) 作为激活/按下态——这是系统级的微交互。
• 保持全局导航 {colors.surface-black}（纯黑）——这是大多数页面唯一出现纯黑的地方。

避免

• 不要引入第二点缀色；每个"点击我"信号都是 {colors.primary}（Action Blue）。
• 不要给卡片、按钮或文字添加阴影——阴影保留给产品影像。
• 不要使用渐变作为装饰背景；氛围来自摄影。
• 不要将正文设置为字重 500——Apple 的阶梯为 300 / 400 / 600 / 700，500 刻意缺席。正文始终为 400；强内联为 600；显示为 600。
• 不要给全幅瓦片加圆角——瓦片是矩形的，边缘到边缘；颜色变化是分隔。
• 不要将正文行高收紧至 1.47 以下——编辑型行距是品牌的一部分。
• 不要混用圆角语法——紧凑工具用 {rounded.sm}，工具卡片用 {rounded.lg}，胶囊用 {rounded.pill}，中间不要有别的（除了罕见的 {rounded.md} Pearl Button）。
• 不要在浅色表面上使用 {colors.primary-on-dark}（Sky Link Blue）——它专为深色瓦片而生。Action Blue 用于浅色表面。

响应式行为

断点

对 agent 而言重要的结构性断点：1440px（内容锁定）、1068px（小桌面）、833px（平板横屏切换）、734px（平板竖屏）、640px（手机）、480px（小手机）。

触控目标

• 最小 44 × 44px。{component.button-primary} 实测约 44 × 100px（完整胶囊圆角让可见命中区域比标签暗示的更宽松）。
• {component.button-icon-circular} 正好 44 × 44px。
• 全局导航工具链接较小（约 32 × 80px）——它们刻意处于更紧凑的目标尺寸，因为是精确的桌面动作，且 ≤ 833px 处由移动端汉堡替代。

折叠策略

• 全局导航： 桌面端完整水平链接行 → 834px 及以下折叠为 Apple 标志 + 汉堡 + Bag 图标。
• 子导航： 类别名 + 内联链接 + 主要 CTA → 移动端仅类别名 + 主要 CTA；内联链接进入汉堡托盘。
• 产品瓦片： 834px 处从 2 列堆叠为 1 列；垂直内边距在小手机从 80px → 48px。
• 工具栅格（store、配件）：5 列 → 4 列（1440px）→ 3 列（1068px）→ 2 列（834px）→ 1 列（640px）。
• 首屏字体： {typography.hero-display}（56px）→ 1068px 处 {typography.display-lg}（40px）→ 640px 处 34px → 419px 处 28px。

图片行为

• 所有产品影像使用响应式 srcset 与断点匹配的裁切。
• 首屏摄影可能在移动端切换艺术指导（例如 environment 页面山景在移动端裁为更高长宽比，对主体的取景不同）。
• 产品渲染图在所有断点上保持 1:1 或 4:3 长宽比；仅缩放变化。
• 懒加载为默认；首屏以上的主图主动加载。

迭代指南

1. 一次专注于一个组件。直接引用其 YAML 键（{component.product-tile-dark}、{component.search-input}）。
2. 已存在组件的变体（-active、-focus、-2、-3）作为独立条目存于 components: 中。
3. 所有地方使用 {token.refs}——绝不内联十六进制。
4. 绝不记录悬停。仅记录默认与激活/按下态。
5. 显示标题保持 SF Pro Display 600 + 负字距。正文保持 SF Pro Text 400 + 17px。边界不可打破。
6. 单道投影（rgba(0, 0, 0, 0.22) 3px 5px 30px）保留给产品摄影。
7. 当对强调方式存疑时：先切换表面（浅色 → 深色瓦片）再增加边框。

已知缺口

• 已分析页面未出现表单校验与错误状态；仅记录中性搜索输入。
• 首页的嵌入式视频/播放器框使用 {colors.surface-black}；内部播放器控件未记录（属于平台部件，而非 web 设计令牌）。
• 部分组件图像是动态的（轮换产品首屏），其具体文案随表面而变——组件规范记录结构，而非轮换内容。
• 已分析页面上未出现 store 与配件工具卡片的深色对应；所记录的系统是 Apple 默认提供的白天/浅色主导变体。
• 氛围摄影（environment 页面山景）是内容资产，而非设计令牌；所记录的 {component.environment-quote-card} 仅描述结构性表面。
• {component.sub-nav-frosted} 与 {component.floating-sticky-bar} 上的 backdrop-filter 模糊半径随平台而异；生产 CSS 使用 saturate(180%) blur(20px) 作为典型基线，但该数值未正式化为令牌。