受 Starbucks 启发的设计系统
1. 视觉主题与氛围
Starbucks 的设计系统是一个温暖、自信、零售旗舰感的视觉语言，把门店围裙的绿色铺到每一个表面。画布在中性暖奶油色（#f2f0eb）与陶瓷米白（#edebe9）之间交替——这些颜色呼应了真实的门店材质：纸质餐巾、咖啡馆的墙、木质饰面——而标志性的 Starbucks Green（#006241）则锚定在首屏、CTA 和 Rewards 体验上。绿色分为四个校准过的层次（Starbucks、Accent、House、Uplift），各自对应一个明确的表面角色；金色（#cba258）只出现在 Rewards 等级仪式感时刻，不会作为通用点缀色。
字体排版承载了大部分品牌声音。专有的 SoDoSans 字体（Starbucks 自有）出现在几乎每个表面，配以紧致的 -0.16px 字距——读起来自信而友好，并非时尚杂志式的严苛。有意思的是：Rewards 页会在特定的标题时刻切换为暖色衬线（"Lander Tall", "Iowan Old Style", Georgia），隐隐呼应咖啡馆黑板的怀旧感。而 Careers 页则在个人杯名装饰处使用手写体（"Kalam", "Comic Sans MS", cursive）。三种字体、三种语境——系统对每种字体何时出现都纪律严明。
表面通过圆润的几何呼吸。每个按钮是 50px 的全圆角胶囊。卡片采用 12px 的圆角矩形。悬浮的"Frap"圆形下单按钮——一个 56px 的 Green Accent（#00754A）圆——是产品的标志性深度手法：它浮在右下角，带有层叠阴影堆栈（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字距作为统一声线 - 语境特定的字体切换：Rewards 页面用衬线（Lander Tall），Careers 页面用 Kalam 手写体
- 全圆角胶囊按钮（
50px半径）通用，scale(0.95)按下反馈作为标志性微交互 - 悬浮的"Frap"圆形 CTA（
56px，Green Accent 填充，层叠阴影堆栈）——产品的标志性层次元素 - 礼品卡表面被设计为拍摄的真实实物——每张卡都是独立的插画照片，而非生成的图形
- 12px 卡片圆角 + 极轻柔阴影让内容卡片保持"扁平带一点抬起"
- 基于 rem 的间距尺度以 1.6rem（约 16px）=
--space-3为锚，递进到 6.4rem（约 64px）
色块页面节奏： 奶油色首屏 → 白色内容区段 → 深绿色（#1E3932）特色带配白色文字 → 奶油色工具区 → 深绿色（#1E3932）页脚配金色 / 白色文字——明亮的正文被浓缩咖啡般的深色起止框住。
2. 配色与角色
分析页面来源： 首页、rewards、gift cards、产品详情（Pink Energy Drink）、产品营养（Cold Brew）。
主色
- Starbucks Green（
#006241）：历史悠久的品牌绿。用于 h1 标题、Rewards 页的主区段标题，以及任何需要单一主导色的主品牌信号位置。 - Green Accent（
#00754A）：略亮、更有光泽的绿色。主填充色 CTA（"Explore our afternoon menu"、"See the spring menu"）以及悬浮 Frap 圆形按钮的填充色。 - House Green（
#1E3932）：深邃近黑的品牌绿。页脚表面、特色带背景、Rewards 等级深色表面，以及 Rewards 页上"Free coffee is just the beginning"首屏带的主背景。 - Green Uplift（
#2b5148）：辅助中深绿色，谨慎用于装饰点缀和深色渐变时刻。 - Green Light（
#d4e9e2）：淡薄荷色，用于表单有效状态色和浅绿色工具表面。
辅助与点缀
- Gold（
#cba258）：几乎专门用于 Rewards 等级仪式感——Gold 等级横幅、合作伙伴徽章（SkyMiles、Bonvoy）以及高级感点缀。从不用作通用品牌色。 - Gold Light（
#dfc49d）：柔和的金色，用于金色等级区段的背景晕染。 - Gold Lightest（
#faf6ee）：奶油金色页面表面晕染，铺在 Rewards 页的合作伙伴区段下方——将金色点缀拉回暖中性体系。
表面与背景
- White（
#ffffff）：主卡片和模态框表面。也是礼品卡磁贴的卡片填充。 - Neutral Cool（
#f9f9f9）：淡冷灰色表面，用于下拉菜单（"Account"下拉）、表单卡片包裹层和安静的工具容器。 - Neutral Warm（
#f2f0eb）：暖奶油色主页面画布，用于 Rewards 工具区和首屏带。 - Ceramic（
#edebe9）：略暖 / 略深的奶油色，用于区段分隔、柔和页面区段晕染，以及 Rewards 合作伙伴带。 - Black（
#000000）：深色墨色，仅保留给页面顶部 CTA 条（"Join now"）和高对比度顶部导航登录按钮。
中性与文字
- 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（
#33443d）：仅用于 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——Starbucks 专有的企业字体，几乎出现在每个表面 - 加载回落：
"Helvetica Neue", Helvetica, Arial, sans-serif——SoDoSans 加载前用户看到的字体 - Rewards 衬线：
"Lander Tall", "Iowan Old Style", Georgia, serif——用于 Rewards 页特定标题时刻，营造温暖的编辑感 - Careers 手写体：
"Kalam", "Comic Sans MS", cursive——专门用于 Careers 页的"杯名"装饰，呼应 Starbucks 杯上手写的名字
: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 vs 400）和颜色（Starbucks Green vs 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 是 Starbucks 专有字体（从 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. 主填充按钮——"Explore our afternoon menu / Sign up for free"
- 背景：
#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. 主描边按钮——"Give them a try / Start an order"
- 背景：透明
- 文字：
#00754A（Green Accent） - 边框：
1px solid #00754A - 圆角 / 内边距 / 激活态 / 过渡与主填充按钮相同
3. 黑色填充按钮——"Join now"
- 背景：
#000000 - 文字：
#ffffff - 边框：
1px solid #000000 - 圆角：
50px，内边距：7px 16px - 字体：14px，字重 600
- 用于页面顶部加入条以及类似的转化时刻
4. 深色描边按钮——"Sign in"
- 背景：透明
- 文字：
rgba(0, 0, 0, 0.87)（Text Black） - 边框：
1px solid rgba(0, 0, 0, 0.87) - 圆角：
50px，内边距：7px 16px - 字体：14px，字重 600
5. 绿底绿字反色按钮——"See the spring menu"
- 背景：
#ffffff - 文字：
#00754A - 边框：
1px solid #ffffff - 用于按钮背后的表面是深绿色 House Green 带时——白底配绿字，而非绿色填充胶囊叠在绿色背景上
6. 深色描边按钮——"Learn more / Order now"
- 背景：透明
- 文字：
#ffffff - 边框：
1px solid #ffffff - 用于深绿色特色带上的次要动作，与白色填充 CTA 配对
7. 同意按钮（深绿色变体）
- 背景：
rgb(0, 130, 72)（cookie 同意模块专用的特定绿色变体） - 文字：
#ffffff - 无边框，
50px圆角，7px 16px内边距，14px / 字重 400 - 比 Green Accent 略亮——专门用于同意横幅的 Agree 动作
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. 全宽反馈标签——"Provide feedback"
- 背景：
#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） - 用于：特色卡片、菜单项磁贴、奖励状态面板
礼品卡磁贴
- 背景：插画照片填满卡片（无实色背景）
- 圆角：与卡片相似（约
12px，角略紧） - 阴影：比默认卡片更轻——这些被当作放在画布上的实体卡片
- 在卡片网格上方按品类分类标注（Spring、Thank You、Birthday、Celebration、Mother's Day、Appreciation、Encouragement、Milestones、Anytime）
Rewards 状态卡片（Rewards 页标志性）
- 三列网格：Bronze / Gold / Silver-ish——每个都是深绿色（
#1E3932）面板，包含：- 彩色渐变 / 彩色顶部环
- 编号"等级"徽章
- 大号 SoDoSans 字重 600 的状态标题
- 白色 / 半透明白色文字的星级 / 权益列表
- 底部"As you earn more stars…"进度说明
合作伙伴卡片（Rewards）
- 背景：
#faf6ee（Gold Lightest）暖奶油表面 - 内容：合作伙伴 logo（"SkyMiles"、"Bonvoy"）居中，下方有描述性文字
- 圆角和阴影遵循默认卡片规范
下拉菜单（Account 下拉、顶部导航）
- 背景：
#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 - 使用上述选中输入框的 cubic-bezier 动画（带 2.32 略微"弹性"过冲的曲线）
导航
全局导航（顶部栏）
- 固定位置，高度渐进：
64pxxs →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：Menu · Rewards · Gift Cards
- 右侧：Find a store 链接 + Sign in（描边）+ Join now（黑色填充）
子导航（第二栏，例如 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 和礼品页的 FAQ 区段
Cookie 同意模块
深绿色模态卡片置于页面顶部，含"Agree"（绿色填充）和"Manage preferences"（描边）按钮。首次访问时显示；可关闭。
产品详情组件（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
Add-in / 牛奶选择（描边矩形）
- 背景：
#ffffff - 边框：
1px solid #d6dbde（Input Border） - 圆角：
4px - 在其列内全宽
- 顶部边框上方浮动标签："Add-ins" / "Milk" / "Add-ins"——Text Black 13/700 大写，
0.325px字距 - 居中显示值（例如 "Ice"、"Coconut"、"Strawberry Fruit Inclusions scoop"）：16/400 Text Black
- 右侧 Text Black Soft 颜色下拉箭头图标
- 聚焦：边框切换到 Green Accent（
#00754A）
数字步进器
- 在需要数量的 Add-in 行中嵌入（例如 Strawberry Fruit Inclusions scoop）
−减号按钮 + 数量 ++加号按钮，全部内联在标签右侧- 按钮：圆形
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"
- 背景：透明
- 边框：
1px solid #cba258（Gold） - 文字：
#cba258（Gold） - 圆角：
50px（全胶囊） - 内边距：
4px 12px - 内容："200★ item"，其中
★是小的实心星形字形——表示兑换此商品所需的 Rewards 星星数 - 字体：Proxima Nova 13/700，
0.5px字距 - 仅用于可通过 Rewards 兑换的商品
产品描述带
- 全宽深绿色带（
#1E3932House Green） - 自上而下包含：
- Rewards 成本胶囊（金色），如果适用
- 白色产品描述正文（16/400/1.5）
- 内联营养摘要（"140 calories, 25g sugar, 2.5g fat"）带信息图标提示——白色 14/700
- "Full nutrition & ingredients list" 绿底白边描边胶囊按钮
- 内边距：
32px垂直 - 出现在主产品标题带下方
成分 / 营养表
- Nutrition 页两列布局
- 左列："Ingredients" 标题 + 列表，或 "Not available for this item" 占位文字块加 Text Black Soft 14/400 说明段
- 右列："Nutrition" 标题 + 标签 / 值行
- 每行：营养素标签（Proxima Nova 14/400）左、值（例如 "140 calories"、"25g"、"205 mg**"）右，下方
1px solid #e7e7e7细线分隔 - 咖啡因 / 星号标记脚注位于底部 13/400 Text Black Soft
- 可复用的符合营养成分法规的表格模式
门店可用性选择器
- 出现在尺寸选项行上方的深绿色特色带上
- 全宽圆角矩形，透明白色内部
- 文字："For item availability, choose a store"，白色 14/400
- 右侧：下拉箭头图标 + 白色描边购物袋 SVG 图标
- 圆角：
4px - 高度：约 48px
PDP 面包屑
- "Menu / Refreshers / Pink Energy Drink" 路径显示在产品标题上方
- 分隔符：
/斜杠字符 Text Black Soft 颜色 - 当前页无链接，前几页为带绿色下划线的链接
- 字体：14/400 Proxima Nova
- 出现在所有 PDP 页
返回箭头链接（PDP 营养 / 详情子页）
- 营养页区段标题上方的 "← Back" 文本链接
- 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 外边距、header crate |
--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）出现在每个页面上，作为默认外边距、卡片内边距基准和字号 3 正文——是系统出现频率最高的间距单位。
网格与容器
- 列宽尺度：
--columnWidthSmall: 343px/Medium: 500px/Large: 720px/XLarge: 1440px - 礼品卡网格使用约
343px磁贴的 3-5 列响应式网格 - 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-Card 样图（--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 卡（SVC） | drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24)) | Starbucks 卡视觉的层叠 SVG 投影 |
阴影哲学： 极柔、层叠在实色之上——系统从不使用单一的重投影。相反，它堆叠 2–3 个低透明度阴影配合不同偏移，模拟现实世界的环境光 + 直射光。Frap 按钮是任何页面上升得最高的元素。
装饰性深度
- 没有渐变系统——表面是实色块
- 色块带状分布承载感知深度（深绿色带读作奶油 / 白色正文区段之间的"凹陷特色区"）
- SVG 滤镜阴影在 Starbucks 卡视觉上增加轻微的 3D 实体感，不使用 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 vs 400 Text Black）
- 不要用纯黑作为正文色——
rgba(0,0,0,0.87)与暖画布匹配 - 不要跳过按钮上的
scale(0.95)激活反馈——这是标志性的微交互 - 不要堆叠单个重投影；始终层叠 2–3 个低透明度的
- 不要在主要购物流程中引入衬线或手写体——它们分别属于 Rewards 和 Careers 语境
8. 响应式行为
断点
从组件宽度 token 和渐进导航高度推断：
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| xs | < 480px | 全局导航 64px；汉堡菜单；单列布局；胶囊按钮全宽 |
| Mobile | 480–767px | 全局导航 72px；礼品卡网格 2 列；卡片内边距收紧 |
| Tablet | 768–1023px | 全局导航 83px；礼品卡网格 3 列；首屏分屏开始出现 |
| Desktop | 1024–1439px | 全局导航 99px；礼品卡网格 4 列；完整非对称首屏 40/60 |
| XLarge | 1440px+ | 内容上限为 --columnWidthXLarge；礼品卡网格 5 列；额外奶油色边距 |
触摸目标
- 胶囊按钮
7px 16px内边距约 32px 高——低于仅触屏表面的 44px WCAG AAA 最小值。在移动端，按钮内边距可视地扩展以满足最小值。 - Frap 悬浮圆形按钮 56px 远超最小值。
- Frap 使用
--frapTouchOffset: calc(-1 * .8rem)将可点击区域在视觉边缘之外延伸 8px。 - 表单浮动标签输入框在移动端放大标签字号（基础 1.6rem vs 桌面 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. 智能体提示指南
快速颜色参考
- 主 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（
#33443d）" - 破坏性："Red（
#c82014）"
示例组件提示
-
"创建一个主 Starbucks CTA 胶囊按钮：Green Accent（
#00754A）背景、白色文字 'Explore our afternoon menu'、SoDoSans 字体 16px 字重 600 字距-0.01em、50px圆角（全胶囊）、7px 16px内边距。应用transform: scale(0.95)作为激活态，0.2s ease过渡。" -
"设计一个内容卡片：白色（
#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间距。" -
"构建 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)。" -
"构建深绿色特色带——全宽区段 House Green（
#1E3932）背景。左列：白色 SoDoSans h2 24px 字重 600，后跟 Text White Soft（rgba(255,255,255,0.70)）正文段，以及一行两个 CTA（白底配 Green Accent 文字为主，白色描边为次）。右列：产品摄影。分屏比例 40/60，768px以下垂直堆叠。" -
"创建 Rewards 状态卡片——House Green（
#1E3932）面板12px圆角，顶部彩色渐变条（Bronze/Silver/Gold 等级）。SoDoSans 24px 字重 600 白色标题。权益列表为白色要点 +rgba(255,255,255,0.70)次要说明。底部进度文字用 Text White Soft。lg+时三列网格堆叠，移动端单列。" -
"设计礼品卡磁贴——卡片圆角与
12px一致，整个表面填充插画照片（手绘水彩画感）。轻微投影让它感觉像实体卡片放在奶油色画布上。卡片网格上方按品类分类标签（'Spring'、'Thank You'、'Birthday'）用 SoDoSans 24px 字重 400。" -
"创建 Starbucks 产品详情头部——House Green（
#1E3932）带配面包屑 'Menu / Refreshers / Pink Energy Drink' 14/400 白色位于产品标题之上，SoDoSans 32/700 大写白色产品标题。产品照片居中位于标题下方。照片下方：一行 4 列尺寸选择器——每个杯形图标按钮显示垂直杯形轮廓、尺寸名（'Tall' / 'Grande' / 'Venti' / 'Trenta'）16/700 白色，容量 13/400 Text White Soft。选中尺寸的杯图标外圈2px solid #00754A环形轮廓。" -
"构建 Starbucks 定制流程——在尺寸选择器下方，3 个堆叠的描边矩形输入行（白色背景、
1px solid #d6dbde边框、4px圆角）。每个顶部边框上方有浮动标签（'Add-ins'、'Milk'、'Add-ins'）Text Black 13/700 大写。值居中（例如 'Ice'、'Coconut'）。右侧：Text Black Soft 颜色下拉箭头。勺子行内嵌入数字步进器（−1+圆形32px描边按钮）。所有三个字段下方：绿色描边 'Customize' 胶囊配金色闪光图标，50px圆角，14px 40px内边距。同一行配 Green Accent 填充 'Add to Order' 胶囊。" -
"设计 Starbucks 产品描述带——主产品头部下方全宽 House Green（
#1E3932）。顶部：金色描边 '200★ item' Rewards 成本胶囊（50px圆角，4px 12px内边距，金色#cba258边框和文字）。下方：白色 16/400/1.5 产品描述。内联营养摘要白色 14/700（'140 calories, 25g sugar, 2.5g fat'）配信息图标提示。绿底白边描边胶囊按钮 'Full nutrition & ingredients list'。垂直内边距32px。" -
"创建 Starbucks 营养成分表——白色卡片内两列布局。左列：'Ingredients' 标题（24/400 Text Black），后跟成分列表或 'Not available for this item' 占位段（14/400 Text Black Soft）。右列：'Nutrition' 标题，然后是标签 / 值行（营养素名左、值右），下方
1px solid #e7e7e7细线分隔。字体：标签 14/400 Text Black，值 14/700 Text Black 右对齐。底部星号脚注标记 13/400 Text Black Soft。"
迭代指南
在改进使用此设计系统生成的现有屏幕时：
- 一次专注于一个组件
- 参考本文档中的具体颜色名称和十六进制值
- 同时使用自然语言描述（"温暖奶油色画布"、"四级绿色体系"）和精确数值
- 全局保留 50px 胶囊 +
scale(0.95)激活态 - 检查绿色是否映射到正确角色（Green Accent 用于 CTA，Starbucks Green 用于标题，House Green 用于色带）
- 不要引入渐变——系统是色块
- 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 Card / Starbucks-Card（SVC）详细样图规格在
--svcRoundedCorners和--svcShadowFiltertoken 中有暗示但未完整记录