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`

Cards, modals, menu-item tiles (--cardBorderRadius) · `--font-family-2`

All buttons — full-pill radius (--buttonBorderRadius) · `--font-family-3`

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

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

inputs forms

**Role:** inputs forms component

navigation

**Role:** navigation component

image treatment

**Role:** image treatment component

feature band dark green hero strip

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

expander accordion

**Role:** expander accordion component

cookie consent module

**Role:** cookie consent module component

product detail components pdp signature cluster

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

Do's and Don'ts

Do

Don't

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/).