workbuddy_skills/open-design/design-systems/starbucks/DESIGN-zh.md

# 以 Starbucks 为灵感的设计系统

> Category: 电商与零售
> 全球咖啡零售品牌。四层绿色体系，暖奶油色画布，全圆角胶囊按钮。

## 1. 视觉主题与氛围

Starbucks 的设计系统是一套**温暖自信的零售旗舰**风格，将门店围裙上的绿色延伸至每一个界面表面。画布在中性暖奶油色（`#f2f0eb`）与陶瓷米白色（`#edebe9`）之间交替——这两种颜色直接取材于真实的店内材质：纸巾、咖啡馆墙面、木质装饰——而标志性的**星巴克绿**（`#006241`）则在主视觉横幅、行动号召区和 Rewards 会员体验中锚定品牌瞬间。绿色体系包含四个经过精心校准的色阶（Starbucks、Accent、House、Uplift），每个色阶对应特定的界面角色；金色（`#cba258`）仅出现在 Rewards 会员等级的仪式感场景中，而非作为通用强调色使用。

字体承载了品牌声音的大部分重量。专有字体 **SoDoSans**（星巴克定制字体）覆盖了几乎所有界面，搭配紧凑的 `-0.16px` 字符间距——读起来自信友善，而非时尚杂志式的严肃冷峻。值得注意的是：Rewards 页面在特定标题时刻切换为暖调衬线体（`"Lander Tall", "Iowan Old Style", Georgia`），微妙地呼应了咖啡馆黑板的怀旧感。而 Careers 页面则使用手写体（`"Kalam", "Comic Sans MS", cursive`）来呈现杯子上的手写姓名元素。三种字体，三种场景——系统对各自出场时机有严格约束。

界面通过圆润的几何形态营造呼吸感。所有按钮均为 50px 全圆角胶囊形。卡片采用 12px 圆角矩形。"Frap"悬浮 CTA——一个绿色强调色（`#00754A`）填充的 56px 圆形订单按钮——是这套产品最具代表性的立体感设计：它悬浮于右下角，带有叠加阴影（`0 0 6px rgba(0,0,0,0.24)` 底层光晕 + `0 8px 12px rgba(0,0,0,0.14)` 环境光），按下时通过 `scale(0.95)` 进行压缩。整体阴影运用克制——卡片阴影保持在轻柔的 `0.14/0.24` 透明度，全局导航使用安静的三层阴影叠加。整套系统的感觉就像干净的咖啡馆标牌：清晰、温暖，从不喧嚣。

**核心特征：**
- 四层绿色品牌体系（Starbucks / Accent / House / Uplift），各自对应独立的界面角色——而非单一的"品牌绿"
- 金色仅限于 Rewards 会员等级的仪式感场景；绝不作为通用强调色
- 暖中性画布（`#f2f0eb` / `#edebe9`）而非冷白色——直接引用咖啡馆材质
- 定制专有字体 SoDoSans，搭配紧凑的 `-0.16px` 字符间距，作为统一的品牌声音
- 场景专属字体切换：衬线体（Lander Tall）用于 Rewards，手写体（Kalam）用于 Careers 杯名
- 全圆角胶囊按钮（`50px` 圆角），`scale(0.95)` 按下态为标志性微交互
- 悬浮"Frap"圆形 CTA（`56px`，绿色强调色填充，叠加阴影）——产品标志性的高度元素
- 礼品卡界面设计为**实物产品照片**——每张卡片都是独立的插画摄影，而非生成式图形
- 12px 卡片圆角 + 轻柔阴影，让内容卡保持扁平带微微悬浮感
- 以 rem 为单位的间距体系，以 1.6rem（约 16px）为锚点，即 `--space-3`，步进至 6.4rem（约 64px）

**色块页面节奏：** 奶油色主视觉区 → 白色内容区 → 深绿色（`#1E3932`）特色横幅（白色文字）→ 奶油色功能区 → 深绿色（`#1E3932`）页脚（金色/白色文字）——深浓咖啡色书挡环绕明亮主体。

## 2. 色彩体系与角色定义

**分析页面来源：** 首页、Rewards 会员页、礼品卡页、产品详情页（粉色能量饮品）、产品营养信息页（冷萃咖啡）。

### 主色

- **Starbucks Green**（`#006241`）：历史品牌绿。用于 h1 标题、Rewards 页面的主要区块标题，以及需要单一主导色彩的品牌信号场景。
- **Green Accent**（`#00754A`）：稍亮、更鲜亮的绿色。主要填充型 CTA 的颜色（"探索下午茶菜单"、"查看春季菜单"）以及悬浮 Frap 圆形按钮的填充色。
- **House Green**（`#1E3932`）：深邃近黑的品牌绿。页脚背景、特色横幅背景、Rewards 深色状态面板，以及 Rewards 页面主视觉横幅上的标题"免费咖啡只是个开始"。
- **Green Uplift**（`#2b5148`）：次级中深绿色，少量用于装饰性强调和深色渐变场景。
- **Green Light**（`#d4e9e2`）：淡薄荷色，用于表单有效状态的色调背景和浅绿功能性界面。

### 次要色与强调色

