# Starbucks — Style Reference
> Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (`#f2f0eb`) and a ceramic off-white (`#edebe9`) — colors that reference actual store materials: the paper napkins, the café walls, the wood finishes — while the signature **Starbucks Green** (`#006241`) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (`#cba258`) appears only around Rewards-status ceremony — not as a general accent.

**Theme:** light

**Source website:** [https://www.starbucks.com/](https://www.starbucks.com/)  
Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| warm confident retail flagship | `#f2f0eb` | `--color-warm-confident-retail-flagship` | warm confident retail flagship role extracted from the source design |
| color 2 | `#edebe9` | `--color-color-2` | color 2 role extracted from the source design |
| starbucks green | `#006241` | `--color-starbucks-green` | starbucks green role extracted from the source design |
| color 4 | `#cba258` | `--color-color-4` | color 4 role extracted from the source design |
| color 5 | `#00754A` | `--color-color-5` | color 5 role extracted from the source design |
| every card is a distinct illustrated photograph rather than a generated graphic 12px card radius whisper soft shadows keep content cards flat plus hint of lift rem based spacing scale anchored at 1 6rem 16px space 3 stepping to 6 4rem 64px | `#1E3932` | `--color-every-card-is-a-distinct-illustrated-photograph-rather-than-a-generated-graphic-12px-card-radius-whisper-soft-shadows-keep-content-cards-flat-plus-hint-of-lift-rem-based-spacing-scale-anchored-at-1-6rem-16px-space-3-stepping-to-6-4rem-64px` | every card is a distinct illustrated photograph rather than a generated graphic 12px card radius whisper soft shadows keep content cards flat plus hint of lift rem based spacing scale anchored at 1 6rem 16px space 3 stepping to 6 4rem 64px role extracted from the source design |
| green uplift | `#2b5148` | `--color-green-uplift` | green uplift role extracted from the source design |
| green light | `#d4e9e2` | `--color-green-light` | green light role extracted from the source design |
| gold light | `#dfc49d` | `--color-gold-light` | gold light role extracted from the source design |
| gold lightest | `#faf6ee` | `--color-gold-lightest` | gold lightest role extracted from the source design |
| white | `#ffffff` | `--color-white` | white role extracted from the source design |
| neutral cool | `#f9f9f9` | `--color-neutral-cool` | neutral cool role extracted from the source design |
| black | `#000000` | `--color-black` | black role extracted from the source design |
| text black | `rgba(0, 0, 0, 0.87)` | `--color-text-black` | text black role extracted from the source design |
| text black soft | `rgba(0, 0, 0, 0.58)` | `--color-text-black-soft` | text black soft role extracted from the source design |
| text white | `rgba(255, 255, 255, 1)` | `--color-text-white` | text white role extracted from the source design |
| text white soft | `rgba(255, 255, 255, 0.70)` | `--color-text-white-soft` | text white soft role extracted from the source design |
| rewards green | `#33433d` | `--color-rewards-green` | rewards green role extracted from the source design |
| red | `#c82014` | `--color-red` | red role extracted from the source design |
| yellow | `#fbbc05` | `--color-yellow` | yellow role extracted from the source design |
| color 21 | `rgba(0,0,0,0.06)` | `--color-color-21` | color 21 role extracted from the source design |
| color 22 | `rgba(0,0,0,0.90)` | `--color-color-22` | color 22 role extracted from the source design |
| color 23 | `rgba(255,255,255,0.10)` | `--color-color-23` | color 23 role extracted from the source design |
| color 24 | `rgba(255,255,255,0.90)` | `--color-color-24` | color 24 role extracted from the source design |
| serif on rewards script on careers are deliberate and localized never mix them with the primary sans within the same surface | `rgba(0,0,0,0.87)` | `--color-serif-on-rewards-script-on-careers-are-deliberate-and-localized-never-mix-them-with-the-primary-sans-within-the-same-surface` | serif on rewards script on careers are deliberate and localized never mix them with the primary sans within the same surface role extracted from the source design |
| color 26 | `rgb(0, 130, 72)` | `--color-color-26` | color 26 role extracted from the source design |
| color 27 | `rgba(green-light, 0.33)` | `--color-color-27` | color 27 role extracted from the source design |
| color 28 | `rgba(red, 0.05)` | `--color-color-28` | color 28 role extracted from the source design |
| color 29 | `rgba(255,255,255,0.70)` | `--color-color-29` | color 29 role extracted from the source design |
| color 30 | `rgba(0,0,0,0.58)` | `--color-color-30` | color 30 role extracted from the source design |

## Tokens — Typography

### Inter, system-ui, sans-serif · `--font-primary`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 600, 400
- **Sizes:** 24px, 19px, 0.4rem, 0.8rem, 1.6rem, 2.4rem, 3.2rem, 4rem, 4.8rem, 5.6rem, 6.4rem
- **Line height:** 36px, 1.5
- **Letter spacing:** 36px, -0.16px, 4px, 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px
- **Role:** Brand typography family observed across the documented type scale.

### Cards, modals, menu-item tiles (--cardBorderRadius) · `--font-family-2`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### All buttons — full-pill radius (--buttonBorderRadius) · `--font-family-3`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 50px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|---|---|---|---|---|
| h1 | 24px | 36px | 36px | `--text-h1` |
| h2 | 24px | 36px | 36px | `--text-h2` |
| body-large | 19px | 1.5 | -0.16px | `--text-body-large` |
| space-1 | 0.4rem | 1.5 | 4px | `--text-space-1` |
| space-2 | 0.8rem | 1.5 | 8px | `--text-space-2` |
| space-3 | 1.6rem | 1.5 | 16px | `--text-space-3` |
| space-4 | 2.4rem | 1.5 | 24px | `--text-space-4` |
| space-5 | 3.2rem | 1.5 | 32px | `--text-space-5` |
| space-6 | 4rem | 1.5 | 40px | `--text-space-6` |
| space-7 | 4.8rem | 1.5 | 48px | `--text-space-7` |
| space-8 | 5.6rem | 1.5 | 56px | `--text-space-8` |
| space-9 | 6.4rem | 1.5 | 64px | `--text-space-9` |
| 12px | 12px | 1.5 | 0 | `--text-12px` |
| 50px | 50px | 1.5 | 0 | `--text-50px` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|---|---|---|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |

### Border Radius

| Name | Value | Token |
|---|---|---|
| sm | 6px | `--radius-sm` |
| md | 50px | `--radius-md` |
| lg | 7px | `--radius-lg` |
| xl | 12px | `--radius-xl` |
| pill | 4px | `--radius-pill` |
| r6 | 14px | `--radius-r6` |

### Layout

- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 16px
- **Max content width:** 1200px

## Components

### buttons
**Role:** buttons component

- **description:** `Buttons treatment documented in the source analysis.`

### cards containers
**Role:** cards containers component

- **description:** `Cards & Containers treatment documented in the source analysis.`

### inputs forms
**Role:** inputs forms component

- **description:** `Inputs & Forms treatment documented in the source analysis.`

### navigation
**Role:** navigation component

- **description:** `Navigation treatment documented in the source analysis.`

### image treatment
**Role:** image treatment component

- **description:** `Image Treatment treatment documented in the source analysis.`

### feature band dark green hero strip
**Role:** feature band dark green hero strip component

- **description:** `Feature Band (dark-green hero strip) treatment documented in the source analysis.`

### expander accordion
**Role:** expander accordion component

- **description:** `Expander / Accordion treatment documented in the source analysis.`

### cookie consent module
**Role:** cookie consent module component

- **description:** `Cookie Consent Module treatment documented in the source analysis.`

### product detail components pdp signature cluster
**Role:** product detail components pdp signature cluster component

- **description:** `Product Detail Components (PDP signature cluster) treatment documented in the source analysis.`

## Do's and Don'ts

### Do

- Use `--color-serif-on-rewards-script-on-careers-are-deliberate-and-localized-never-mix-them-with-the-primary-sans-within-the-same-surface` for the brand's primary interaction treatment.
- Keep page surfaces anchored to `--color-serif-on-rewards-script-on-careers-are-deliberate-and-localized-never-mix-them-with-the-primary-sans-within-the-same-surface`.
- Preserve every typography style's documented size, line height, and letter spacing.
- Compare major implementation decisions against [the live Starbucks website](https://www.starbucks.com/).

### Don't

- Do not introduce colors outside the documented color token set.
- Do not replace `--color-text-black` with an arbitrary neutral.
- Do not flatten documented component states or spacing relationships.
- Do not treat this extracted snapshot as newer than the live source website.

## Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.starbucks.com/).