# Starbucksにインスパイアされたデザインシステム

> Category: Eコマース＆小売
> グローバルなコーヒー小売ブランド。4段階のグリーンシステム、温かみのあるクリームキャンバス、フルピルボタン。

## 1. ビジュアルテーマと雰囲気

Starbucksのデザインシステムは、**温かみと自信に満ちた旗艦小売店**が店頭エプロンのグリーンを全面に纏った表現です。キャンバスはニュートラルな温かみのあるクリーム（`#f2f0eb`）と磁器風のオフホワイト（`#edebe9`）を交互に使用しています。これらは実際の店舗素材——紙ナプキン、カフェの壁、木材の仕上げ——を参照した色であり、シグネチャーの**Starbucks Green**（`#006241`）がヒーローバンド、CTA、リワード体験のブランドの核として機能します。グリーンは4つの調整済みシェード（Starbucks・Accent・House・Uplift）で構成され、それぞれが特定のサーフェスロールに対応しています。ゴールド（`#cba258`）はリワードステータスの演出にのみ使用され、汎用アクセントとしては用いられません。

タイポグラフィがブランドボイスの大部分を担っています。独自の**SoDoSans**書体（Starbucks専用）は、タイトな`-0.16px`のレタースペーシングとともにほぼすべてのサーフェスに使用されており、ファッション誌的な威圧感ではなく、自信に満ちた親しみやすさを演出します。特徴的なのは、リワードページが特定のヘッドライン演出に温かみのあるセリフ体（`"Lander Tall", "Iowan Old Style", Georgia`）に切り替わり、コーヒーハウスのチョークボードのような懐かしい雰囲気を微妙に醸し出している点です。またキャリアページでは、カップに名前を書くタッチとして手書きスクリプト（`"Kalam", "Comic Sans MS", cursive`）を使用しています。3つの書体、3つのコンテキスト——システムはそれぞれの登場シーンについて規律を持っています。

サーフェスは丸みを帯びたジオメトリによって呼吸します。すべてのボタンは50pxのフルピルです。カードは12pxの角丸矩形です。「Frap」フローティングCTA——Green Accent（`#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`アルファの囁くような柔らかさを保ち、グローバルナビゲーションには静かな3層シャドウスタックが使われます。システム全体が清潔なカフェのサインのように感じられます——読みやすく、温かく、決して声高にならない。

**Key Characteristics:**
- 4段階のグリーンブランドシステム（Starbucks / Accent / House / Uplift）それぞれが異なるサーフェスロールに対応——「ブランドグリーン」として一元化されない
- ゴールドはリワードステータスの演出にのみ予約済み。汎用アクセントとしては使用しない
- 温かみのあるニュートラルなキャンバス（`#f2f0eb` / `#edebe9`）——冷たい白ではなく、カフェ素材を参照
- カスタム独自書体（SoDoSans）とタイトな`-0.16px`レタースペーシングが全体の声として機能
- コンテキスト別書体切り替え：リワードにはセリフ体（Lander Tall）、キャリアのカップネームにはスクリプト体（Kalam）
- フルピルボタン（`50px`ラジウス）を全面採用、`scale(0.95)`のアクティブ押下がシグネチャーのマイクロインタラクション
- フローティング「Frap」円形CTA（`56px`、Green Accentフィル、重ねたシャドウスタック）——プロダクトのシグネチャーエレベーション要素
- ギフトカードのサーフェスは**撮影された物理的な製品**として設計——各カードは生成グラフィックではなく、固有のイラスト写真
- 12pxカードラジウス + 囁くような柔らかいシャドウがコンテンツカードをフラットプラスわずかな浮き感に保つ
- remベースのスペーシングスケールは1.6rem（約16px）= `--space-3` を基点とし、6.4rem（約64px）まで展開

**カラーブロックページのリズム：** クリームヒーロー → ホワイトコンテンツセクション → ダークグリーン（`#1E3932`）フィーチャーバンドに白テキスト → クリームユーティリティゾーン → ダークグリーン（`#1E3932`）フッターにゴールド / 白テキスト——明るいボディを囲むエスプレッソ・ダークのブックエンド。

## 2. カラーパレットと役割

**分析済みソースページ：** ホームページ、リワード、ギフトカード、商品詳細（Pink Energy Drink）、商品栄養情報（Cold Brew）。

### プライマリ

