以 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 样式集。

层级体系

字间距 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：

• --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）本身就是白色卡片与绿色特色横幅之间的视觉呼吸。

圆角体系

6. 深度与层级

阴影哲学： 轻柔叠加，基于纯色——系统从不使用单一的重投影。而是将 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 和导航高度递进推导：

触摸目标

• 内边距 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 有所提示，但尚未完整记录