- **Gold**（`#cba258`）：几乎专门保留给 Rewards 会员等级的仪式感场景——金级别提示、合作伙伴徽章（SkyMiles、Bonvoy）以及高级感强调。绝不作为通用品牌色。
- **Gold Light**（`#dfc49d`）：较柔和的金色，用于金级会员区块的背景色调。
- **Gold Lightest**（`#faf6ee`）：奶油金页面底色，用于 Rewards 页面合作伙伴区块——将金色强调色与暖中性系统相融合。

### 界面与背景色

- **White**（`#ffffff`）：主要卡片与弹窗界面色。同时作为礼品卡磁贴的卡片填充色。
- **Neutral Cool**（`#f9f9f9`）：细腻冷灰色，用于下拉菜单（"账户"下拉）、表单卡片包裹容器及低调功能性容器。
- **Neutral Warm**（`#f2f0eb`）：暖奶油色，作为 Rewards 功能区和主视觉区的**主要页面画布**。
- **Ceramic**（`#edebe9`）：稍偏暖/深的奶油色，用于区域分隔、柔和页面区块过渡以及 Rewards 合作伙伴横幅。
- **Black**（`#000000`）：深墨黑，保留给页面顶部深色 CTA 横幅（"立即加入"）以及高对比度顶部导航登录按钮。

### 中性色与文字色

- **Text Black**（`rgba(0, 0, 0, 0.87)`）：浅色背景上的主要标题和正文颜色。非纯黑——87% 不透明度的黑色读起来更温暖。
- **Text Black Soft**（`rgba(0, 0, 0, 0.58)`）：浅色背景上的次要/元信息文字颜色。
- **Text White**（`rgba(255, 255, 255, 1)`）：深绿色背景上的主要标题/正文颜色。
- **Text White Soft**（`rgba(255, 255, 255, 0.70)`）：深绿色背景上的次要文字——页脚链接说明、说明文字。
- **Rewards Green**（`#33433d`）：专门用于 Rewards 页面文字块的哑光石绿色——比 Text Black 略带"沉静感"的阅读色，传递出"会员界面"的氛围，而无需使用完整的 Starbucks Green。

### 语义色与强调色

- **Red**（`#c82014`）：错误与破坏性操作状态（表单无效、危险操作）。
- **Yellow**（`#fbbc05`）：警告状态，品牌历史遗留色。
- **Green Light**（`#d4e9e2`，33% 不透明度 = `hsl(160 32% 87% / 33%)`）：表单有效字段的色调背景。
- **Red Tint**（`hsl(4 82% 43% / 5%)`）：表单无效字段的色调背景。

### 黑/白透明度梯度

两组平行的半透明色阶，用于遮罩层和次要文字：
- `rgba(0,0,0,0.06)` 至 `rgba(0,0,0,0.90)`，以 10% 为步进——浅色背景上的深色遮罩
- `rgba(255,255,255,0.10)` 至 `rgba(255,255,255,0.90)`，以 10% 为步进——深色背景上的浅色遮罩

### 渐变系统

未发现结构性渐变 token。整体界面层次完全依靠纯色色块——系统依赖其五层奶油/绿色界面调色板，而非渐变。

## 3. 字体规范

### 字体族