- **Starbucks Green**（`#006241`）：歴史的なブランドグリーン。h1見出し、リワードページのプライマリセクションヘッダー、および単一の支配的なカラーが必要な場面でのメインブランドシグナルとして使用。
- **Green Accent**（`#00754A`）：わずかに明るく、より発光感のあるグリーン。フィルドCTAのプライマリカラー（「Explore our afternoon menu」「See the spring menu」）およびフローティングFrap円形ボタンのフィルカラー。
- **House Green**（`#1E3932`）：深い黒に近いブランドグリーン。フッターサーフェス、フィーチャーバンドの背景、リワードステータスのダークサーフェス、およびリワードのヒーローバンド「Free coffee is just the beginning」で使用。
- **Green Uplift**（`#2b5148`）：装飾アクセントやダークグラデーション演出に控えめに使用されるセカンダリのミッドダークグリーン。
- **Green Light**（`#d4e9e2`）：フォームバリデーション状態のティントとライトグリーンユーティリティサーフェスに使用される淡いミントウォッシュ。

### セカンダリ＆アクセント

- **Gold**（`#cba258`）：リワードステータスの演出——ゴールドティアのコールアウト、パートナーシップバッジ（SkyMiles、Bonvoy）、プレミアム感のあるアクセント——にほぼ専用。汎用ブランドカラーとしては使用しない。
- **Gold Light**（`#dfc49d`）：ゴールドティアセクションの背景ウォッシュ用の柔らかなゴールド。
- **Gold Lightest**（`#faf6ee`）：リワードページのパートナーシップセクションで使用されるクリームゴールドのページサーフェスウォッシュ——ゴールドアクセントを温かみのあるニュートラルシステムに結びつける。

### サーフェス＆バックグラウンド

- **White**（`#ffffff`）：プライマリカードとモーダルのサーフェス。ギフトカードタイルのカードフィルにも使用。
- **Neutral Cool**（`#f9f9f9`）：ドロップダウンメニュー（「Account」ドロップダウン）、フォームカードラップ、クワイエットユーティリティコンテナに使用されるわずかにクールグレーのサーフェス。
- **Neutral Warm**（`#f2f0eb`）：リワードユーティリティゾーンとヒーローバンドの温かみのあるクリーム**プライマリページキャンバス**。
- **Ceramic**（`#edebe9`）：ゾーンセパレーター、柔らかなページセクションウォッシュ、リワードパートナーシップバンドに使用されるわずかに温かみのある/暗めのクリーム。
- **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`）：リワードページのテキストブロックにのみ使用される専用のくすんだスレートグリーン——完全なStarbucks GreenではなくText Blackより少し「くすんだ」読み色で「リワードサーフェス」を示す。

### セマンティック＆アクセント

- **Red**（`#c82014`）：エラーと破壊的な状態（フォーム無効、破壊的なアクション）。
- **Yellow**（`#fbbc05`）：警告状態、レガシーブランドタッチ。
- **Green Light**（`#d4e9e2`の33%不透明度 = `hsl(160 32% 87% / 33%)`）：フォームのバリッドフィールドティント背景。
- **Red Tint**（`hsl(4 82% 43% / 5%)`）：フォームのインバリッドフィールドティント。

### ブラック / ホワイトアルファスケール

オーバーレイとセカンダリテキスト用の2つの並行する半透明スケール：
- `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%刻み——ダークサーフェスのライトオーバーレイ用

### グラデーションシステム

構造的なグラデーショントークンは観察されません。サーフェス階層は全体を通してソリッドカラーブロック——グラデーションではなく5段階のクリーム/グリーンサーフェスパレットに依存したシステムです。

## 3. タイポグラフィのルール

### フォントファミリ

- **プライマリ：** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` — Starbucksの独自企業書体、ほぼすべてのサーフェスで使用
- **ローディングフォールバック：** `"Helvetica Neue", Helvetica, Arial, sans-serif` — SoDoSansが読み込まれるまでユーザーに表示される書体
- **リワードセリフ：** `"Lander Tall", "Iowan Old Style", Georgia, serif` — 温かみのある編集的な雰囲気のため、リワードページの特定のヘッドライン演出に使用
- **キャリアスクリプト：** `"Kalam", "Comic Sans MS", cursive` — Starbucksのカップに書かれた手書き名前を参照したキャリアページの「カップネーム」装飾タッチにのみ使用

`:root`でOpenTypeスタイリスティックセットの明示的な有効化はなし。

### 階層

| 役割 | サイズ | ウェイト | 行の高さ | レタースペーシング | 備考 |
|------|------|--------|-------------|----------------|-------|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | 最大のリワード/ヒーローディスプレイ |
| 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 | 全ピルボタンのラベル |

