Starbucks
Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.
Coffeehouse brand. Deep evergreen and warm cream, a friendly geometric sans, full-bleed café photography.
Palette
Typography
50px
36px
24px
36px
19px
16px
14px
14px
13px
Spacing & Shape
| Token | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| 2xl | 40px | |
| 3xl | 48px | |
| 4xl | 56px | |
| 5xl | 64px |
Border Radius
| Token | Value | Preview |
|---|---|---|
| sm | 3px | |
| md | 12px | |
| full | 50px |
design.md
tokens (raw)
name: starbucks-design
version: alpha
description: >
Starbucks' canvas is clean white (#fff) with warm-neutral alternates (#f2f0eb ceramic),
but the brand is carried by its two greens: a deep Starbucks green (#006241 "House"/brand)
and a slightly brighter accent green (#00754A) used for links, the floating order button,
and CTAs. Full-bleed deep-green editorial bands (#1E3932 / #2b5148) stack down the page,
each pairing white display copy with a pill button. Type is the proprietary humanist sans
"SoDoSans" (with a StarbucksSerifCA serif for special moments and a Lander Tall rewards
serif). Everything rounds to a fully-pill 50px button and a soft 12px card. The signature
moves: stacked full-width green crates, white-outline pills on green, near-black text at
87% opacity (never pure black for body), and a gold accent reserved for Rewards.
colors:
# Brand greens
primary: '#006241' # Starbucks green — brand/house, deep CTA fills
primary-accent: '#00754A' # brighter accent green — links, FRAP order button, CTAs
on-primary: '#ffffff'
green-house: '#1E3932' # darkest green — editorial band backgrounds
green-uplift: '#2b5148' # mid deep-green — secondary bands / "Start an order" fill
green-light: '#d4e9e2' # pale green — tints, validation backgrounds
# Surface (light, warm-neutral)
surface: '#ffffff' # page canvas, cards
surface-cool: '#f9f9f9' # neutral cool panels
surface-warm: '#f2f0eb' # neutral warm sections
surface-ceramic: '#edebe9' # ceramic alt surface
# Text (alpha-on-white, never pure black)
on-surface: 'rgba(0,0,0,0.87)' # primary text
on-surface-secondary: 'rgba(0,0,0,0.58)' # muted copy, footer links
on-green: '#ffffff' # text on green bands
on-green-soft: 'rgba(255,255,255,0.70)'
# Inverse (header CTA)
ink: '#000000' # "Join now" pill fill
# Rewards / accent gold
gold: '#cba258' # Rewards tier accent
gold-light: '#dfc49d'
gold-lightest: '#faf6ee'
# Hairlines
hairline: 'rgba(0,0,0,0.06)'
# Semantic
error: '#c82014'
warning: '#fbbc05'
success: '#00754A'
typography:
display:
fontFamily: '"SoDoSans", "Helvetica Neue", Helvetica, Arial, sans-serif'
fontSize: 50px # textSize10 — hero display
fontWeight: 700
lineHeight: 1.2
letterSpacing: -0.01em
headline-lg:
fontFamily: '{typography.display.fontFamily}'
fontSize: 36px # textSize9
fontWeight: 700
lineHeight: 1.2
letterSpacing: -0.01em
headline-md:
fontFamily: '{typography.display.fontFamily}'
fontSize: 24px # textSize7 — section/card titles ("Cheers to the grads!")
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.01em
serif-display:
fontFamily: '"StarbucksSerifCA", Georgia, serif'
fontSize: 36px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0
body-lg:
fontFamily: '{typography.display.fontFamily}'
fontSize: 19px # textSize4 — lead/band copy
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.01em
body-md:
fontFamily: '{typography.display.fontFamily}'
fontSize: 16px # textSize3 — standard body
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.01em
label:
fontFamily: '{typography.display.fontFamily}'
fontSize: 14px # textSize2 — buttons, nav
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0
nav-link:
fontFamily: '{typography.display.fontFamily}'
fontSize: 14px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0.1em # uppercase MENU / REWARDS / GIFT CARDS
caption:
fontFamily: '{typography.display.fontFamily}'
fontSize: 13px # textSize1
fontWeight: 400
lineHeight: 1.5
letterSpacing: -0.01em
rounded:
sm: 3px # gift-card corner ratio
md: 12px # cards (--cardBorderRadius)
full: 50px # all buttons/pills (--buttonBorderRadius)
spacing: # 62.5% root → 1rem = 10px; base rhythm 8px
xs: 4px # space-1 .4rem
sm: 8px # space-2 .8rem
md: 16px # space-3 1.6rem (outer gutter)
lg: 24px # space-4 2.4rem
xl: 32px # space-5 3.2rem
2xl: 40px # space-6 4rem
3xl: 48px # space-7 4.8rem
4xl: 56px # space-8 5.6rem
5xl: 64px # space-9 6.4rem
components:
button-primary: # green CTA ("Start an order" on white)
backgroundColor: '{colors.primary-accent}'
textColor: '{colors.on-primary}'
typography: '{typography.label}'
rounded: '{rounded.full}'
padding: '7px 16px'
borderWidth: '1px'
lineHeight: '1.2'
button-dark: # header "Join now"
backgroundColor: '{colors.ink}'
textColor: '{colors.on-primary}'
typography: '{typography.label}'
rounded: '{rounded.full}'
padding: '7px 16px'
borderWidth: '1px'
button-outline: # header "Sign in"
backgroundColor: 'transparent'
textColor: '{colors.on-surface}'
borderColor: '{colors.on-surface}'
borderWidth: '1px'
typography: '{typography.label}'
rounded: '{rounded.full}'
padding: '7px 16px'
button-on-green-outline: # white-outline pill on green bands ("Send an eGift")
backgroundColor: 'transparent'
textColor: '{colors.on-green}'
borderColor: '{colors.on-green}'
borderWidth: '1px'
typography: '{typography.label}'
rounded: '{rounded.full}'
padding: '7px 16px'
button-on-green-fill: # white-fill green-text pill on green ("Explore the summer menu")
backgroundColor: '{colors.surface}'
textColor: '{colors.primary-accent}'
typography: '{typography.label}'
rounded: '{rounded.full}'
padding: '7px 16px'
frap: # floating "Order" action pill (sticky)
backgroundColor: '{colors.primary-accent}'
textColor: '{colors.on-primary}'
rounded: '{rounded.full}'
height: '56px'
boxShadow: '0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14)'
card:
backgroundColor: '{colors.surface}'
rounded: '{rounded.md}'
boxShadow: '{shadows.card}'
textColor: '{colors.on-surface}'
input:
backgroundColor: '{colors.surface}'
borderColor: 'rgba(0,0,0,0.58)'
borderWidth: '1px'
rounded: '{rounded.sm}'
typography: '{typography.body-md}'
padding: '12px'
band: # full-bleed editorial green section
backgroundColor: '{colors.primary}'
textColor: '{colors.on-green}'
shadows:
card: '0 0 .5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)'
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: '0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14)'
motion:
easing-standard: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
easing-expander: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
duration-entrance: 300ms
duration-exit: 200ms
button-active: 'scale(0.95)'
icons:
style: outline
sizes: { sm: 16px, md: 24px, lg: 80px }
color: '{colors.on-surface}'Starbucks
starbucks-design · alpha
Overview
Starbucks runs a white canvas with warm-neutral alternates (#f9f9f9, #f2f0eb,
#edebe9) and lets its iconic greens do the brand work. There are two: a deep
Starbucks green #006241 (the "house"/brand green) and a slightly brighter
accent green #00754A used for text links, the sticky floating order button (the
"FRAP"), and primary CTAs. The homepage is a stack of full-bleed editorial green
bands (#1E3932 darkest, #2b5148 mid) — each band pairs white display copy with a
single pill button, alternating white-outline and white-fill treatments. Type is the
proprietary humanist sans SoDoSans (bold, slightly condensed, friendly), supported
by a StarbucksSerifCA serif for special editorial moments and a Lander Tall
serif reserved for Rewards. Geometry is soft and consistent: every button is a 50px
fully-pill, cards are 12px. Body text is near-black at 87% opacity, never pure
black, which keeps the warmth. Gold (#cba258) appears only in the Rewards context. The
system reads as warm, premium, retail-grade — confident green, generous whitespace,
and disciplined pill geometry.
Colors
Brand greens — primary #006241 is the canonical Starbucks green; primary-accent #00754A is a half-step brighter and does the interactive work (links, FRAP, CTAs).
Editorial bands deepen further to green-house #1E3932 and green-uplift #2b5148.
green-light #d4e9e2 is a pale tint for validation backgrounds and soft fills.
Surface — canvas surface #fff; warm-neutral sections cycle surface-cool #f9f9f9,
surface-warm #f2f0eb, surface-ceramic #edebe9. The warmth differentiates Starbucks
from cold-white SaaS.
Text — alpha-on-white ramp: on-surface rgba(0,0,0,.87) for primary copy and
on-surface-secondary rgba(0,0,0,.58) for muted/footer links. On green bands, text is
white (on-green) or on-green-soft rgba(255,255,255,.70).
Inverse — the header Join now button is a pure-black (ink #000) pill — the one
place black goes solid.
Rewards gold — gold #cba258 (+ gold-light, gold-lightest) is scoped to the
Rewards/Stars experience and the gift-card/SVC surfaces; it is never a general accent.
Semantic — error #c82014, warning #fbbc05, success reuses #00754A.
Typography
Family: SoDoSans (Starbucks' custom humanist sans), falling back to
"Helvetica Neue", Helvetica, Arial, sans-serif. Closest open-source substitutes:
Mulish, Hanken Grotesk, or Source Sans 3. A StarbucksSerifCA (Georgia
fallback) serif carries special display headlines, and Lander Tall (Iowan Old Style)
is the Rewards serif. The root uses a 62.5% font-size so the --textSize* scale is
rem-based (1.3rem = 13px … 5.0rem = 50px). Weight strategy: 400 body, 600 labels/section
titles, 700 display and uppercase nav. Tracking is a subtle −0.01em on copy and a wide
0.1em on uppercase nav.
| Token | Size | Weight | Line-height | Tracking | Usage |
|---|---|---|---|---|---|
| display | 50px | 700 | 1.2 | −0.01em | Hero display |
| headline-lg | 36px | 700 | 1.2 | −0.01em | Big section heads |
| headline-md | 24px | 600 | 1.5 | −0.01em | Band/card titles ("Cheers to the grads!") |
| serif-display | 36px | 400 | 1.2 | 0 | Editorial serif moments |
| body-lg | 19px | 400 | 1.5 | −0.01em | Lead / band copy |
| body-md | 16px | 400 | 1.5 | −0.01em | Standard body |
| label | 14px | 600 | 1.2 | 0 | Buttons |
| nav-link | 14px | 700 | 1.2 | 0.1em | Uppercase nav (MENU / REWARDS) |
| caption | 13px | 400 | 1.5 | −0.01em | Footer / meta links |
Layout
Spacing is rem-driven on an 8px rhythm: 4 / 8 / 16 / 24 / 32 / 40 / 48 / 56 / 64.
Outer gutters step 16 → 24 → 40px by breakpoint. The dominant primitive is the
full-width editorial crate: alternating green and white bands, often split ~40/60
(--headerCrateProportion 40vw / --contentCrateProportion 60vw) into an image column
and a copy column. The global nav is a sticky 99px (desktop) white bar with a subtle
shadow. The footer is a calm white 5-column link grid. Whitespace is generous; content
caps around 1440px.
Elevation & Depth
Mostly flat with soft, low shadows. Cards use a barely-there two-layer shadow
(card); the nav and footer carry a faint 3-layer ambient shadow (nav). The floating
order "FRAP" button gets the strongest treatment — a 6px ambient glow plus an 8px drop
shadow so it reads as elevated above the page. No harsh or dark shadows; depth stays
retail-soft.
Shapes
Three radii: 3px (inputs / gift-card-corner ratio), 12px (cards/panels), and the defining 50px fully-pill for every button, tag, and the FRAP. The pill is the brand's geometric signature — there are essentially no sharp-cornered buttons anywhere.
Components
- button-primary — accent-green fill, white text, 50px pill, 7×16px padding (white-surface CTAs).
- button-dark — black fill, white text, pill ("Join now" in header).
- button-outline — transparent, 1px black border, pill ("Sign in").
- button-on-green-outline — transparent with white border on green bands ("Send an eGift", "Start an order").
- button-on-green-fill — white fill, green text, on green bands ("Explore the summer menu").
- frap — sticky floating accent-green pill, 56px tall, strong shadow; the persistent "Order" affordance.
- card — white fill, 12px radius, soft two-layer shadow.
- input — white fill, 1px
rgba(0,0,0,.58)border, 3px radius, float-label pattern, green validation tint.
Motion
Entrances run 300ms, exits 200ms, on a gentle cubic-bezier(0.25,0.1,0.25,1)
ease; expanders use cubic-bezier(0.25,0.46,0.45,0.94). Buttons press with a tactile
scale(0.95) active state. Images fade in over 0.3s. The personality is calm and
premium — no bounce, no parallax; motion confirms taps and reveals content smoothly.
Iconography
Outline icons rendered at 16/24px (with an 80px feature size for large illustrative
icons), inheriting currentColor — black on white, white on green, accent-green when
active. Social icons in the footer are solid black circular glyphs. The Siren logo is the
only fixed brand mark and is always the Starbucks green or white reverse.
Do's and Don'ts
- Do keep the canvas white/warm-neutral and let the greens carry the brand.
- Do use
#00754Afor links and the floating order button;#006241/#1E3932for editorial band fills. - Do make every button a 50px pill; alternate white-outline and white-fill pills on green bands.
- Do set body text at
rgba(0,0,0,.87)— never pure black. - Do reserve gold
#cba258for the Rewards/Stars context only. - Do use SoDoSans; bring in StarbucksSerifCA only for special editorial headlines.
- Don't ship a dark app canvas — the page is light; green is a band color, not the ground.
- Don't square off buttons or introduce non-pill CTA shapes.
- Don't scatter gold as a general accent or colorize icons beyond brand green.
Known Gaps
- Starbucks exposes an unusually complete
:roottoken set (captured above), so colors, spacing, button and card tokens are exact. Display-size hero weights are inferred from SoDoSans usage; the proprietary SoDoSans / StarbucksSerifCA / Lander Tall fonts need open-source substitutes for codegen. Rewards-only gold surfaces were not deeply sampled.
