A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
16tokens
11type steps
2radius steps
3pxspacing base
Starbucks, in one page
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.
Typography carries most of the brand voice. The proprietary SoDoSans typeface (custom to Starbucks) sits across nearly every surface with a tight -0.16px letter-spacing — it reads confident and friendly rather than fashion-magazine severe. What's unusual: the Rewards page switches to a warm serif ("Lander Tall", "Iowan Old Style", Georgia) for specific headline moments, subtly echoing the nostalgic feel of a coffeehouse chalkboard. And the Careers pages use a handwritten script ("Kalam", "Comic Sans MS", cursive) for personal cup-name touches. Three typefaces, three contexts — the system is disciplined about when each appears.
The surfaces breathe through rounded geometry. Every button is a 50px full-pill. Cards take a 12px rounded-rectangle. The "Frap" floating CTA — a 56px circular order button in Green Accent (#00754A) — is the product's signature depth move: it floats bottom-right with a layered shadow stack (0 0 6px rgba(0,0,0,0.24) base + 0 8px 12px rgba(0,0,0,0.14) ambient) and compresses via scale(0.95) on press. Elevations are otherwise restrained — card shadows stay at a whispered 0.14/0.24 alpha, global nav gets a quiet three-layer shadow stack. The whole system feels like clean café signage: legible, warm, and never shouting.
Key Characteristics:
- Four-tier green brand system (Starbucks / Accent / House / Uplift) each mapped to a distinct surface role — not a single "brand green"
- Gold reserved for Rewards-status moments only; never a general-purpose accent
- Warm-neutral canvas (
#f2f0eb/#edebe9) instead of cold white — references café materials - Custom proprietary typeface (SoDoSans) with tight
-0.16pxletter-spacing as the universal voice - Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names
- Full-pill buttons (
50pxradius) universal,scale(0.95)active press the signature micro-interaction - Floating "Frap" circular CTA (
56px, Green Accent fill, layered shadow stack) — the product's signature elevation element - Gift-card surfaces designed as photographed physical product — 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)
Color-block page rhythm: Cream hero → White content sections → Dark-green (#1E3932) feature band with white text → Cream utility zone → Dark-green (#1E3932) footer with gold / white text — an espresso-dark bookend around the bright body.
Do's and don'ts
Do
- Use Neutral Warm (
#f2f0eb) or Ceramic (#edebe9) as page canvas instead of pure white — the warm cream is the signature - Map the green tiers to their intended surface role — Starbucks Green for headings, Green Accent for CTAs, House Green for deep bands, Uplift for decorative
- Keep tracking tight at
-0.01em/-0.16pxon SoDoSans across the whole system - Use 50px full-pill radius on every button without exception
- Apply
transform: scale(0.95)as the universal button active state - Reserve Gold for Rewards-status ceremony moments only
- Use SoDoSans for nearly everything; switch to Lander Tall serif only for Rewards editorial headlines; reserve Kalam script for Careers "cup name" moments
- Layer 2–3 low-alpha shadows instead of one heavier drop shadow for elevation
- Use the Frap circular CTA as the persistent floating order entry on every shopping surface
- Let the cream canvas breathe between content cards — use whitespace, not dividers
Don't
- Don't use pure white as the page canvas — the warm cream temperature is load-bearing
- Don't pick "one brand green" — the four-green system is intentional; using only
#006241everywhere flattens the brand - Don't use Gold as a general-purpose accent — it's a Rewards signal only
- Don't square the corners on buttons — the 50px pill is universal
- Don't introduce gradient fills — the system is color-block throughout
- Don't weight-contrast h1 and h2 by size — the hierarchy comes from weight + color (600 Starbucks-Green vs 400 Text Black)
- Don't use pure black for body text —
rgba(0,0,0,0.87)matches the warm canvas - Don't skip the
scale(0.95)active feedback on buttons — it's a signature micro-interaction - Don't stack single heavy shadows; always layer 2–3 low-alpha ones
- Don't introduce serifs or scripts into the main shopping flow — they belong to Rewards and Careers contexts respectively
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Starbucks design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Starbucks Green: #006241
- Green Accent: #00754a
- House Green: #1e3932
- Green Uplift: #2b5148
- Green Light: #d4e9e2
- Gold: #cba258
- Gold Light: #dfc49d
- Gold Lightest: #faf6ee
- White: #ffffff
- Neutral Cool: #f9f9f9
Type:
- families: Inter, Manrope, Nunito Sans, Iowan Old Style
- scale: 13, 14, 16, 19, 24, 33.25, 36, 45, 58
- weights: 400, 600
Shape:
- radius: 12, 50
- elevation: Active state: ambient shadow fades to `0 8px 12px rgba(0,0,0,0)` | Radius and shadow follow default card spec
Spacing: 3, 4, 7, 8, 12, 14, 16, 25.6, 32, 38.4
Rules:
- Use Neutral Warm (`#f2f0eb`) or Ceramic (`#edebe9`) as page canvas instead of pure white — the warm cream is the signature
- Map the green tiers to their intended surface role — Starbucks Green for headings, Green Accent for CTAs, House Green for deep bands, Uplift for decorative
- Keep tracking tight at `-0.01em` / `-0.16px` on SoDoSans across the whole system
- Use 50px full-pill radius on every button without exception
- Apply `transform: scale(0.95)` as the universal button active state
- Reserve Gold for Rewards-status ceremony moments only
Avoid:
- Don't use pure white as the page canvas — the warm cream temperature is load-bearing
- Don't pick "one brand green" — the four-green system is intentional; using only `#006241` everywhere flattens the brand
- Don't use Gold as a general-purpose accent — it's a Rewards signal only
- Don't square the corners on buttons — the 50px pill is universal
- Don't introduce gradient fills — the system is color-block throughout
- Don't weight-contrast h1 and h2 by size — the hierarchy comes from weight + color (600 Starbucks-Green vs 400 Text Black)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Source pages analyzed: homepage, rewards, gift cards, product detail (Pink Energy Drink), product nutrition (Cold Brew).
Primary
- Starbucks Green (
#006241): The historic brand green. Used on h1 headings, primary section headers on the Rewards page, and as the main brand signal wherever a single dominant color is needed. - Green Accent (
#00754A): A slightly brighter, more luminous green. The primary filled-CTA color ("Explore our afternoon menu", "See the spring menu") and the fill of the floating Frap circular button. - House Green (
#1E3932): The deep near-black brand green. Footer surface, feature-band backgrounds, reward-status dark surfaces, and the headline "Free coffee is just the beginning" hero band on Rewards. - Green Uplift (
#2b5148): A secondary mid-dark green used sparingly on decorative accents and dark-gradient moments. - Green Light (
#d4e9e2): A pale mint wash used for form-valid-state tints and light green utility surfaces.
Secondary & Accent
- Gold (
#cba258): Reserved almost exclusively for Rewards-status ceremony — Gold-tier callouts, partnership badges (SkyMiles, Bonvoy), and premium-feeling accents. Never a general-purpose brand color. - Gold Light (
#dfc49d): Softer gold for background washes on gold-tier sections. - Gold Lightest (
#faf6ee): Cream-gold page-surface wash used under partnership sections on the Rewards page — ties the gold accent back into the warm neutral system.
Surface & Background
- White (
#ffffff): Primary card and modal surface. Also card fill on gift-card tiles. - Neutral Cool (
#f9f9f9): Subtle cool-gray surface used on dropdown menus ("Account" dropdown), form-card wraps, and quiet utility containers. - Neutral Warm (
#f2f0eb): The warm cream primary page canvas for Rewards utility zones and hero bands. - Ceramic (
#edebe9): A slightly warmer/darker cream for zone separators, soft page-section washes, and Rewards partnership band. - Black (
#000000): Deep ink reserved for the dark top-of-page CTA strip ("Join now") and high-contrast top-nav sign-in buttons.
Neutrals & Text
- Text Black (
rgba(0, 0, 0, 0.87)): Primary heading and body text color on light surfaces. Not pure black — an 87%-opacity black that reads warmer. - Text Black Soft (
rgba(0, 0, 0, 0.58)): Secondary/metadata text on light surfaces. - Text White (
rgba(255, 255, 255, 1)): Primary heading/body text on dark green surfaces. - Text White Soft (
rgba(255, 255, 255, 0.70)): Secondary text on dark-green surfaces — footer link descriptions, caption text. - Rewards Green (
#33433d): A dedicated muted slate-green used only on Rewards-page text blocks — a slightly "dustier" reading color than Text Black that signals "reward surface" without using full Starbucks Green.
Semantic & Accent
- Red (
#c82014): Error and destructive state (form invalid, destructive actions). - Yellow (
#fbbc05): Warning state, legacy brand touch. - Green Light (
#d4e9e2at 33% opacity =hsl(160 32% 87% / 33%)): Form valid-field tint background. - Red Tint (
hsl(4 82% 43% / 5%)): Invalid-field tint on forms.
Black / White Alpha Ladders
Two parallel translucent scales for overlay and secondary-text use:
rgba(0,0,0,0.06)throughrgba(0,0,0,0.90)in 10% steps — for dark overlays on light surfacesrgba(255,255,255,0.10)throughrgba(255,255,255,0.90)in 10% steps — for light overlays on dark surfaces
Gradient System
No structural gradient tokens observed. Surface hierarchy is solid-color-block throughout — the system relies on its five-tier cream/green surface palette rather than gradients.
Type scaleRead the full spec
Font Family
- Primary:
SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif— Starbucks' proprietary corporate typeface, used across nearly every surface - Loading Fallback:
"Helvetica Neue", Helvetica, Arial, sans-serif— what users see before SoDoSans loads - Rewards Serif:
"Lander Tall", "Iowan Old Style", Georgia, serif— used on specific Rewards-page headline moments for a warm editorial feel - Careers Script:
"Kalam", "Comic Sans MS", cursive— used exclusively for Careers-page "cup name" decorative touches, referencing the hand-written names on Starbucks cups
No OpenType stylistic sets explicitly activated at :root.
Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | Largest Rewards/hero display |
| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | Secondary hero headings |
| Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | Landing section headlines |
| H1 | 24px | 600 | 36px | -0.16px | Starbucks-Green primary heading |
| H2 | 24px | 400 | 36px | -0.16px | Regular-weight section title in Text Black |
| Body Large | 19px | 400–600 | 33.25px (~1.75) | -0.16px | Hero intro copy, feature-band body |
| Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | Default body copy |
| Small (text-2) | 1.4rem / ~14px | 400–600 | 1.5 | -0.01em | Button label, metadata, form labels |
| Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | Active float-label state, caption micro-copy |
| Button Label | 14–16px | 400–600 | 1.2 | -0.01em | All pill-button labels |
Letter-spacing tokens:
letterSpacingNormal:-0.01em(default — tight, characteristic)letterSpacingLoose:0.1em(emphasized caps)letterSpacingLooser:0.15em(uppercase-style labels, extreme emphasis)
Line-height tokens:
lineHeightNormal:1.5(body)lineHeightCompact:1.2(display/buttons)
Principles
- Tight negative tracking (
-0.01em) is applied almost universally — the entire product reads slightly compressed, which gives SoDoSans its confident presence without feeling squeezed. - Weight shifts carry hierarchy, not size shifts. H1 and H2 share the same 24px/36px size; only weight (600 vs 400) and color (Starbucks-Green vs Text Black) separate them.
- Size tokens use rem, anchored to
1rem = 10pxon this site (via afont-size: 62.5%root trick). So1.6rem= 16px,2.4rem= 24px, etc. The scale is semantic (textSize-1 through textSize-10), not arbitrary pixel values. - Context-specific typeface swaps — serif on Rewards, script on Careers — are deliberate and localized. Never mix them with the primary sans within the same surface.
- Body text never goes pure black — it sits at
rgba(0,0,0,0.87)to match the warm-neutral canvas temperature.
Note on Font Substitutes
SoDoSans is proprietary to Starbucks (licensed from House Industries, not publicly available). Reasonable open-source substitutes:
- Inter (Google Fonts) — similar humanist geometric proportions, wide weight range
- Manrope — slightly rounder, similar confident feel
- Nunito Sans — warmer, good for a "café" brand substitute
If substituting, verify the tight -0.01em / -0.16px tracking still reads well; some open-source fonts need -0.005em instead.
Lander Tall (the Rewards serif) is custom — open-source substitutes: Iowan Old Style (already in fallback), Lora, or Source Serif Pro. Kalam (Careers script) is available on Google Fonts directly.
Components and layoutRead the full spec
Buttons
1. Primary Filled — "Explore our afternoon menu / Sign up for free"
- Background:
#00754A(Green Accent) - Text:
#ffffff - Border:
1px solid #00754A - Radius:
50px(full pill) - Padding:
7px 16px - Font: SoDoSans, 16px, weight 600, letter-spacing
-0.01em - Active state:
transform: scale(0.95)via--buttonActiveScale - Transition:
all 0.2s ease
2. Primary Outlined — "Give them a try / Start an order"
- Background: transparent
- Text:
#00754A(Green Accent) - Border:
1px solid #00754A - Same radius/padding/active/transition as Primary Filled
3. Black Filled — "Join now"
- Background:
#000000 - Text:
#ffffff - Border:
1px solid #000000 - Radius:
50px, Padding:7px 16px - Font: 14px, weight 600
- Used on the top-of-page join strip and similar conversion moments
4. Dark Outlined — "Sign in"
- Background: transparent
- Text:
rgba(0, 0, 0, 0.87)(Text Black) - Border:
1px solid rgba(0, 0, 0, 0.87) - Radius:
50px, Padding:7px 16px - Font: 14px, weight 600
5. Green-on-Green Inverted — "See the spring menu"
- Background:
#ffffff - Text:
#00754A - Border:
1px solid #ffffff - Used when the surface behind the button is the dark green House Green band — white button with green text instead of a filled green pill on green bg
6. Outlined on Dark — "Learn more / Order now"
- Background: transparent
- Text:
#ffffff - Border:
1px solid #ffffff - Used on dark-green feature bands for secondary action paired with a white filled CTA
7. Consent Agree (dark-green variant)
- Background:
rgb(0, 130, 72)(a specific variant green used in the cookie-consent module) - Text:
#ffffff - No border,
50pxradius,7px 16pxpadding, 14px / weight 400 - Slightly brighter than Green Accent — reserved for the consent-banner Agree action
8. Frap — Floating Circular Order Button
- Background:
#00754A(Green Accent) - Icon:
#ffffff - Size:
5.6rem / 56px(standard),4rem / 40px(mini variant) - Radius:
50%(full circle) - Fixed bottom-right,
-0.8remtouch offset for extra tap comfort - Shadow stack: base
0 0 6px rgba(0,0,0,0.24)+ ambient0 8px 12px rgba(0,0,0,0.14) - Active state: ambient shadow fades to
0 8px 12px rgba(0,0,0,0) - This is the product's signature elevation element — it floats over every scrolled surface
9. Full-width Feedback Tab — "Provide feedback"
- Background:
#00754A - Text:
#ffffff - Radius:
12px 12px 0px 0px(top-rounded only) - Padding:
8px 16px - Font: 14px, weight 400
- Positioned fixed bottom-right-inside, attached to the viewport edge
Cards & Containers
Content Card (default)
- 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) - Used for: feature cards, menu-item tiles, reward-status panels
Gift Card Tile
- Background: illustrated photography fills the card (no solid bg)
- Radius: similar to cards (
~12px, slightly tighter on corners) - Shadow: lighter than default card — these are treated like physical cards laid on the canvas
- Labeled by category above the card grid (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)
Rewards Status Cards (Rewards page signature)
- Three-column grid: Bronze / Gold / Silver-ish — each a dark-green (
#1E3932) panel with: - Colored gradient/color header ring
- Numbered "Level" badge
- Status title in large SoDoSans weight 600
- Stars / benefits list in white/translucent-white text
- Bottom "As you earn more stars…" progression caption
Partnership Card (Rewards)
- Background:
#faf6ee(Gold Lightest) warm-cream surface - Content: partner logos ("SkyMiles", "Bonvoy") centered, with descriptive text below
- Radius and shadow follow default card spec
Dropdown Menu (Account dropdown, top-nav)
- Background:
#f9f9f9(Neutral Cool) - Menu items at
24px / weight 400in Text Black - No border — just background surface shift against white nav
Modal
- Padding:
2.4rem(--modalPadding) - Top padding:
8.8rem(--modalTopPadding) — leaves room for close button / header - Combined vertical padding:
11.2rem - Radius inherits from card spec (
12px)
Inputs & Forms
Floating Label Input
- Label floats above the input border when focused/filled
- Desktop label font size:
1.9remdefault, animates to1.4remwhen active - Mobile label font size:
1.6remdefault, animates to1.3remactive - Label horizontal offset:
12pxfrom left - Active label translate: up to
-12pxwith-50%Y translation - Field padding:
12px - Form horizontal padding:
1.6rem - Validation: valid-field gets
rgba(green-light, 0.33)tint; invalid-field getsrgba(red, 0.05)tint - Transition:
0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)on checked-input
Option Icon (checkbox/radio)
Responsive behaviourRead the full spec
Breakpoints
Inferred from component width tokens and progressive nav heights:
| Name | Width | Key Changes |
|---|---|---|
| xs | < 480px | Global nav 64px; hamburger menu; single-column layouts; pill buttons full-width |
| Mobile | 480–767px | Global nav 72px; gift-card grid 2-up; card padding tightens |
| Tablet | 768–1023px | Global nav 83px; gift-card grid 3-up; hero split begins to appear |
| Desktop | 1024–1439px | Global nav 99px; gift-card grid 4-up; full asymmetric hero 40/60 |
| XLarge | 1440px+ | Content caps at --columnWidthXLarge; gift-card grid 5-up; extra cream margin |
Touch Targets
- Pill buttons at
7px 16pxpadding measure ~32px tall — below 44px WCAG AAA minimum for touch-only surfaces. On mobile, button padding may be visually expanded to meet the minimum. - Frap floating circular button at
56pxis well above minimum. - Frap uses
--frapTouchOffset: calc(-1 * .8rem)to extend tap area 8px beyond visual edge. - Form float-label inputs grow their label font size on mobile (1.6rem base vs 1.9rem desktop) — easier to tap and read at arm's-length.
Collapsing Strategy
- Global nav height scales progressively: 64 → 72 → 83 → 99px across breakpoints, not a single value
- Hero split collapses: 40/60 asymmetric split → stacked (image top, content below) at mobile
- Gift-card grid: 5-up → 4-up → 3-up → 2-up → 1-up across breakpoints with adjusted card widths
- Feature bands: Stay full-width but text + imagery stack vertically on mobile
- Outer gutter scales: 16px → 24px → 40px as viewport grows
- Rewards 3-column status panels: Stack to single column on mobile
Image Behavior
- Hero product photography crops tighter vertically on mobile; content becomes the visual anchor
- Gift-card illustrations preserve aspect ratio; card grid reflows
opacity 0.3s ease-infade-in transition on image load (prevents jarring pop-in)- Rewards app-in-hand photography scales proportionally; never stretches
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-starbucks {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #00754a;
--link-hover-color: #00422a;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #00754a;
--button-text-color: #ffffff;
--button-hover-bg: #00422a;
--button-border: none;
--button-border-radius: 50px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 50px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clay 72.0%
- binance 70.2%
- kyocera museum 70.0%
Where this came from
- Source document
volt/design-md/starbucks/DESIGN.md· 36.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.