④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,583 @@
+# 以 Starbucks 為靈感的設計系統
+
+> Category: 電商與零售
+> 全球咖啡零售品牌。四階綠色系統、溫暖奶油色畫布、全圓角膠囊按鈕。
+
+## 1. 視覺主題與氛圍
+
+Starbucks 的設計系統是一套**溫暖而自信的零售旗艦**風格，將圍裙上的綠色延伸至每一個介面層面。畫布在中性暖奶油色（`#f2f0eb`）與陶瓷白（`#edebe9`）之間交替——這兩種顏色呼應了實體店的材質：紙巾、咖啡廳牆壁、木質裝潢——而標誌性的 **Starbucks 綠**（`#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」浮動 CTA——一個 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、禮品卡、商品詳情（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`）：主要卡片與 Modal 底面；同時用於禮品卡圖塊的卡片填充。
+- **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**（`#33433d`）：專屬於 Rewards 頁面文字區塊的消光板岩綠——比 Text Black 略帶「塵霧感」的閱讀色，在不使用完整 Starbucks Green 的情況下傳遞「Rewards 底面」的信號。
+
+### 語意色與強調色
+
+- **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 | 浮動標籤啟用狀態、圖說微型文字 |
+| 按鈕標籤 | 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`
+- 啟用狀態：`transform: scale(0.95)`，透過 `--buttonActiveScale`
+- 過渡：`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 略亮——專屬用於同意橫幅的「同意」操作
+
+**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`）
+- 用於：特色卡片、選單品項圖塊、Rewards 等級面板
+
+**禮品卡圖塊**
+- 背景：插畫攝影填滿整張卡片（無純色背景）
+- 圓角：與卡片相近（約 `12px`，邊角略緊）
+- 陰影：比預設卡片更輕——這些卡片被視為放置於畫布上的實體卡片
+- 以上方類別標籤分組（春季、感謝、生日、慶祝、母親節、感激、鼓勵、里程碑、隨時）
+
+**Rewards 等級卡片（Rewards 頁面標誌元素）**
+- 三欄格：Bronze / Gold / Silver-ish——每個均為深綠（`#1E3932`）面板，包含：
+  - 帶色漸層 / 色彩標頭環
+  - 帶編號的「Level」徽章
+  - 以大字 SoDoSans 字重 600 呈現的等級標題
+  - 白色 / 半透明白色文字的星星 / 權益清單
+  - 底部「As you earn more stars…」進度說明文字
+
+**合作夥伴卡片（Rewards）**
+- 背景：`#faf6ee`（Gold Lightest）暖奶油底面
+- 內容：合作夥伴 Logo（「SkyMiles」、「Bonvoy」）居中，下方附說明文字
+- 圓角與陰影遵循預設卡片規格
+
+**下拉選單（Account 下拉，頂部導航）**
+- 背景：`#f9f9f9`（Neutral Cool）
+- 選單項目：`24px / 字重 400`，Text Black
+- 無邊框——僅以背景底面切換對比白色導航欄
+
+**Modal**
+- 內距：`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：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 與禮品卡頁面的常見問題區塊
+
+### Cookie 同意模組
+
+頁面頂部的深綠 Modal 卡片，包含「同意」（綠色填充）與「管理偏好設定」（外框型）按鈕。首次訪問時出現，可關閉。
+
+### 商品詳情元件（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`
+- 欄位全寬
+- 邊框上方浮動標籤：「Add-ins」/ 「Milk」/ 「Add-ins」——13/700，Text Black，大寫，`0.325px` 字元間距
+- 值居中顯示（例如「Ice」、「Coconut」、「Strawberry Fruit Inclusions scoop」）：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」**
+- 背景：透明
+- 邊框：`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 calories, 25g sugar, 2.5g fat」），附資訊圖示提示——14/700，白色
+  4. 「Full nutrition & ingredients list」白色外框綠色底膠囊按鈕
+- 垂直內距：`32px`
+- 出現於主要商品標頭橫幅下方
+
+**成分 / 營養資訊表格**
+- 營養頁面採用兩欄版面
+- 左欄：「Ingredients」標頭 + 清單，或「Not available for this item」占位文字區塊，附 14/400 Text Black Soft 說明段落
+- 右欄：「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 的 `/` 斜線字符
+- 當前頁面無連結，前方頁面為帶底線的 Green Accent 連結
+- 字體：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，標頭容器 |
+| `--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）出現於每個頁面，作為預設外側欄距、卡片內距基準，以及 body text-3 字體大小——是系統中最頻繁使用的間距單位。
+
+### 格線與容器
+
+- 欄寬比例：`--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px`
+- 禮品卡格線：響應式 3 至 5 欄，圖塊約 `343px`
+- Rewards 等級區塊：`lg+` 斷點採 3 欄深綠面板
+- 英雄：透過 `--headerCrateProportion` / `--contentCrateProportion` 實現 40%（圖片）/ 60%（內容）不對稱分割
+
+### 留白哲學
+
+留白傳遞「咖啡廳空間充裕」的感受。區塊內距偏寬鬆（40–64px）。內容區塊以留白分隔，而非分隔線。奶油色畫布（`#f2f0eb`）本身即是白色卡片與綠色特色橫幅之間的視覺呼吸空間。
+
+### 邊框圓角比例
+
+| 數值 | 用途 |
+|-------|-----|
+| `12px` | 卡片、Modal、選單品項圖塊（`--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 卡片視覺的疊加 SVG 投影 |
+
+**陰影哲學：** 極輕柔、層疊於純色之上——系統從不使用單一厚重的投影。而是以 2–3 個低透明度陰影疊加，搭配不同偏移量，模擬真實世界的環境光與直射光。Frap 按鈕是任何頁面中層級最高的元素。
+
+### 裝飾性深度
+
+- **無漸層系統**——底面為純色色塊
+- **色塊分帶**承載視覺深度感（深綠色帶讀起來像奶油色 / 白色主體區塊之間「凹陷的特色區域」）
+- **Starbucks Card 視覺上的 SVG 濾鏡陰影**增添了些許立體實體感，不使用 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；漢堡選單；單欄版面；膠囊按鈕全寬 |
+| 行動裝置 | 480–767px | 全域導航 72px；禮品卡格線 2 欄；卡片內距縮緊 |
+| 平板 | 768–1023px | 全域導航 83px；禮品卡格線 3 欄；英雄分割開始出現 |
+| 桌面 | 1024–1439px | 全域導航 99px；禮品卡格線 4 欄；完整 40/60 不對稱英雄 |
+| 超大螢幕 | 1440px+ | 內容上限至 `--columnWidthXLarge`；禮品卡格線 5 欄；額外奶油色邊距 |
+
+### 觸控目標
+
+- 膠囊按鈕以 `7px 16px` 內距計算高度約 32px——低於僅觸控介面的 WCAG AAA 44px 最低標準。行動裝置上按鈕內距可視覺上擴大以達到最低標準。
+- 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. 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. 「建立一個主要 Starbucks CTA 膠囊按鈕，背景為 Green Accent（`#00754A`），白色文字『Explore our afternoon menu』，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` 圓角，頂部帶色漸層條（Bronze / Silver / Gold 等級）。標題使用 SoDoSans 24px，字重 600，白色。權益清單為白色項目符號，次要說明使用 `rgba(255,255,255,0.70)`。底部進度說明文字使用 Text White Soft。`lg+` 採 3 欄格線，行動裝置單欄。」
+
+6. 「設計禮品卡圖塊——卡片圓角對應 `12px`，以插畫攝影（手繪水彩畫風格）填滿整個底面。細微投影讓它在奶油色畫布上呈現實體卡片感。以 SoDoSans 24px 字重 400 的類別標籤分組，顯示於格線上方（「Spring」、「Thank You」、「Birthday」）。」
+
+7. 「建立 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` 圓圈框選。」
+
+8. 「建立 Starbucks 自訂流程——尺寸選擇器下方，3 個堆疊的外框矩形輸入列（白色背景，`1px solid #d6dbde` 邊框，`4px` 圓角）。每列在頂部邊框上方有浮動標籤（「Add-ins」、「Milk」、「Add-ins」），13/700 Text Black 大寫。值居中顯示（例如『Ice』、『Coconut』）。右側：Text Black Soft 的向下箭頭。份數列嵌入數字步進器（`−` `1` `+`，配備 `32px` 外框圓形按鈕）。三個欄位下方：外框綠色『Customize』膠囊按鈕搭配金色閃耀圖示，`50px` 圓角，`14px 40px` 內距。同一列搭配 Green Accent 填充的『Add to Order』膠囊按鈕。」
+
+9. 「設計 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 &amp; ingredients list』。垂直內距 32px。」
+
+10. 「建立 Starbucks 營養資訊表格——White 卡片內的兩欄版面。左欄：『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。」
+
+### 迭代指南
+
+使用此設計系統優化現有畫面時：
+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 Card / Starbucks Card（SVC）的詳細模型規格由 `--svcRoundedCorners` 與 `--svcShadowFilter` token 暗示，但未完整記錄