- **主字体：** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` — 星巴克专有企业字体，覆盖几乎所有界面
- **加载备用字体：** `"Helvetica Neue", Helvetica, Arial, sans-serif` — SoDoSans 加载前的显示字体
- **Rewards 衬线体：** `"Lander Tall", "Iowan Old Style", Georgia, serif` — 用于 Rewards 页面特定标题时刻，营造温暖的编辑感
- **Careers 手写体：** `"Kalam", "Comic Sans MS", cursive` — 专用于 Careers 页面的"杯名"装饰元素，呼应星巴克杯子上的手写姓名

根节点（`:root`）未显式激活任何 OpenType 样式集。

### 层级体系

| 角色 | 字号 | 字重 | 行高 | 字间距 | 备注 |
|------|------|--------|-------------|----------------|-------|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | 最大 Rewards/主视觉展示字 |
| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | 次级主视觉标题 |
| Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | 落地区块标题 |
| H1 | 24px | 600 | 36px | -0.16px | Starbucks Green 主标题 |
| H2 | 24px | 400 | 36px | -0.16px | Text Black 正常字重区块标题 |
| Body Large | 19px | 400–600 | 33.25px（约 1.75）| -0.16px | 主视觉引言文案、特色横幅正文 |
| Body (text-3) | 1.6rem / 16px | 400 | 1.5（24px）| -0.01em | 默认正文 |
| Small (text-2) | 1.4rem / 约 14px | 400–600 | 1.5 | -0.01em | 按钮标签、元信息、表单标签 |
| Micro (text-1) | 1.3rem / 约 13px | 400 | 1.5 | -0.01em | 激活浮动标签状态、说明微文案 |
| Button Label | 14–16px | 400–600 | 1.2 | -0.01em | 所有胶囊按钮标签 |

**字间距 token：**
- `letterSpacingNormal`：`-0.01em`（默认——紧凑，标志性特征）
- `letterSpacingLoose`：`0.1em`（强调大写）
- `letterSpacingLooser`：`0.15em`（全大写样式标签，极度强调）

**行高 token：**
- `lineHeightNormal`：`1.5`（正文）
- `lineHeightCompact`：`1.2`（展示字/按钮）

### 原则

- **全局负向紧缩字距（`-0.01em`）** 几乎无处不在——整套产品读起来略显压缩，赋予 SoDoSans 自信的存在感，却不显得局促。
- **字重变化承载层级，而非字号变化。** H1 与 H2 共用同一个 24px/36px 字号；区别只在字重（600 对比 400）和颜色（Starbucks Green 对比 Text Black）。
- **字号 token 使用 rem，以 `1rem = 10px` 为锚点**（通过根节点 `font-size: 62.5%` 实现）。因此 `1.6rem` = 16px，`2.4rem` = 24px，以此类推。字号体系是语义化的（textSize-1 至 textSize-10），而非任意像素值。
- **场景专属字体切换**——Rewards 用衬线体，Careers 用手写体——是经过深思熟虑的定向设计。切勿在同一界面内与主无衬线字体混用。
- **正文文字永远不使用纯黑**——固定为 `rgba(0,0,0,0.87)`，以匹配暖中性画布的色温。

### 字体替代说明

SoDoSans 是星巴克专有字体（由 House Industries 授权，不对外公开）。合理的开源替代方案：
- **Inter**（Google Fonts）——相近的人文几何比例，字重覆盖广
- **Manrope**——稍圆润，有相似的自信感
- **Nunito Sans**——更温暖，适合"咖啡馆"品牌替代

如需替代，请验证紧缩字距 `-0.01em` / `-0.16px` 是否仍然可读；部分开源字体可能需要调整为 `-0.005em`。

Lander Tall（Rewards 衬线体）为定制字体——开源替代方案：**Iowan Old Style**（已在备用字体栈中）、**Lora** 或 **Source Serif Pro**。Kalam（Careers 手写体）可在 Google Fonts 直接获取。

## 4. 组件样式

### 按钮

**1. 主要填充型——"探索下午茶菜单 / 免费注册"**
- 背景：`#00754A`（Green Accent）
- 文字：`#ffffff`
- 边框：`1px solid #00754A`
- 圆角：`50px`（全胶囊）
- 内边距：`7px 16px`
- 字体：SoDoSans，16px，字重 600，字间距 `-0.01em`
- 激活态：通过 `--buttonActiveScale` 实现 `transform: scale(0.95)`
- 过渡：`all 0.2s ease`

**2. 主要描边型——"来一试 / 开始点单"**
- 背景：transparent
- 文字：`#00754A`（Green Accent）
- 边框：`1px solid #00754A`
- 圆角/内边距/激活/过渡与主要填充型相同

**3. 黑色填充型——"立即加入"**
- 背景：`#000000`
- 文字：`#ffffff`
- 边框：`1px solid #000000`
- 圆角：`50px`，内边距：`7px 16px`
- 字体：14px，字重 600
- 用于页面顶部加入横幅及类似转化场景

**4. 深色描边型——"登录"**
- 背景：transparent
- 文字：`rgba(0, 0, 0, 0.87)`（Text Black）
- 边框：`1px solid rgba(0, 0, 0, 0.87)`
- 圆角：`50px`，内边距：`7px 16px`
- 字体：14px，字重 600

**5. 绿底反色——"查看春季菜单"**
- 背景：`#ffffff`
- 文字：`#00754A`
- 边框：`1px solid #ffffff`
- 当按钮背景是深绿色 House Green 横幅时使用——白色按钮配绿色文字，而非绿底上再放绿色填充胶囊

**6. 深色背景描边型——"了解更多 / 立即订购"**
- 背景：transparent
- 文字：`#ffffff`
- 边框：`1px solid #ffffff`
- 用于深绿色特色横幅上与白色填充 CTA 配对的次要操作

**7. 同意按钮（深绿变体）**
- 背景：`rgb(0, 130, 72)`（Cookie 同意模块专用变体绿）
- 文字：`#ffffff`
- 无边框，`50px` 圆角，`7px 16px` 内边距，14px / 字重 400
- 比 Green Accent 略亮——专用于 Cookie 提示横幅的"同意"操作

**8. Frap——悬浮圆形订单按钮**
- 背景：`#00754A`（Green Accent）
- 图标：`#ffffff`
- 尺寸：`5.6rem / 56px`（标准），`4rem / 40px`（迷你变体）
- 圆角：`50%`（完整圆形）
- 固定于右下角，`-0.8rem` 触摸偏移量，提供额外的点击舒适区
- 阴影叠加：底层 `0 0 6px rgba(0,0,0,0.24)` + 环境光 `0 8px 12px rgba(0,0,0,0.14)`
- 激活态：环境光阴影收缩至 `0 8px 12px rgba(0,0,0,0)`
- 这是产品标志性的高度元素——它悬浮于每个滚动界面之上

**9. 全宽反馈标签——"提供反馈"**
- 背景：`#00754A`
- 文字：`#ffffff`
- 圆角：`12px 12px 0px 0px`（仅顶部圆角）
- 内边距：`8px 16px`
- 字体：14px，字重 400
- 固定于视口右下角边缘

### 卡片与容器

