Starbucks
Starbucks' design system is a warm, confident retail flagship featuring four-tier green brand system (#006241, #00754A, #1E3932, #2b5148), warm cream canvas (#f2f0eb), and proprietary SoDoSans typeface.
Homepage Example
Color Palette (11)
Typography (7)
Components (5)
Border Radius
Design Philosophy
Overview
Starbucks' design system is a warm, confident retail flagship wearing the green of their storefront apron across every surface. The canvas alternates between neutral-warm cream (#f2f0eb) and ceramic off-white (#edebe9).
The proprietary SoDoSans typeface sits across nearly every surface. Greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role.
Key Characteristics
- Four-tier green brand system (Starbucks / Accent / House / Uplift)
- Gold reserved for Rewards-status moments only
- Warm-neutral canvas (#f2f0eb / #edebe9) instead of cold white
- Full-pill buttons (50px radius) universal
- Floating "Frap" circular CTA (56px, Green Accent fill)
Do's and Don'ts
Use Neutral Warm (#f2f0eb) as page canvas. Map green tiers to their intended role. Keep tracking tight at -0.01em. Use 50px full-pill radius on every button.
Design Insights
Accessibility Considerations
Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Frequently Asked Questions
Q. What are Starbucks's brand colors?
The Starbucks palette uses 11 colors, led by starbucks-green (#006241), green-accent (#00754A), house-green (#1E3932), green-uplift (#2b5148), green-light (#d4e9e2). The primary brand color is starbucks-green (#006241).
Q. What fonts does the Starbucks design system use?
Display type is set in SoDoSans at 80px / weight 400, while body and UI text uses SoDoSans at 14px / weight 400.
Q. What kind of website is Starbucks?
Starbucks is a E-commerce & Retail brand. Its design system documents 11 colors, 7 type styles and a 3-step border-radius scale.
Q. What border radius values does Starbucks use?
The radius scale runs from 12 (12px) to pill (9999px): 12 (12px), 50% (50px), pill (9999px).
Q. Where can I see the Starbucks design system?
This page shows Starbucks's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.