**レタースペーシングトークン：**
- `letterSpacingNormal`: `-0.01em`（デフォルト——タイト、特徴的）
- `letterSpacingLoose`: `0.1em`（強調キャップ）
- `letterSpacingLooser`: `0.15em`（大文字スタイルラベル、極度の強調）

**行の高さトークン：**
- `lineHeightNormal`: `1.5`（ボディ）
- `lineHeightCompact`: `1.2`（ディスプレイ/ボタン）

### 原則

- **タイトなネガティブトラッキング（`-0.01em`）** はほぼ全体に適用されており——製品全体がわずかに圧縮されて読まれ、SoDoSansに窮屈さを感じさせることなく自信ある存在感を与えます。
- **ウェイトの変化が階層を伝え、サイズの変化ではない。** H1とH2は同じ24px/36pxサイズを共有し、ウェイト（600対400）と色（Starbucks-Green対Text Black）のみが両者を区別します。
- **サイズトークンはremを使用し、`1rem = 10px`に基点を置く**（このサイトでは`font-size: 62.5%`ルートトリックによる）。つまり`1.6rem` = 16px、`2.4rem` = 24px、など。スケールは任意のピクセル値ではなくセマンティック（textSize-1からtextSize-10）です。
- **コンテキスト別書体スワップ**——リワードにはセリフ体、キャリアにはスクリプト体——は意図的でローカライズされています。同じサーフェス内でプライマリサンセリフと混在させてはなりません。
- **ボディテキストは純黒にしない**——温かみのあるニュートラルなキャンバス温度に合わせて`rgba(0,0,0,0.87)`を使用します。

### フォント代替についての注記

SoDoSansはStarbucks独自の書体です（House Industriesからライセンス取得、一般公開されていません）。合理的なオープンソース代替品：
- **Inter**（Google Fonts）——同様のヒューマニストジオメトリックな比率、広いウェイト範囲
- **Manrope** ——わずかに丸みがあり、同様の自信ある雰囲気
- **Nunito Sans** ——より温かみがあり、「カフェ」ブランドの代替として良好

代替する場合、タイトな`-0.01em` / `-0.16px`のトラッキングが適切に読まれるか確認してください。一部のオープンソースフォントは`-0.005em`が必要な場合があります。

Lander Tall（リワードセリフ体）もカスタムです——オープンソース代替品：**Iowan Old Style**（既にフォールバックに含まれる）、**Lora**、または**Source Serif Pro**。Kalam（キャリアスクリプト）はGoogle Fontsで直接利用可能です。

## 4. コンポーネントスタイリング

### ボタン

**1. プライマリフィルド——「Explore our afternoon menu / Sign up for free」**
- Background: `#00754A` (Green Accent)
- テキスト：`#ffffff`
- Border: `1px solid #00754A`
- Radius: `50px`（フルピル）
- Padding: `7px 16px`
- フォント：SoDoSans、16px、weight 600、letter-spacing `-0.01em`
- アクティブ状態：`transform: scale(0.95)` via `--buttonActiveScale`
- Transition: `all 0.2s ease`

**2. プライマリアウトライン——「Give them a try / Start an order」**
- Background: transparent
- テキスト：`#00754A` (Green Accent)
- Border: `1px solid #00754A`
- プライマリフィルドと同様のradius/padding/active/transition

**3. ブラックフィルド——「Join now」**
- Background: `#000000`
- テキスト：`#ffffff`
- Border: `1px solid #000000`
- Radius: `50px`、Padding: `7px 16px`
- フォント：14px、weight 600
- ページ最上部のジョインストリップと同様のコンバージョン演出に使用

**4. ダークアウトライン——「Sign in」**
- Background: transparent
- テキスト：`rgba(0, 0, 0, 0.87)` (Text Black)
- Border: `1px solid rgba(0, 0, 0, 0.87)`
- Radius: `50px`、Padding: `7px 16px`
- フォント：14px、weight 600

**5. グリーンオングリーン反転——「See the spring menu」**
- Background: `#ffffff`
- テキスト：`#00754A`
- Border: `1px solid #ffffff`
- ボタン背景がダークグリーンのHouse Greenバンドの場合に使用——グリーン地にフィルドグリーンピルではなく、グリーンテキストの白ボタン

**6. ダークサーフェス上のアウトライン——「Learn more / Order now」**
- Background: transparent
- テキスト：`#ffffff`
- Border: `1px solid #ffffff`
- 白フィルドCTAとペアになるダークグリーンフィーチャーバンドのセカンダリアクションに使用