**内容卡（默认）**
- 背景：`#ffffff`（`--cardBackgroundColor`）
- 圆角：`12px`（`--cardBorderRadius`）
- 阴影：`0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)`（`--cardBoxShadow`）
- 用于：特色卡片、菜单商品磁贴、Rewards 状态面板

**礼品卡磁贴**
- 背景：插画摄影铺满整张卡片（无纯色背景）
- 圆角：与卡片相近（约 `12px`，边角略紧）
- 阴影：比默认卡片更轻——这类卡片被处理为摆放在画布上的实体卡片
- 以类别标签分组（春季、感谢、生日、庆典、母亲节、感恩、鼓励、里程碑、随时送）

**Rewards 状态卡（Rewards 页面标志性组件）**
- 三栏网格：铜卡 / 金卡 / 银卡——每块为深绿色（`#1E3932`）面板，包含：
  - 彩色渐变/纯色标题环
  - 编号"等级"徽章
  - 大号 SoDoSans 字重 600 的等级标题
  - 白色/半透明白色文字的星数/权益列表
  - 底部"随着你积累更多星数……"晋级说明文字

**合作伙伴卡（Rewards 页）**
- 背景：`#faf6ee`（Gold Lightest）暖奶油色
- 内容：居中的合作伙伴 Logo（"SkyMiles"、"Bonvoy"）+ 下方说明文字
- 圆角与阴影遵循默认卡片规格

**下拉菜单（账户下拉，顶部导航）**
- 背景：`#f9f9f9`（Neutral Cool）
- 菜单项：`24px / 字重 400`，Text Black 颜色
- 无边框——仅通过白色导航栏与背景的色差来区分

**弹窗**
- 内边距：`2.4rem`（`--modalPadding`）
- 顶部内边距：`8.8rem`（`--modalTopPadding`）——为关闭按钮/标题留出空间
- 垂直内边距合计：`11.2rem`
- 圆角继承卡片规格（`12px`）

### 输入框与表单

**浮动标签输入框**
- 聚焦/已填写时标签浮动至输入框边框上方
- 桌面端标签默认字号 `1.9rem`，激活时动画至 `1.4rem`
- 移动端标签默认字号 `1.6rem`，激活时动画至 `1.3rem`
- 标签水平偏移：距左侧 `12px`
- 激活态标签位移：上移至 `-12px`，同时 Y 轴 `-50%` 偏移
- 字段内边距：`12px`
- 表单水平内边距：`1.6rem`
- 验证：有效字段获得 `rgba(green-light, 0.33)` 色调；无效字段获得 `rgba(red, 0.05)` 色调
- 过渡：选中输入时使用 `0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)`

**选项图标（复选框/单选框）**
- 内边距：`3px`
- 使用上述已选中输入的三次方贝塞尔动画（稍有"弹性"的 2.32 过冲曲线）

### 导航

**全局导航（顶部栏）**
- 固定位置，高度随断点递进：`64px` xs → `72px` 移动端 → `83px` 平板 → `99px` 桌面
- 阴影：`0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` — 三层柔和托起感
- 左侧：Starbucks 文字 Logo，距左边缘偏移 `99px`（md）/ `131px`（lg）
- 主要链接内联排列，SoDoSans 字重 400–600：菜单 · Rewards · 礼品卡
- 右侧：查找门店链接 + 登录（描边）+ 立即加入（黑色填充）

**子导航（第二栏，如 Rewards 内部）**
- 高度：`53px`（全局子导航）/ `48px`（内部子导航）
- 通常为全局导航下方的水平选项卡组

**移动端导航**
- 平板以下断点折叠为抽屉式汉堡菜单
- Frap 悬浮按钮无论导航状态如何，始终显示于右下角

### 图片处理

- **主视觉摄影**：饮品照片（彩色背景下盛于透明玻璃杯——珊瑚色、鼠尾草绿、暖琥珀色）占据分割式主视觉约 40vw；文字占另一侧 60vw（`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`）
- **礼品卡插画**：每张卡片都是独立的插画摄影（画风感强、手绘质感、暖色调）。绝不使用通用生成式图形。
- **Rewards 仪式感图片**：手持 Starbucks Rewards App 屏幕的摄影，斜角构图——产品场景摄影。
- **菜单缩略图**：干净白色/奶油色背景下的方形或 4:3 产品摄影，玻璃杯周围有轻柔阴影。
- **图片淡入**：图片加载时使用 `opacity 0.3s ease-in` 过渡（`--imageFadeTransition`），防止突兀弹出。

### 特色横幅（深绿色主视觉条带）

全宽 `#1E3932`（House Green）横幅，包含：
- 左侧：白色标题 + 副标题 + CTA 按钮组
- 右侧：产品摄影或插画
- 分割比例约为 40/60 或 50/50，依区块而定
- 全程白色文字，次要文案使用 `rgba(255,255,255,0.70)`
- CTA 采用绿底反色（白色填充）+ 深色背景描边（白色轮廓）的组合

### 展开器 / 手风琴

- 时长：`300ms`（`--expanderDuration`）
- 缓动曲线：`cubic-bezier(0.25, 0.46, 0.45, 0.94)` — 平稳的缓出效果
- 用于 Rewards 和礼品卡页面的常见问题区块

### Cookie 同意模块

