Starbucks

Design System Inspired by Starbucks

1. Visual Theme & Atmosphere

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.16px letter-spacing as the universal voice

• Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names

• Full-pill buttons (50px radius) 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.

2. Color Palette & Roles

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 (#d4e9e2 at 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) through rgba(0,0,0,0.90) in 10% steps — for dark overlays on light surfaces

• rgba(255,255,255,0.10) through rgba(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.

3. Typography Rules

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 = 10px on this site (via a font-size: 62.5% root trick). So 1.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.

4. Component Stylings

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

1. 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

1. 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

1. 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

1. 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

1. 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

1. Consent Agree (dark-green variant)

• Background: rgb(0, 130, 72) (a specific variant green used in the cookie-consent module)

• Text: #ffffff

• No b