**7. 同意Agree（ダークグリーンバリアント）**
- Background: `rgb(0, 130, 72)`（クッキー同意モジュールで使用される特定のバリアントグリーン）
- テキスト：`#ffffff`
- ボーダーなし、`50px`ラジウス、`7px 16px`パディング、14px / weight 400
- Green Accentよりわずかに明るい——同意バナーのAgreeアクション専用

**8. Frap——フローティング円形注文ボタン**
- Background: `#00754A` (Green Accent)
- アイコン：`#ffffff`
- サイズ：`5.6rem / 56px`（標準）、`4rem / 40px`（ミニバリアント）
- Radius: `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」**
- Background: `#00754A`
- テキスト：`#ffffff`
- Radius: `12px 12px 0px 0px`（上部のみ角丸）
- Padding: `8px 16px`
- フォント：14px、weight 400
- ビューポートエッジに接した右下内側に固定配置

### カード＆コンテナ

**コンテンツカード（デフォルト）**
- Background: `#ffffff` (`--cardBackgroundColor`)
- Radius: `12px` (`--cardBorderRadius`)
- Shadow: `0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)` (`--cardBoxShadow`)
- 用途：フィーチャーカード、メニューアイテムタイル、リワードステータスパネル

**ギフトカードタイル**
- Background: イラスト写真がカード全体をフィル（ソリッドbgなし）
- Radius: デフォルトカードに近い（`~12px`、コーナーはわずかにタイト）
- Shadow: デフォルトカードより軽い——物理的なカードとして扱われる
- カテゴリ（Spring、Thank You、Birthday、Celebration、Mother's Day、Appreciation、Encouragement、Milestones、Anytime）のラベルがカードグリッド上部に表示

**リワードステータスカード（リワードページのシグネチャー）**
- 3カラムグリッド：Bronze / Gold / Silver-ish — 各ダークグリーン（`#1E3932`）パネルに：
  - カラーグラデーション/カラーヘッダーリング
  - 番号付き「Level」バッジ
  - SoDoSans weight 600の大きなステータスタイトル
  - 白/半透明白テキストでのスター / ベネフィットリスト
  - 下部「As you earn more stars…」プログレッションキャプション

**パートナーシップカード（リワード）**
- Background: `#faf6ee` (Gold Lightest) 温かみのあるクリームサーフェス
- コンテンツ：パートナーロゴ（「SkyMiles」「Bonvoy」）をセンタリング、下に説明テキスト
- ラジウスとシャドウはデフォルトカードスペックに従う

**ドロップダウンメニュー（Accountドロップダウン、トップナビゲーション）**
- Background: `#f9f9f9` (Neutral Cool)
- メニューアイテムはText Blackで`24px / weight 400`
- ボーダーなし——白ナビとのバックグラウンドサーフェスの変化のみ

**モーダル**
- Padding: `2.4rem` (`--modalPadding`)
- 上部パディング：`8.8rem` (`--modalTopPadding`) ——閉じるボタン / ヘッダー用のスペースを確保
- 垂直パディング合計：`11.2rem`
- Radiusはカードスペック（`12px`）を継承

### インプット＆フォーム

**フローティングラベルインプット**
- フォーカス/入力時にラベルがインプットボーダー上部にフロート
- デスクトップラベルフォントサイズ：デフォルト`1.9rem`、アクティブ時`1.4rem`にアニメーション
- モバイルラベルフォントサイズ：デフォルト`1.6rem`、アクティブ時`1.3rem`にアニメーション
- ラベル水平オフセット：左から`12px`
- アクティブラベルの変換：`-50%` Y変換で`-12px`上方向へ
- フィールドパディング：`12px`
- フォーム水平パディング：`1.6rem`
- バリデーション：バリッドフィールドは`rgba(green-light, 0.33)`ティント、インバリッドフィールドは`rgba(red, 0.05)`ティント
- Transition: チェックされたインプットに`0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)`

**オプションアイコン（チェックボックス/ラジオ）**
- Padding: `3px`インナー
- 上記のチェックされたインプットのcubic-bezierアニメーション（わずかに「スプリング感のある」2.32オーバーシュートカーブ）を使用

### ナビゲーション

**グローバルナビゲーション（トップバー）**
- プログレッシブな高さで固定配置：`64px` xs → `72px` モバイル → `83px` タブレット → `99px` デスクトップ
- Shadow stack: `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)` ——3層の柔らかなリフト
- 左：Starbucksワードマークロゴ、左端から`99px`（md） / `131px`（lg）オフセット
- SoDoSans weight 400–600のプライマリリンクをインライン表示：Menu · Rewards · Gift Cards
- 右：Find a storeリンク + Sign in（アウトライン）+ Join now（ブラックフィルド）