页面顶部的深绿色弹窗卡片，包含"同意"（绿色填充）和"管理偏好"（描边）按钮。首次访问时显示；可关闭。

### 产品详情页组件（PDP 标志性组件集群）

菜单产品页面上反复使用的组件集群（例如 `/menu/product/40498/iced` 饮品详情、`/menu/product/.../nutrition` 营养信息）。这些组件在不改变 token 的前提下扩展了组件库。

**尺寸选择器**
- 横向排列 4 个杯形图标按钮（Tall / Grande / Venti / Trenta）
- 每个选项：顶部杯形轮廓图标 + 下方尺寸名称（16/700，Starbucks Green 颜色）+ 液量说明（13/400，Text Black Soft 颜色）
- 选中状态：在选中的杯形图标外围显示绿色圆形边框（`2px solid #00754A`）
- 未选中：无边框，字体排版相同
- 全宽横向排列，等间距
- 容器圆角：`12px` 或直角；单个图标使用 `50%` 圆形
- 内边距：`16px 24px`

**加料/牛奶选择（描边矩形）**
- 背景：`#ffffff`
- 边框：`1px solid #d6dbde`（Input Border）
- 圆角：`4px`
- 在其列内全宽显示
- 浮动标签位于顶部边框上方："加料" / "牛奶" / "加料"——13/700，Text Black，大写，`0.325px` 字间距
- 居中显示当前值（如"冰块"、"椰奶"、"草莓果粒勺"）：16/400，Text Black
- 右侧显示 Text Black Soft 颜色的向下箭头图标
- 聚焦时：边框切换为 Green Accent（`#00754A`）

**数字步进器**
- 嵌入于需要填写数量的加料行中（如草莓果粒勺）
- `−` 减号按钮 + 数字 + `+` 加号按钮，标签右侧内联排列
- 按钮：`32×32px` 圆形，`1px solid #d6dbde` 边框，中性灰图标
- 数字：16/700，Text Black，居中显示

**自定义按钮**
- 背景：`#ffffff`
- 文字：`#00754A`（Green Accent）
- 边框：`1.5px solid #00754A`
- 圆角：`50px`（全胶囊）
- 内边距：`14px 40px`（比默认胶囊更宽大——这是次要主操作）
- 标签："Customize"，左侧嵌入金色闪光 ✨ 图标
- 用于：完成尺寸/牛奶选择后进入饮品定制流程

**加入订单按钮（PDP）**
- 背景：`#00754A`（Green Accent）
- 文字：`#ffffff`
- 圆角：`50px`
- 内边距：`14px 32px`
- 固定在产品卡右上角和/或门店可用性横幅内右对齐
- 与其他主要 CTA 相同的 scale(0.95) 激活行为

**Rewards 积分胶囊——"200★ item"**
- 背景：transparent
- 边框：`1px solid #cba258`（Gold）
- 文字：`#cba258`（Gold）
- 圆角：`50px`（全胶囊）
- 内边距：`4px 12px`
- 内容："200★ item"，其中 `★` 为小型实心星形字符——表示兑换该商品所需的 Rewards 积分
- 字体：Proxima Nova 13/700，`0.5px` 字间距
- 仅用于支持 Rewards 积分兑换的商品

**产品说明横幅**
- 全宽深绿色横幅（`#1E3932` House Green）
- 从上至下包含：
  1. Rewards 积分胶囊（金色，如适用）
  2. 白色产品说明正文（16/400/1.5）
  3. 营养信息内联展示（"140 卡路里，25g 糖，2.5g 脂肪"）+ 信息图标提示——14/700 白色
  4. "完整营养成分及配料表"白色描边胶囊按钮
- 垂直内边距：`32px`
- 位于主要产品标题横幅下方

**配料 / 营养信息表格**
- 营养信息页面的两栏布局
- 左栏："配料"标题 + 列表，或"该商品暂无信息"占位文字块（附 Text Black Soft 14/400 说明段落）
- 右栏："营养"标题 + 标签/数值行
- 每行：营养素名称（Proxima Nova 14/400）居左，数值（如"140 卡路里"、"25g"、"205 mg**"）居右，行下方以 `1px solid #e7e7e7` 细线分隔
- 咖啡因/星号标注的脚注，位于底部，13/400 Text Black Soft
- 符合营养标签法规的可复用表格模式

**门店可用性选择器**
- 位于尺寸选择器行上方的深绿色特色横幅内
- 全宽圆角矩形，半透明白色内部
- 文字："选择门店以查看商品可用性"，白色 14/400
- 右侧：向下箭头 + 白色描边购物袋 SVG 图标
- 圆角：`4px`
- 高度：约 48px

**PDP 面包屑导航**
- 产品标题上方显示"菜单 / 清爽饮品 / 粉色能量饮品"路径
- 分隔符：Text Black Soft 颜色的 `/` 斜杠字符
- 当前页面无链接，前序页面为绿色强调色下划线链接
- 字体：14/400 Proxima Nova
- 出现在所有 PDP 页面

**返回箭头链接（PDP 营养信息/详情子页面）**
- 营养信息页面区块标题上方的"← 返回"文字链接
- Green Accent（`#00754A`）颜色，14/700 Proxima Nova
- 左侧 `<` 箭头使用同一绿色
- 深层子页面上的面包屑替代方案

