Starbucks DESIGN.md

Design System Inspiration of Starbucks

Overview

Visual Theme & Atmosphere

Starbucks is the world's most recognizable coffee brand, and its digital surfaces translate the warmth of a "third place" — neither home nor work — into a calm, generous, premium-feeling interface. The defining gesture is the House Green (#00704A): a deep, confident emerald that has become so iconic it functions as a category-defining color the way Tiffany blue defines luxury jewelry. It is never bright or playful; it is the green of a well-worn apron, of forest canopy, of something that has been doing the same thing well for fifty years.

The page opens on warm, near-white surfaces — not the clinical #ffffff of a tech product, but slightly creamy off-whites (#f1f8f4, #fafafa) that feel like the inside of a paper cup. Text is set in near-black warm charcoal. Generous whitespace surrounds large, appetizing food-and-beverage photography, which is the real hero of every layout. The UI gets out of the way so the product can be desired.

Typography is built on SoDo Sans, Starbucks' proprietary humanist sans-serif (the name nods to the SoDo — South of Downtown — Seattle neighborhood of its headquarters), supported by Lander (an expressive serif for editorial moments) and Pike (a condensed display face for wayfinding and impactful headlines). The combination feels crafted and editorial rather than templated, reinforcing the artisanal-at-scale tension that is the whole brand.

What defines Starbucks visually is warmth disciplined by restraint: a single dominant green, warm neutrals, big rounded shapes (the Rewards program lives in pill-shaped buttons and circular reward stars), and photography-forward layouts. It reads premium, approachable, and unmistakably itself.

Key Characteristics:

• House Green (#00704A) as the singular brand-defining color — used for primary actions, brand marks, and accents
• Warm off-white backgrounds (#f1f8f4, #fafafa) rather than pure white — the "paper cup" feel
• SoDo Sans proprietary humanist sans as the workhorse, with Lander serif and Pike condensed for expression
• Fully-rounded pill buttons (border-radius 9999px) — a signature shape
• Photography-forward, editorial layouts where the product is the hero
• Generous whitespace and large touch targets — premium, unhurried, approachable
• Accent Spring Green (#00a862) and deep forest (#1e3932) for layering within the green family

Primary tasks

• Order ahead through the app and skip the line at pickup
• Find a store with seating and wifi near the next meeting
• Check how many Stars remain before the next free drink
• Browse the menu for new seasonal drinks between visits

Brand Narrative

Starbucks was founded in 1971 in Seattle's Pike Place Market — the Pike typeface and SoDo Sans both carry the company's home geography in their names. The original store sold coffee beans; the modern company was shaped by Howard Schultz, who returned from a trip to Italy convinced that America needed the espresso bar as a social institution. From that came the brand's central idea: the "third place" — a welcoming space between home and work where anyone can sit, connect, and feel at home over a cup of coffee.

The visual identity has refined steadily toward that idea. The Siren — the twin-tailed mermaid — anchors the logo, rendered in House Green; over successive redesigns she shed her surrounding wordmark ring to become a confident, standalone mark, signaling a brand so recognizable it no longer needs to spell its name. The green itself has become cultural shorthand for "coffee" the way few colors own a category.

Digitally, Starbucks runs one of the most successful loyalty programs in retail — Starbucks Rewards — whose stars, gold tier, and mobile order-ahead reshaped how the entire quick-service industry thinks about app-driven loyalty. The design system therefore carries two jobs at once: express the warm, premium, crafted third-place feeling, and power a high-frequency transactional app where ordering must be fast, clear, and rewarding.

What Starbucks refuses: the cold efficiency of pure-tech interfaces, discount-retail crowding, and trend-chasing. It chooses warmth, restraint, generous space, and a single iconic green held steady across decades.

Principles

1. One green, held steady. House Green #00704a is the brand. It carries primary action, identity, and accent. Foreign hues dilute fifty years of equity — resist them.
2. Warmth over clinical. Surfaces are warm off-whites; shadows and scrims are green-tinted; type is humanist. Nothing reads cold or sterile. The interface should feel like the inside of the cup.
3. Photography leads, UI serves. The product is the desire. Layouts are built around appetizing imagery; chrome recedes so the coffee can be wanted.
4. Pills everywhere. The fully-rounded shape is a brand signature. Buttons, badges, chips, search, toggles — round them. Sharp corners feel like a different company.
5. Premium is space. Generous whitespace is not wasted; it is the signal of craft and quality. When in doubt, add room, not content.
6. Reward generously. Loyalty surfaces (gold #cba258, stars, tiers) celebrate the customer. The tone of Rewards is "you've earned this", never transactional.
7. Crafted, not templated. Three proprietary typefaces with distinct jobs, art-directed photography, and warm palette layering make every surface feel made, not assembled.
8. Fast where it counts. Behind the warmth is a high-frequency ordering app. Order, pay, and reward flows must be unambiguous and quick — warmth never costs clarity at checkout.

Personas

Personas below are fictional archetypes informed by publicly described Starbucks customer segments, not individual people.

Maya, 26, Chicago. Marketing coordinator who order-aheads a venti oat milk latte five mornings a week on her commute. Lives in the app's Order tab; expects her favorites to be one tap away and her stars to update instantly. Knows exactly how many stars until her next free drink. If mobile order-ahead is slow or her usual store isn't pre-selected, she's annoyed before 9am. The app is a daily ritual utility for her, not a place to browse.

David, 41, Austin. Works from coffee shops two or three days a week — Starbucks is his rotating office. Uses the store locator constantly to find a location with seating and wifi near his next meeting. Values the "third place" promise literally. Browses the menu occasionally for new seasonal drinks, reads the story/editorial content, and appreciates that the brand feels consistent and warm wherever he is.

Priya, 19, Seattle. College student and Rewards power-user who games the program — Double Star Days, app-exclusive offers, personalized challenges. Treats Stars like a points game and screenshots her gold tier. Highly responsive to celebratory, generous loyalty copy; turned off by anything that feels like a cold corporate upsell. Discovers limited-time drinks through the app and social, then orders ahead to skip the line.

Colors

Primary

• House Green (#00704A): The brand. Primary CTAs, links, active states, brand mark, the apron green. The single most important color in the system.
• Accent Green / Spring Green (#00a862): Brighter secondary green for highlights, illustration accents, success-adjacent moments, and energetic surfaces.
• House Black-Green / Deep Forest (#1e3932): Darkest green, near-black with green undertone. Dark surfaces, footers, premium dark sections, headings on light editorial layouts.
• Warm White (#f1f8f4): Faint green-tinted off-white. Section backgrounds, the default "paper cup" surface.
• Pure-ish White (#fafafa): Card and page background where a cleaner neutral is needed.

Secondary (Warm & Editorial)

• Cream (#f7f7f7 / #ede9e1): Warm neutral panels, alternating section backgrounds, editorial blocks.
• Light Tan / Latte (#d4e9e2): Soft green-tinted tint blocks, info banners, subtle promotional surfaces.
• Gold / Rewards (#cba258): Starbucks Rewards accent — used for the gold tier, reward stars, loyalty surfaces.
• Berry / Accent (#c44d58): Seasonal accent (used sparingly for limited-time / holiday moments).

Semantic

• Success Green (#00754a): Confirmation, order-ready, completed states. Tracks the house green deliberately.
• Error Red (#e75b52): Errors, destructive actions, form validation failures.
• Warning Amber (#cba258): Pending, attention-needed, expiring rewards.
• Info Green (#1e3932 on #d4e9e2): Informational banners using the green family rather than a foreign blue.

Neutral Scale

• Black (#000000): Reserved — true black for maximum-contrast brand moments.
• Warm Charcoal (#1e1e1e): Primary heading text. Warm near-black.
• Body Gray (#4a4a4a): Standard body copy.
• Secondary Gray (#6b6b6b): Captions, metadata, secondary labels.
• Disabled Gray (#8c8c8c): Placeholder and disabled text.
• Border Gray (#d4d4d4): Default borders, dividers, input outlines.
• Light Gray (#e8e8e8): Subtle dividers, disabled fills.
• Background Gray (#f2f0eb): Warm neutral section fill.

Surface & Borders

• Border Default: #d4d4d4. Standard input and card borders.
• Border Strong: #1e3932. Outlined buttons, emphasized edges.
• Overlay Scrim: rgba(30,57,50,0.6). Green-tinted modal backdrop (never neutral black — the scrim carries brand).
• Photo Gradient: linear-gradient(rgba(0,0,0,0) 0%, rgba(30,57,50,0.7) 100%). Text-legibility gradient over hero photography.

Typography

Font Family

• Primary: "SoDo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif — proprietary humanist sans, the UI workhorse (body, labels, buttons, navigation).
• Display / Editorial Serif: "Lander", Georgia, "Times New Roman", serif — expressive accent for hero headlines and editorial moments.
• Condensed Display: "Pike", "Oswald", "Arial Narrow", sans-serif — condensed, impactful headlines and in-store-style wayfinding.
• Fallback stack note: SoDo Sans ships in multiple weights; the UI primarily uses 400 (Regular), 600 (SemiBold), and 700 (Bold).

Hierarchy

Principles

• Three faces, clear jobs: SoDo Sans does the daily UI work; Lander adds editorial warmth in hero/story moments; Pike supplies condensed impact for wayfinding. Never mix all three in one component.
• Humanist warmth: SoDo Sans has soft, slightly open letterforms — never use a geometric or grotesque substitute that reads cold or techy.
• Generous leading: Body copy runs 1.5–1.63 line-height. The brand reads unhurried; tight leading feels cheap.
• Restrained weights: 400 body, 600 emphasis/buttons, 700 headings. Avoid thin (300) and black (900) weights in product UI.
• Sentence case default: Headlines and body are sentence case; all-caps reserved for small nav CTAs and legal labels with added letter-spacing.

Layout

Spacing System

• Base unit: 4px; primary rhythm on 8px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
• Section vertical padding: 64–96px on desktop — generous, unhurried
• Card content padding: 16–32px

Grid & Container

• Max content width: 1280px, centered
• Desktop grid: 12 columns, 24px gutters
• Horizontal page padding: 24px mobile, 48px desktop
• Product grids: 2 cols mobile → 3 cols tablet → 4 cols desktop

Whitespace Philosophy

• Premium = space: Generous margins around photography and CTAs signal craft and quality. Crowding reads as discount.
• Photography-led: Layouts are built around large appetizing imagery; copy and CTAs sit in the negative space the photo leaves.
• Alternating warmth: Sections alternate between warm white (#f1f8f4) and pure-ish white (#fafafa) to create rhythm without hard dividers.

Border Radius Scale

• Pill (9999px): Buttons, badges, search fields, toggles, chips — the signature shape
• Comfortable (16px): Standard cards, modals, image containers
• Large (20px): Feature/editorial cards
• Compact (4-8px): Text inputs, toasts, inline banners

Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 44px height (48px preferred on mobile)
• Nav and list items: minimum 48px tap height
• Icon buttons: 44×44px minimum hit area

Collapsing Strategy

• Top nav collapses to a hamburger menu + persistent siren logo and "Sign in" on mobile
• Multi-column footer stacks into accordion sections on mobile
• Product grids reflow 4 → 3 → 2 → 1 columns down the breakpoints
• Sticky bottom "Order now" CTA bar appears on mobile menu/product flows

Image Behavior

• Hero photography: full-bleed, art-directed crops per breakpoint, bottom green gradient for text legibility
• Product images: square (1:1) within rounded cards, lazy-loaded
• Siren logo: scales 32–48px, always circular, never recolored off House Green

Elevation & Depth

Shadow Philosophy: Shadows are tinted with the deep-forest green (rgba(30,57,50,...)) rather than pure black. This keeps elevation feeling warm and on-brand — even depth carries the green. Elevation is used sparingly; the primary tools for hierarchy are whitespace, warm surface layering, and photography, not heavy shadows.

Blur Effects

• Sticky nav applies a subtle backdrop blur (backdrop-filter: blur(8px)) with a translucent white background on scroll.
• Photographic hero overlays use a bottom-up green gradient rather than blur for text legibility.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.subtle: 0 2px 8px rgba(30,57,50,0.08)
• shadow.standard: 0 4px 16px rgba(30,57,50,0.12)
• shadow.elevated: 0 6px 20px rgba(30,57,50,0.25)
• shadow.modal: 0 12px 40px rgba(30,57,50,0.24)

Motion & Easing

Durations (named):

Easings:

Signature motions.

1. Card hover-raise. Product cards lift on hover — transform: translateY(-4px) with shadow growing from Level 1 to Level 2 over motion-standard / ease-standard. Warm, gentle, premium.
2. Stars earned. When stars are awarded, the gold star scales in with ease-celebrate overshoot over motion-emphasis, and the count rolls up. This is the one place playful spring motion is licensed — loyalty should feel rewarding.
3. Add-to-order. The cart badge increments with a brief scale pulse (scale 1 → 1.2 → 1 over motion-fast) so the action is felt, paired with the confirmation toast.
4. Modal & sheet entrance. Modals fade + scale from 0.96 with ease-enter over motion-emphasis, green-tinted scrim fading in synchronously. Dismissal is faster via ease-exit.
5. Reduce motion. Under prefers-reduced-motion: reduce, all tokens collapse to motion-instant; the celebratory star earn becomes a simple fade. The app stays warm and usable, just less kinetic.

Components

Buttons

The signature Starbucks button is a fully-rounded pill (border-radius: 9999px). This shape echoes the Rewards program's circular language and is the single most recognizable interaction primitive in the system.

Primary (Filled Green)

• Background: #00704a
• Text: #ffffff
• Border: none
• Radius: 9999px (pill)
• Padding: 12px 24px
• Font: 14px / 600 / SoDo Sans, letter-spacing 0.3px
• Hover: background #1e3932 (deep forest)
• Active/Pressed: background #16352e
• Disabled: background #d4d4d4, text #8c8c8c
• Min height: 44px
• Use: Primary CTA — "Order now", "Join now", "Add to order"

Secondary (Outlined Green)

• Background: transparent
• Text: #00704a
• Border: 1px solid #00704a
• Radius: 9999px (pill)
• Padding: 12px 24px
• Font: 14px / 600 / SoDo Sans, letter-spacing 0.3px
• Hover: background rgba(0,112,74,0.06), border #1e3932, text #1e3932
• Use: Secondary action paired with a filled primary — "Sign in", "Learn more"

Tertiary / Text Link

• Background: none
• Text: #00704a
• Border: none, with text-decoration: underline on hover
• Padding: 8px 12px
• Font: 14px / 600 / SoDo Sans
• Use: Low-emphasis inline action

Dark Surface (Filled White)

• Background: #ffffff
• Text: #00704a
• Border: none
• Radius: 9999px
• Padding: 12px 24px
• Font: 14px / 600 / SoDo Sans
• Use: Primary CTA placed on a deep-forest (#1e3932) or photographic dark section

Rewards / Gold

• Background: #cba258
• Text: #1e3932
• Border: none
• Radius: 9999px
• Padding: 12px 24px
• Font: 14px / 700 / SoDo Sans
• Use: Loyalty / Rewards-specific CTA ("Join Starbucks Rewards")

Inputs

Text Field (Default)

• Background: #ffffff
• Text: #1e1e1e
• Border: 1px solid #8c8c8c
• Radius: 4px
• Padding: 14px 16px
• Font: 16px / 400 / SoDo Sans
• Label: floating/top label, 12px / 600 / #4a4a4a
• Placeholder: #8c8c8c
• Focus: 2px solid #00704a, subtle 0 0 0 3px rgba(0,112,74,0.15) focus ring
• Use: Standard form input (account, store search, checkout)

Text Field (Error)

• Border: 2px solid #e75b52
• Helper text: #e75b52, 12px / 400, below field
• Use: Validation failure — paired with one specific, actionable message

Search Field

• Background: #f2f0eb
• Border: none
• Radius: 9999px (pill, matching button language)
• Padding: 12px 20px, leading search icon #6b6b6b
• Font: 16px / 400 / SoDo Sans
• Use: Store locator, menu search

Cards

Standard Product Card

• Background: #ffffff
• Border: 1px solid #e8e8e8
• Radius: 16px
• Padding: 0 (image flush to top corners) then 16px content padding
• Shadow: 0 2px 8px rgba(30,57,50,0.08)
• Image: top, full-bleed, matching top radius
• Use: Menu item, product, promotional tile

Editorial / Feature Card

• Background: #f1f8f4
• Border: none
• Radius: 20px
• Padding: 32px
• Shadow: none — flat warm surface
• Use: Story blocks, "what's new", campaign features

Rewards Card

• Background: linear-gradient(135deg, #00704a, #1e3932)
• Text: #ffffff, star icon #cba258
• Radius: 16px
• Padding: 24px
• Shadow: 0 4px 16px rgba(30,57,50,0.18)
• Use: Loyalty balance, star count, reward progress

Badges / Tags

Status (New / LTO)

• Background: #00704a
• Text: #ffffff
• Radius: 9999px
• Padding: 4px 12px
• Font: 11px / 700 / SoDo Sans, letter-spacing 0.4px, uppercase
• Use: "NEW", "LIMITED TIME"

Rewards (Gold)

• Background: #cba258
• Text: #1e3932
• Radius: 9999px
• Padding: 4px 12px
• Font: 11px / 700 / SoDo Sans, uppercase
• Use: Star earnings, member-exclusive markers

Subtle (Tinted)

• Background: #d4e9e2
• Text: #00704a
• Radius: 9999px
• Padding: 4px 12px
• Font: 11px / 600 / SoDo Sans
• Use: Category labels, dietary tags ("Vegan", "New")

Navigation

Top Nav Bar

• Background: #ffffff
• Height: 72px
• Border-bottom: 1px solid #e8e8e8
• Logo: circular siren mark, #00704a, ~48px
• Links: #1e1e1e, 14px / 600, hover underline in #00704a
• Right CTAs: "Sign in" (outlined pill) + "Join now" (filled green pill)
• Use: Desktop primary navigation — sticky on scroll

Footer

• Background: #1e3932 (deep forest) or #000000
• Text: #ffffff headings, #d4d4d4 links
• Link hover: underline, #ffffff
• Use: Global footer — dark, generous, multi-column

Toasts / Alerts

Default Toast

• Background: #1e3932
• Text: #ffffff
• Border: none
• Radius: 8px
• Padding: 14px 18px
• Shadow: 0 6px 20px rgba(30,57,50,0.25)
• Font: 14px / 600 / SoDo Sans
• Use: Transient confirmation ("Added to your order")

Inline Success Banner

• Background: #d4e9e2
• Text: #00704a
• Border-left: 4px solid #00704a
• Radius: 8px
• Padding: 12px 16px
• Use: Persistent success / informational message

Dialogs / Modals

Centered Modal

• Background: #ffffff
• Text: #1e1e1e
• Border: none
• Radius: 16px
• Padding: 32px
• Shadow: 0 12px 40px rgba(30,57,50,0.24)
• Scrim: rgba(30,57,50,0.6) (green-tinted)
• Use: Confirmation, store selection, account prompts

Toggles

Switch

• Track: #00704a (on) / #d4d4d4 (off)
• Thumb: #ffffff 20px circle, 0 1px 3px rgba(0,0,0,0.2)
• Radius: 9999px
• Use: Preference settings, notification opt-ins

Tier 1 sources: https://www.starbucks.com (live production site, verified via live DOM getComputedStyle).

States

Do's and Don'ts

Do

• Use House Green (#00704a) as the singular primary action and brand color
• Use fully-rounded pill buttons (border-radius: 9999px) — it is the signature shape
• Use warm off-white backgrounds (#f1f8f4, #fafafa) instead of clinical pure white
• Let large, appetizing photography lead the layout; let copy live in negative space
• Tint shadows and scrims with deep forest green (rgba(30,57,50,...))
• Use SoDo Sans for UI; reserve Lander/Pike for editorial and wayfinding moments
• Keep generous whitespace (64–96px section padding) to read premium
• Use gold (#cba258) exclusively for Rewards / loyalty surfaces

Don't

• Don't introduce a foreign accent color (blue, purple) for primary actions — green is the sole brand hue
• Don't use sharp-cornered buttons — pills are the brand
• Don't use pure black scrims or shadows — always green-tinted
• Don't crowd CTAs or photography; density reads as cheap
• Don't substitute a cold geometric sans for SoDo Sans
• Don't use gold for anything other than Rewards/loyalty
• Don't use tight line-height on body copy — the brand is unhurried (1.5+)
• Don't mix all three typefaces inside a single component

Voice & Tone

Starbucks speaks like a warm, knowledgeable barista who genuinely wants your day to be better — friendly, welcoming, never corporate, never pushy. Copy is conversational and human ("Let's get you to your nearest store"), uses contractions, and leads with the customer's moment rather than the product spec. It celebrates ritual and small joys. It is inclusive and warm without being saccharine.

Forbidden phrases. Avoid cold corporate language ("Submit", "Error occurred", "Invalid input"), pushy hard-sell ("Buy now or miss out"), and anything that breaks the warm-third-place feeling. Prefer "Order" over "Purchase", "Join" over "Register", "We couldn't…" over "Failure".

Agent Prompt Guide

Quick Color Reference

• Primary CTA: House Green (#00704a)
• CTA Hover: Deep Forest (#1e3932)
• Accent Green: Spring Green (#00a862)
• Background: Warm White (#f1f8f4) / #fafafa
• Dark Surface: Deep Forest (#1e3932)
• Heading text: Warm Charcoal (#1e1e1e)
• Body text: Body Gray (#4a4a4a)
• Caption text: Secondary Gray (#6b6b6b)
• Placeholder: Disabled Gray (#8c8c8c)
• Border: Border Gray (#d4d4d4)
• Rewards / Loyalty: Gold (#cba258)
• Success: #00754a · Error: #e75b52 · Warning: #cba258

Example Component Prompts

• "Create a primary button: House Green #00704a background, white text, SoDo Sans 14px weight 600 with 0.3px letter-spacing, fully-rounded pill (border-radius: 9999px), 12px 24px padding, 44px min-height. Hover: background #1e3932."
• "Build a product card: white bg, 1px #e8e8e8 border, 16px radius, top full-bleed square image, 16px content padding. Title SoDo Sans 18px weight 600 #1e1e1e, price 16px weight 700, green pill 'Add' button. Shadow 0 2px 8px rgba(30,57,50,0.08)."
• "Design a Rewards card: gradient linear-gradient(135deg, #00704a, #1e3932), white text, gold #cba258 star icon, 16px radius, 24px padding, star count 28px weight 700. Shadow 0 4px 16px rgba(30,57,50,0.18)."
• "Create a hero section: full-bleed coffee photography, bottom green gradient linear-gradient(rgba(0,0,0,0), rgba(30,57,50,0.7)), headline in Lander serif 48px white, white-filled pill CTA with #00704a text."
• "Design a text input: white bg, 1px #8c8c8c border, 4px radius, 14px 16px padding, SoDo Sans 16px. Focus: 2px #00704a border + 0 0 0 3px rgba(0,112,74,0.15) ring. Floating label 12px weight 600 #4a4a4a."

Iteration Guide

1. House Green #00704a is the only primary action color — never introduce blue/purple
2. Buttons, badges, chips, search, toggles are all pills (border-radius: 9999px)
3. Backgrounds are warm off-whites (#f1f8f4 / #fafafa), not pure white
4. Shadows and scrims are deep-forest-tinted (rgba(30,57,50,...))
5. SoDo Sans for UI; Lander serif and Pike condensed only for hero/editorial/wayfinding
6. Gold #cba258 belongs to Rewards only
7. Be generous with whitespace — premium reads as space; let photography lead