**サブナビゲーション（第2バー、例：リワード内部）**
- 高さ：`53px`（グローバルサブナビ） / `48px`（内部サブナビ）
- 通常はグローバルナビの下に水平タブグループ

**モバイルナビゲーション**
- タブレットブレークポイント以下でハンバーガードロワーに折りたたみ
- Frapフローティングボタンはナビゲーション状態に関わらず右下に維持

### 画像処理

- **ヒーロー写真：** 製品写真（カラー背景——コーラル、セージ、温かみのある琥珀色——の透明グラスに入ったビバレッジ）がスプリットヒーローレイアウトの約40vwを占有。テキストは残りの60vwを使用（`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`）
- **ギフトカードイラスト：** 各カードは固有のイラスト写真（絵画風、手書き感、温かみのあるカラーパレット）。汎用生成グラフィックは使用しない。
- **リワードセレモニー画像：** 手に持つ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はGreen-on-Green Inverted（白フィルド）+ Outlined on Dark（白アウトライン）のペアリングに従う

### エクスパンダー / アコーディオン

- 持続時間：`300ms` (`--expanderDuration`)
- タイミングカーブ：`cubic-bezier(0.25, 0.46, 0.45, 0.94)` ——測定されたイーズアウト
- リワードとギフトページのFAQセクションに使用

### クッキー同意モジュール

ページ上部にダークグリーンのモーダルカード、「Agree」（グリーンフィルド）と「Manage preferences」（アウトライン）ボタン付き。初回訪問時に表示、閉じることができる。

### 商品詳細コンポーネント（PDPシグネチャークラスター）

メニュー商品ページで繰り返し使用されるコンポーネントクラスター（例：ドリンク詳細の`/menu/product/40498/iced`、栄養情報の`/menu/product/.../nutrition`）。これらはトークンを変更せずにコンポーネントインベントリを拡張します。

**サイズオプションセレクター**
- 4つのカップアイコンボタンの水平ロウ（Tall / Grande / Venti / Trenta）
- 各アイテム：上にカップシルエットアイコン、下にサイズ名（Starbucks-Greenで16/700）、液量オンスキャプション（Text Black Softで13/400）
- アクティブ状態：選択されたカップアイコンの周囲にグリーン円形リングアウトライン（`2px solid #00754A`）
- 非アクティブ：リングなし、同じタイポグラフィ
- 全幅ロウ、均等スペーシング
- コンテナのRadius：`12px`またはフラット、個別アイコンは`50%`サークル
- Padding: `16px 24px`インターナル

**アドイン / ミルク選択（アウトライン矩形）**
- Background: `#ffffff`
- Border: `1px solid #d6dbde`（Input Border）
- Radius: `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`）に変化

**数値ステッパー**
- 数量が必要な場合（例：Strawberry Fruit Inclusionsスクープ）、アドインロウ内に埋め込み
- `−`マイナスボタン + カウント番号 + `+`プラスボタン、ラベルの右にインライン配置
- ボタン：`1px solid #d6dbde`ボーダーのある円形`32×32px`、ニュートラルグレーアイコン
- カウント番号：Text Blackで16/700、センタリング

**カスタマイズボタン**
- Background: `#ffffff`
- テキスト：`#00754A` (Green Accent)
- Border: `1.5px solid #00754A`
- Radius: `50px`（フルピル）
- Padding: `14px 40px`（デフォルトピルより寛大——これはセカンダリプライマリアクション）
- ラベル：左にゴールドスパークル✨アイコンを埋め込んだ「Customize」
- 用途：サイズ/ミルク選択後のドリンクカスタマイズフローへの入口

**Add to Orderボタン（PDP）**
- Background: `#00754A` (Green Accent)
- テキスト：`#ffffff`
- Radius: `50px`
- Padding: `14px 32px`
- 商品カードの右上固定および/または店舗在庫バンド内の右寄せ
- 他のプライマリCTAと同様のscale(0.95)アクティブ動作

**リワードコストピル——「200★ item」**
- Background: transparent
- Border: `1px solid #cba258` (Gold)
- テキスト：`#cba258` (Gold)
- Radius: `50px`（フルピル）
- Padding: `4px 12px`
- コンテンツ：「200★ item」（`★`はこのアイテムを引き換えるために必要なリワードスターを示す小さなフィルドスターグリフ）
- フォント：Proxima Nova 13/700、`0.5px`レタースペーシング
- リワード引き換え可能な商品にのみ使用