## 5. 布局原则

### 间距系统

以 rem 为单位的语义化比例（锚点 `1rem = 10px`）：

| Token | Rem | 像素 | 典型用途 |
|-------|-----|--------|-------------|
| `--space-1` | `0.4rem` | 4px | 最紧凑的内联内边距 |
| `--space-2` | `0.8rem` | 8px | 小间隙，按钮垂直内边距 |
| `--space-3` | `1.6rem` | 16px | 默认——卡片内边距，xs 外边距 |
| `--space-4` | `2.4rem` | 24px | 区块内间距，md 外边距 |
| `--space-5` | `3.2rem` | 32px | 主要区块间距 |
| `--space-6` | `4rem` | 40px | 大间距，lg 外边距，标题区块 |
| `--space-7` | `4.8rem` | 48px | 区块间间距 |
| `--space-8` | `5.6rem` | 56px | 超大留白——Frap 高度 |
| `--space-9` | `6.4rem` | 64px | 最宽的区块内边距 |

**外边距 token：**
- `--outerGutter: 1.6rem`（16px，默认 / 移动端）
- `--outerGutterMedium: 2.4rem`（24px，平板）
- `--outerGutterLarge: 4.0rem`（40px，桌面）

**通用节奏常量：** `1.6rem`（16px）在每个页面都频繁出现，作为默认外边距、卡片内边距基准以及正文 text-3 字号——是系统中最常用的间距单位。

### 网格与容器

- 列宽比例：`--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px`
- 礼品卡网格使用 3 至 5 列自适应网格，磁贴约为 `343px`
- Rewards 状态区块：`lg+` 断点下 3 列深绿色面板
- 主视觉：通过 `--headerCrateProportion` / `--contentCrateProportion` 实现 40%（图片）/ 60%（内容）的不对称分割

### 留白哲学

留白传递出"咖啡馆里空间充裕"的感受。区块内边距偏大（40–64px）。内容块之间以留白分隔，而非分隔线。奶油色画布（`#f2f0eb`）本身就是白色卡片与绿色特色横幅之间的视觉呼吸。

### 圆角体系

| 值 | 用途 |
|-------|-----|
| `12px` | 卡片、弹窗、菜单商品磁贴（`--cardBorderRadius`） |
| `12px 12px 0 0` | 全宽反馈标签（仅顶部圆角） |
| `50px` | 所有按钮——全胶囊圆角（`--buttonBorderRadius`） |
| `50%` | 圆形图标、Frap 悬浮按钮、头像缩略图 |
| 特殊值 | `3.3333%/5.298%` 椭圆形，用于 Starbucks Visa 卡片模型（`--svcRoundedCorners`） |

## 6. 深度与层级

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 卡片 | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | 默认内容卡——轻柔的双重阴影 |
| 全局导航 | `0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)` | 固定顶部栏的三层柔和托起感 |
| Frap 底层光晕 | `0 0 6px rgba(0,0,0,0.24)` | 悬浮圆形 CTA 周围的基础光晕 |
| Frap 环境光 | `0 8px 12px rgba(0,0,0,0.14)` | 叠加的定向环境光——让 Frap 向前浮起 |
| 礼品卡 | 插画摄影周围的轻柔投影 | 礼品磁贴的实体卡片质感 |
| Starbucks Card（SVC）| `drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))` | Starbucks Card 视觉的叠加 SVG 阴影 |

**阴影哲学：** 轻柔叠加，基于纯色——系统从不使用单一的重投影。而是将 2–3 个低透明度阴影以不同偏移叠加，模拟真实世界的环境光 + 直射光。Frap 按钮是任意页面上层级最高的元素。

### 装饰性深度

- **无渐变系统**——界面均为纯色色块
- **色块分区**传递感知深度（深绿色横幅在奶油/白色主体区块之间被读作"内凹特色区域"）
- **SVG 滤镜阴影**赋予 Starbucks Card 视觉轻微的三维实体感，无需使用 box-shadow

## 7. 规范与禁忌

### 应该

- 使用 Neutral Warm（`#f2f0eb`）或 Ceramic（`#edebe9`）作为页面画布，而非纯白色——暖奶油色是标志性设计
- 将绿色层级映射到其预定的界面角色——Starbucks Green 用于标题，Green Accent 用于 CTA，House Green 用于深色横幅，Uplift 用于装饰
- 在整套系统中保持 SoDoSans 的紧缩字距 `-0.01em` / `-0.16px`
- 所有按钮无一例外使用 50px 全胶囊圆角
- 将 `transform: scale(0.95)` 作为通用的按钮激活态
- 将金色保留用于 Rewards 会员等级的仪式感场景
- 几乎所有内容使用 SoDoSans；仅在 Rewards 编辑性标题处切换为 Lander Tall 衬线体；Kalam 手写体仅限 Careers"杯名"场景
- 叠加 2–3 个低透明度阴影，而非单一较重的投影
- 在所有购物界面持续使用 Frap 圆形 CTA 作为悬浮的下单入口
- 让奶油色画布在内容卡之间自然呼吸——使用留白，而非分隔线

### 不应该