**商品説明バンド**
- 全幅のダークグリーンバンド（`#1E3932` House Green）
- 上から下に含む：
  1. リワードコストピル（ゴールド）（該当する場合）
  2. 白の商品説明ボディコピー（16/400/1.5）
  3. 情報アイコンツールチップ付きインライン栄養概要（「140 calories, 25g sugar, 2.5g fat」）——白で14/700
  4. 「Full nutrition & ingredients list」アウトライン白オングリーンピルボタン
- Padding: 垂直`32px`
- プライマリ商品ヘッダーバンドの下に表示

**成分 / 栄養テーブル**
- 栄養ページの2カラムレイアウト
- 左カラム：「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アイコン
- Radius: `4px`
- 高さ：約48px

**PDPパンくずリスト**
- 商品タイトル上の「Menu / Refreshers / Pink Energy Drink」トレイル
- セパレーター：Text Black Softの`/`スラッシュ文字
- 現在のページはリンクなし、前のページはアンダーラインのグリーンアクセントリンク
- フォント：Proxima Nova 14/400
- 全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 | 最大のセクションパディング |

**ガタートークン：**
- `--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アップグリッドを使用
- リワードステータスセクション：`lg+`ブレークポイントで3アップのダークグリーンパネル
- ヒーロー：`--headerCrateProportion` / `--contentCrateProportion`による非対称スプリット40%（画像） / 60%（コンテンツ）

### ホワイトスペース哲学

ホワイトスペースが「カフェの十分な空間」感を演出します。セクションパディングは寛大な傾向（40〜64px）。コンテンツブロックはディバイダーではなくホワイトスペースで区切られます。クリームキャンバス（`#f2f0eb`）自体が白カードとグリーンフィーチャーバンドの間のビジュアルブレスとして機能します。

### ボーダーラジウススケール

| 値 | 用途 |
|-------|-----|
| `12px` | カード、モーダル、メニューアイテムタイル（`--cardBorderRadius`） |
| `12px 12px 0 0` | 全幅フィードバックタブ（上部のみ角丸） |
| `50px` | 全ボタン——フルピルラジウス（`--buttonBorderRadius`） |
| `50%` | 円形アイコン、Frapフローティングボタン、アバターサムネイル |
| スペシャルティ | Starbucks-Visa-Cardモックアップの楕円形`3.3333%/5.298%`（`--svcRoundedCorners`） |

## 6. 奥行きとエレベーション

| レベル | 処理 | 用途 |
|-------|-----------|-----|
| Card | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | デフォルトコンテンツカード——囁くようなデュアルシャドウ |
| Global Nav | `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 Base | `0 0 6px rgba(0,0,0,0.24)` | フローティング円形CTAの周囲のベースヘイロー |
| Frap Ambient | `0 8px 12px rgba(0,0,0,0.14)` | 重ねた方向性アンビエント——Frapを前面に浮かせる |
| Gift Card | イラスト写真の周囲に軽いドロップシャドウ | ギフトタイルの物理的なカード感 |
| 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ボタンはどのページでも最も高いエレベーションを持つ要素です。

### 装飾的な奥行き

- **グラデーションシステムなし** ——サーフェスはソリッドカラーブロック
- **カラーブロックバンディング** が知覚的な奥行きを演出（ダークグリーンバンドはクリーム/ホワイトのボディセクション間の「奥まったフィーチャーゾーン」として読まれる）
- Starbucks-CardビジュアルへのSVGフィルターシャドウがbox-shadowなしでわずかな3Dフィジカリティを加える

## 7. すべきこと・してはいけないこと

### すべきこと
- ページキャンバスとして純白ではなくNeutral Warm（`#f2f0eb`）またはCeramic（`#edebe9`）を使用する——温かみのあるクリームがシグネチャー
- グリーンの階層を意図されたサーフェスロールにマッピングする——見出しにはStarbucks Green、CTAにはGreen Accent、深いバンドにはHouse Green、装飾にはUplift
- SoDoSans全体で`-0.01em` / `-0.16px`のトラッキングをタイトに保つ
- 例外なく全ボタンに50pxフルピルラジウスを使用する
- ユニバーサルなボタンアクティブ状態として`transform: scale(0.95)`を適用する
- Goldはリワードステータスの演出にのみ予約する
- ほぼすべてにSoDoSansを使用し、Lander Tallセリフ体はリワードの編集的見出しにのみ切り替え、Kalamスクリプトはキャリアの「カップネーム」シーンに予約する
- エレベーションには単一の重いドロップシャドウではなく、2〜3つの低アルファシャドウを重ねる
- 全ショッピングサーフェスの永続的なフローティング注文エントリとしてFrap円形CTAを使用する
- コンテンツカード間でクリームキャンバスを呼吸させる——ディバイダーではなくホワイトスペースを使用する

### してはいけないこと
- ページキャンバスとして純白を使用しない——温かみのあるクリームの温度は重要な設計意図
- 「1つのブランドグリーン」を選ばない——4グリーンシステムは意図的なもの。`#006241`のみを全体に使用するとブランドが平坦になる
- Goldを汎用アクセントとして使用しない——リワードシグナル専用
- ボタンのコーナーを角張らせない——50pxピルはユニバーサル
- グラデーションフィルを導入しない——システムは全体を通してカラーブロック
- h1とh2のサイズでウェイトコントラストをつけない——階層はウェイト + 色（600 Starbucks-Green対400 Text Black）から来る
- ボディテキストに純黒を使用しない——`rgba(0,0,0,0.87)`が温かみのあるキャンバスに合う
- ボタンの`scale(0.95)`アクティブフィードバックをスキップしない——シグネチャーのマイクロインタラクション
- 単一の重いシャドウを重ねない。常に2〜3つの低アルファのものを重ねる
- メインショッピングフローにセリフ体やスクリプト体を導入しない——それぞれリワードとキャリアのコンテキストに属する

## 8. レスポンシブ動作

### ブレークポイント

コンポーネント幅トークンとプログレッシブナビゲーション高さから推測：

| 名称 | 幅 | 主な変化 |
|------|-------|-------------|
| 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——タッチ専用サーフェスのWCAG AAA最小44pxを下回る。モバイルではボタンパディングを視覚的に拡大して最小値を満たす場合がある。
- `56px`のFrapフローティング円形ボタンは最小値を大きく上回る。
- Frapは`--frapTouchOffset: calc(-1 * .8rem)`を使用してタップ領域をビジュアルエッジから8px拡張。
- フォームフロートラベルインプットはモバイルでラベルフォントサイズが大きくなる（デスクトップ1.9remに対してモバイル1.6remベース）——腕を伸ばしても簡単にタップして読める。

### 折りたたみ戦略

- **グローバルナビゲーション高さはプログレッシブにスケール**：ブレークポイントをまたいで64 → 72 → 83 → 99pxに変化、単一の値ではない
- **ヒーロースプリットの折りたたみ**：40/60の非対称スプリット → モバイルでスタック（画像上、コンテンツ下）
- **ギフトカードグリッド**：ブレークポイントをまたいで5アップ → 4アップ → 3アップ → 2アップ → 1アップ、調整済みカード幅
- **フィーチャーバンド**：全幅を維持しつつ、モバイルでテキスト + 画像が垂直スタック
- **アウターガタースケール**：ビューポートが大きくなるにつれて16px → 24px → 40px
- **リワード3カラムステータスパネル**：モバイルでシングルカラムにスタック

### 画像動作

- ヒーロー製品写真はモバイルで垂直方向により狭くクロップされ、コンテンツがビジュアルアンカーになる
- ギフトカードイラストはアスペクト比を維持し、カードグリッドがリフロー
- 画像読み込み時の`opacity 0.3s ease-in`フェードイントランジション（突然のポップインを防止）
- リワードのアプリ手持ち写真は比例的にスケール、ストレッチしない

## 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)`)」
- リワードアクセント：「Gold (`#cba258`)」
- リワードテキスト：「Rewards Green (`#33433d`)」
- 破壊的：「Red (`#c82014`)」

### コンポーネントプロンプト例

1. 「Green Accent（`#00754A`）背景、白テキスト「Explore our afternoon menu」、SoDoSansフォント16px weight 600、`-0.01em`レタースペーシング、`50px`ボーダーラジウス（フルピル）、`7px 16px`パディングのプライマリStarbucks CTAピルボタンを作成してください。`0.2s ease`トランジションで`transform: scale(0.95)`をアクティブ状態として適用してください。」

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`）背景の全幅セクション。左カラム：white SoDoSans h2 24px weight 600、続いてText White Soft（`rgba(255,255,255,0.70)`）ボディ段落と、2ボタンのCTAロウ（プライマリにはGreen Accentテキストの白フィルド、セカンダリには白ボーダーのOutlined-on-Dark）。右カラム：製品写真。分割比率40/60、`768px`以下で垂直スタック。」

5. 「リワードステータスカードを作成してください——`12px`ボーダーラジウスのHouse Green（`#1E3932`）パネル、カラーグラデーションの上部ストライプ（Bronze/Silver/Goldティア）。タイトルはSoDoSans 24px weight 600で白。ベネフィットリストは白い箇条書きと`rgba(255,255,255,0.70)`のセカンダリキャプション。下部プログレッションテキストはText White Soft。`lg+`で3パネルのグリッド、モバイルでシングルカラム。」