- 不要将纯白色用作页面画布——暖奶油色的温度感是系统的核心承载
- 不要只选"一种品牌绿"——四层绿色体系是经过深思熟虑的；全用 `#006241` 会使品牌层次扁平化
- 不要将金色用于通用强调——它是 Rewards 信号，仅此而已
- 不要将按钮设计为直角——50px 胶囊是通用规范
- 不要引入渐变填充——系统全程采用纯色色块
- 不要通过字号区分 h1 和 h2 的层级——层级来自字重 + 颜色（600 Starbucks Green 对比 400 Text Black）
- 不要将纯黑用于正文——`rgba(0,0,0,0.87)` 才与暖色画布相匹配
- 不要省略按钮的 `scale(0.95)` 激活反馈——这是标志性微交互
- 不要使用单一重阴影；始终叠加 2–3 个低透明度阴影
- 不要在主购物流程中引入衬线或手写体——它们分别属于 Rewards 和 Careers 语境

## 8. 响应式行为

### 断点

根据组件宽度 token 和导航高度递进推导：

| 名称 | 宽度 | 关键变化 |
|------|-------|-------------|
| xs | < 480px | 全局导航 64px；汉堡菜单；单列布局；胶囊按钮全宽 |
| 移动端 | 480–767px | 全局导航 72px；礼品卡网格 2 列；卡片内边距收紧 |
| 平板 | 768–1023px | 全局导航 83px；礼品卡网格 3 列；开始出现主视觉分割 |
| 桌面 | 1024–1439px | 全局导航 99px；礼品卡网格 4 列；完整不对称主视觉 40/60 |
| 超宽 | 1440px+ | 内容限宽至 `--columnWidthXLarge`；礼品卡网格 5 列；额外奶油色边距 |

### 触摸目标

- 内边距 `7px 16px` 的胶囊按钮约 32px 高——低于纯触控界面的 WCAG AAA 最小 44px 标准。移动端按钮内边距可视觉扩展以达到最低要求。
- `56px` 的 Frap 悬浮圆形按钮远超最低要求。
- Frap 使用 `--frapTouchOffset: calc(-1 * .8rem)`，将点击区域向视觉边缘外延伸 8px。
- 表单浮动标签输入框在移动端字号更大（基础 1.6rem 对比桌面 1.9rem）——在距离感阅读时更易点击和辨认。

### 折叠策略

- **全局导航高度跨断点递进**：64 → 72 → 83 → 99px，而非单一固定值
- **主视觉分割折叠**：40/60 不对称分割 → 移动端堆叠（图片在上，内容在下）
- **礼品卡网格**：跨断点 5 列 → 4 列 → 3 列 → 2 列 → 1 列，卡片宽度相应调整
- **特色横幅**：始终全宽，但移动端上文字与图片垂直堆叠
- **外边距随视口增大而扩展**：16px → 24px → 40px
- **Rewards 三列状态面板**：移动端折叠为单列

### 图片行为

- 移动端主视觉产品摄影垂直裁剪更紧；内容成为视觉锚点
- 礼品卡插画保持宽高比；卡片网格自动重排
- 图片加载时使用 `opacity 0.3s ease-in` 淡入过渡（避免突兀弹出）
- Rewards 手持 App 摄影按比例缩放；不拉伸

## 9. Agent 提示词指南

### 颜色快速参考

- 主要 CTA："Green Accent（`#00754A`）"
- 主要 CTA 文字："White（`#ffffff`）"
- 品牌标题："Starbucks Green（`#006241`）"
- 特色横幅 / 页脚："House Green（`#1E3932`）"
- 页面画布："Neutral Warm（`#f2f0eb`）"
- 卡片画布："White（`#ffffff`）"
- 浅色背景标题文字："Text Black（`rgba(0,0,0,0.87)`）"
- 浅色背景正文："Text Black Soft（`rgba(0,0,0,0.58)`）"
- 深绿色背景正文："Text White Soft（`rgba(255,255,255,0.70)`）"
- Rewards 强调色："Gold（`#cba258`）"
- Rewards 文字色："Rewards Green（`#33433d`）"
- 破坏性操作："Red（`#c82014`）"

### 组件提示词示例

1. "创建一个星巴克主要 CTA 胶囊按钮：Green Accent（`#00754A`）背景，白色文字'探索下午茶菜单'，SoDoSans 字体，16px 字号，字重 600，字间距 `-0.01em`，`50px` 圆角（全胶囊），`7px 16px` 内边距。激活态使用 `transform: scale(0.95)`，过渡 `0.2s ease`。"

2. "设计一张内容卡片：White（`#ffffff`）背景，`12px` 圆角，叠加阴影 `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)`。内容内边距 `16–24px`（`--space-3` 至 `--space-4`）。放置于 Neutral Warm（`#f2f0eb`）页面画布上，与相邻元素保持 `16px` 间距。"

3. "构建 Frap 悬浮圆形订单按钮——直径 `56px`，Green Accent（`#00754A`）填充，居中白色购物袋图标。叠加阴影：`0 0 6px rgba(0,0,0,0.24)` + `0 8px 12px rgba(0,0,0,0.14)`。固定于右下角，`-0.8rem` 触摸偏移。激活态将环境光阴影收缩至 `0 8px 12px rgba(0,0,0,0)`，同时 `scale(0.95)`。"