6. 「ギフトカードタイルをデザインしてください——カードラジウスは`12px`に合わせ、イラスト写真（手描きの水彩絵画風）でサーフェス全体をフィル。わずかなドロップシャドウでクリームキャンバス上の物理的なカードのような感触を演出。カードグリッド上部にカテゴリラベル（「Spring」「Thank You」「Birthday」）をSoDoSans 24px weight 400でグループ化。」

7. 「Starbucksの商品詳細ヘッダーを作成してください——House Green（`#1E3932`）バンド、商品タイトル上に白で14/400のパンくずリスト「Menu / Refreshers / Pink Energy Drink」。SoDoSans 32/700大文字白の商品タイトル。タイトル下に商品写真をセンタリング。写真下：4アップのサイズセレクターロウ——各カップアイコンボタンに垂直なカップシルエット、サイズ名（「Tall」/「Grande」/「Venti」/「Trenta」）を白で16/700、液量オンスをText White Softで13/400。選択されたサイズのカップアイコンに`2px solid #00754A`の円形リングを巻き付ける。」

8. 「Starbucksのカスタマイズフローを構築してください——サイズセレクターの下に3つのスタックされたアウトライン矩形インプットロウ（白bg、`1px solid #d6dbde`ボーダー、`4px`ラジウス）。各フロートラベルはトップボーダー上部にText Blackで13/700大文字（「Add-ins」「Milk」「Add-ins」）。値はセンタリング（例：「Ice」「Coconut」）。右側にText Black Softのシェブロンダウン。スクープロウには円形`32px`アウトラインボタンの数値ステッパー（`−` `1` `+`）を埋め込む。3フィールド下：ゴールドスパークルアイコン付きのアウトライングリーン「Customize」ピル、`50px`ラジウス、`14px 40px`パディング。同じロウにGreen Accentフィルドの「Add to Order」ピルをペアリング。」

9. 「Starbucksの商品説明バンドをデザインしてください——商品ヘッダー下の全幅House Green（`#1E3932`）。上部：ゴールドアウトラインの「200★ item」リワードコストピル（`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カード内の2カラムレイアウト。左カラム：「Ingredients」ヘッダー（Text Blackで24/400）、続いて成分リストまたは14/400 Text Black Softの「Not available for this item」プレースホルダー段落。右カラム：「Nutrition」ヘッダー、続いてラベル/値ロウ（栄養素名を左、値を右、`1px solid #e7e7e7`ヘアラインで区切り）。タイポグラフィ：ラベルはText Blackで14/400、値はText Blackで14/700右寄せ。下部に13/400 Text Black Softのアスタリスクマーカー注記。」

### 反復ガイド

このデザインシステムで生成された既存のスクリーンを改良する場合：
1. 一度に1つのコンポーネントに集中する
2. このドキュメントの特定のカラー名と16進コードを参照する
3. 正確な値とともに自然言語の説明（「温かみのあるクリームキャンバス」「4段階のグリーンシステム」）を使用する
4. 50pxピル + `scale(0.95)`アクティブ状態を全面的に維持する
5. グリーンが正しいロールにマッピングされているか確認する（CTAにはGreen Accent、見出しにはStarbucks Green、バンドにはHouse Green）
6. グラデーションを導入しない——システムはカラーブロック
7. SoDoSansのトラッキングを全体で`-0.01em` / `-0.16px`に保つ

### 既知のギャップ

- SoDoSansはGoogle Fontsで利用できない独自書体——一般公開で実装する場合、InterまたはManropeを代替として使用し、スワップを文書化する
- Lander Tall（リワードセリフ体）もカスタム——Iowan Old Style、Lora、またはSource Serif Proで代替
- 記録されている少数のもの以外の特定のコンポーネントごとのアニメーションタイミング（`--duration: 0.4s`、`--iconTransition: all ease-out 0.2s`、`--expanderDuration: 300ms`）は全インタラクティブサーフェスでキャプチャされていない
- フォームエラー状態の完全なスタイリング（赤いボーダーウェイト、アイコン配置）はティントトークンで確認できるが、網羅的には抽出されていない
- キャリアページ固有のコンポーネント（カップネームカード、検索ラジオグリッド）はトークン名で参照されているが、この抽出では取り上げられていない
- Starbucks Visa Card / Starbucks-Card（SVC）の詳細なモックアップ仕様は`--svcRoundedCorners`および`--svcShadowFilter`トークンで示唆されているが、完全には文書化されていない