4. "构建一个深绿色特色横幅——全宽区块，House Green（`#1E3932`）背景。左栏：白色 SoDoSans h2，24px，字重 600；下方为 Text White Soft（`rgba(255,255,255,0.70)`）正文段落；以及含两个按钮的 CTA 行（主要按钮：白色填充配 Green Accent 文字；次要按钮：深色背景白色描边）。右栏：产品摄影。分割比例 40/60，`768px` 以下垂直堆叠。"

5. "创建一个 Rewards 状态卡——House Green（`#1E3932`）面板，`12px` 圆角，顶部彩色渐变条（铜卡/银卡/金卡层级）。标题：SoDoSans 24px，字重 600，白色。权益列表：白色项目符号，次要说明使用 `rgba(255,255,255,0.70)`。底部晋级说明文字使用 Text White Soft。`lg+` 断点下 3 列面板网格排列，移动端单列。"

6. "设计一个礼品卡磁贴——圆角与 `12px` 对齐，整张卡片以插画摄影（手绘水彩风）铺满。轻柔投影使其在奶油色画布上呈现出实体卡片的质感。在网格上方按类别标签分组（'春季'、'感谢'、'生日'），SoDoSans 24px，字重 400。"

7. "创建一个星巴克产品详情标题——House Green（`#1E3932`）横幅，产品标题上方显示面包屑'菜单 / 清爽饮品 / 粉色能量饮品'（白色 14/400）。产品标题：SoDoSans 32/700 大写白色。标题下方居中显示产品照片。照片下方：4 列尺寸选择器横向排列——每个杯形图标按钮显示竖向杯形轮廓、尺寸名称（'Tall' / 'Grande' / 'Venti' / 'Trenta'，16/700 白色）及液量（13/400 Text White Soft）。选中尺寸的杯形图标外侧显示 `2px solid #00754A` 圆形边框。"

8. "构建星巴克自定义流程——在尺寸选择器下方，3 行描边矩形输入框（白色背景，`1px solid #d6dbde` 边框，`4px` 圆角）。每行顶部边框上方显示浮动标签（'加料'、'牛奶'、'加料'）——13/700 Text Black 大写。值居中显示（如'冰块'、'椰奶'）。右侧：Text Black Soft 颜色向下箭头。果粒行内嵌数字步进器（`−` `1` `+`，`32px` 圆形描边按钮）。三个输入框下方：描边绿色'Customize'胶囊按钮（带金色闪光图标），`50px` 圆角，`14px 40px` 内边距。同行搭配 Green Accent 填充的'加入订单'胶囊按钮。"

9. "设计星巴克产品说明横幅——产品标题下方的全宽 House Green（`#1E3932`）横幅。顶部：金色描边'200★ item' Rewards 积分胶囊（`50px` 圆角，`4px 12px` 内边距，金色 `#cba258` 边框和文字）。下方：白色产品说明 16/400/1.5。营养信息内联展示（白色 14/700，含信息图标提示，'140 卡路里，25g 糖，2.5g 脂肪'）。白色描边绿底胶囊按钮'完整营养成分及配料表'。垂直内边距 32px。"

10. "创建星巴克营养信息表格——White 卡片内的两栏布局。左栏：'配料'标题（24/400 Text Black），后接配料列表，或占位段落'该商品暂无信息'（14/400 Text Black Soft）。右栏：'营养'标题，然后是标签/数值行（营养素名称居左，数值居右），每行以 `1px solid #e7e7e7` 细线分隔。字体：标签 14/400 Text Black，数值 14/700 Text Black 右对齐。底部星号脚注：13/400 Text Black Soft。"

### 迭代指南

在基于本设计系统对已有界面进行迭代时：
1. 每次专注于**一个**组件
2. 引用本文档中的具体颜色名称和十六进制代码
3. 在精确数值旁配合自然语言描述（"暖奶油色画布"、"四层绿色体系"）
4. 全程保持 50px 胶囊 + `scale(0.95)` 激活态
5. 检查绿色是否映射到正确角色（Green Accent 用于 CTA，Starbucks Green 用于标题，House Green 用于横幅）
6. 不要引入渐变——系统全程为纯色色块
7. 全系统统一保持 SoDoSans 字距 `-0.01em` / `-0.16px`

### 已知局限

- SoDoSans 是专有字体，无法在 Google Fonts 获取——公开实现时使用 Inter 或 Manrope 作为替代，并记录替换说明
- Lander Tall（Rewards 衬线体）同为定制字体——可替换为 Iowan Old Style、Lora 或 Source Serif Pro
- 除已记录的少数几个动画时长（`--duration: 0.4s`、`--iconTransition: all ease-out 0.2s`、`--expanderDuration: 300ms`），其他每个交互界面的具体动画时长未全面记录
- 表单错误状态的完整样式（红色边框粗细、图标位置）在色调 token 中可见，但未完整提取
- Careers 页面专属组件（杯名卡片、搜索单选网格）在 token 名称中有所引用，但本次提取未涵盖
- Starbucks Visa 卡 / Starbucks Card（SVC）的详细模型规格通过 `--svcRoundedCorners` 和 `--svcShadowFilter` token 有所提示，但尚未完整记录