Shopping / iOS / Android / Web

Starbucks

Starbucks speaks in named greens, Accent for actions and House for bands, and warms up into gold and kraft only when it talks about Rewards.

Download
  • #006241
  • #00754A
  • #1E3932
  • #CBA258
  • #F3E9D9
  • #F9F9F9

Color

Every color token in the file, grouped by role.

Brand

  • primary#00754A
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#000000

More

  • starbucks green#006241
  • hero green#006242
  • house green#1E3932
  • green uplift#2B5148
  • green light#D4E9E2
  • gold#CBA258
  • gold light#DFC49D
  • gold lightest#FAF6EE
  • coffee leaf#2C3D28
  • kraft#7A5231
  • neutral cool#F9F9F9
  • neutral warm#F2F0EB
  • ceramic#EDEBE9
  • warm 25#F7F0E4
  • warm 50#F3E9D9
  • warm 5#FFFCF7
  • red#C82014
  • yellow#FBBC05

Typography

Each style is set with the file's own family, size, weight and spacing.

  • SoDoSansSoDoSans is private and not available in open fonts. Shown in Onest, the closest open match.
  • display50px / 700 / 60px

    Starbucks

  • headline28px / 700 / 38.78px

    Pack my box with five dozen liquor jugs

  • title24px / 600 / 33.6px

    Pack my box with five dozen liquor jugs

  • lead19px / 400 / 28.5px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 19.2px

    Continue to checkout

  • eyebrow14px / 700 / 21px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm4px
  • md12px
  • lg24px
  • xl32px
  • pill50px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md16px
  • lg24px
  • xl32px
  • xxl40px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button dark
    button-dark
  • button outline
    button-outline
  • hero band
    hero-band
  • house band
    house-band
  • rewards card
    rewards-card
  • card
    card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 136 lines
version: alpha
name: Starbucks-design-analysis
description: "A coffee ordering brand in named greens (Starbucks Green #006241, Accent #00754a, House Green #1e3932) with warm neutrals and gold for Rewards, SoDo Sans throughout, text at 87 percent black, 50px pill buttons and 12px cards."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00754a"
  on-primary: "#ffffff"
  starbucks-green: "#006241"
  hero-green: "#006242"
  house-green: "#1e3932"
  green-uplift: "#2b5148"
  green-light: "#d4e9e2"
  gold: "#cba258"
  gold-light: "#dfc49d"
  gold-lightest: "#faf6ee"
  coffee-leaf: "#2c3d28"
  kraft: "#7a5231"
  ink: "#000000"
  canvas: "#ffffff"
  neutral-cool: "#f9f9f9"
  neutral-warm: "#f2f0eb"
  ceramic: "#edebe9"
  warm-25: "#f7f0e4"
  warm-50: "#f3e9d9"
  warm-5: "#fffcf7"
  red: "#c82014"
  yellow: "#fbbc05"

typography:
  # Font note: "SoDoSans" is a private font and is not available in open fonts. Closest open alternative: "Onest".
  display:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 60px
  headline:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 38.78px
    letterSpacing: -0.16px
  title:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 33.6px
    letterSpacing: -0.24px
  lead:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 28.5px
    letterSpacing: -0.16px
  body:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.16px
  button:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 19.2px
    letterSpacing: -0.16px
  eyebrow:
    fontFamily: "SoDoSans, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: 1.4px

rounded:
  sm: 4px
  md: 12px
  lg: 24px
  xl: 32px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 35px
    padding: 7px 16px
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 33px
    padding: 7px 16px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 33px
    padding: 7px 16px
  hero-band:
    backgroundColor: "{colors.hero-green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    padding: 32px
  house-band:
    backgroundColor: "{colors.house-green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    padding: 24px
  rewards-card:
    backgroundColor: "{colors.warm-50}"
    textColor: "{colors.coffee-leaf}"
    typography: "{typography.lead}"
    rounded: "{rounded.xl}"
    padding: 24px
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

Starbucks sells coffee in its cafes and through an ordering and Rewards app. Its site is drawn from a token set of named greens, warm neutrals and golds that ships with the live pages: deep green hero bands, black and green pill buttons, SoDo Sans for all text, and a warmer, gold-tinted palette for Rewards. [Measured]

What defines the look:

  1. Named greens. Starbucks Green #006241, Accent Green #00754a, House Green #1e3932, Uplift #2b5148 and Light Green #d4e9e2. Hero bands are a deep green (#006242) with white type, and Accent Green fills the Join buttons. [Measured]
  2. Soft black text. Text is black at 87 percent, and secondary text black at 58 percent, rather than gray hexes. [Measured]
  3. 50px pills. Every button is a pill (buttonBorderRadius 50px), 31 to 35 high, with 7 by 16 padding. [Measured]
  4. Warm Rewards. The Rewards page shifts to warm neutrals (#f3e9d9, #fffcf7, #f1ece4), gold #cba258, coffee leaf green #2c3d28 headings and a kraft brown #7a5231 eyebrow. [Measured]
  5. SoDo Sans. One house face at 400, 600 and 700, with small negative tracking on text and wide tracking on uppercase labels. [Measured]

Source for this file: the home page, the menu page, the Rewards page and the account sign-in page (which rendered only its footer), measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the tokens the live site declares on its root element (colors, space, radius, shadows, durations). Starbucks also publishes brand guidelines, which were not read for this file. The ordering flow sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Accent Green#00754acolorGreenAccent: Join buttons, toggles, skip link [Measured]
Starbucks Green#006241 (#006242 on the hero)colorGreenStarbucks, colorStarbucksGreen300 [Measured]
House Green#1e3932colorHouseGreen: menu band, dark sections [Measured]
Uplift and Light Green#2b5148, #d4e9e2colorGreenUplift, colorGreenLight [Measured]
Gold#cba258, #dfc49d, #faf6eecolorGold, GoldLight, GoldLightest: Rewards [Measured]
Coffee leaf#2c3d28, #253322colorCoffeeLeaf600, 700: Rewards headings [Measured]
Kraft#7a5231colorKraft700: Rewards eyebrow [Measured]
Textblack at 87 percent, soft at 58 percentcolorTextBlack, colorTextBlackSoft [Measured]
Text on darkwhite, soft at 70 percentcolorTextWhite, colorTextWhiteSoft [Measured]
Neutrals#f9f9f9 cool, #f2f0eb warm, #edebe9 ceramiccolorNeutralCool, Warm, Ceramic [Measured]
Warm neutrals#fffcf7, #f7f0e4, #f3e9d9, #f1ece4colorWarmNeutral5, 25, 50, colorNeutral50 [Measured]
Red and yellow#c82014, #fbbc05colorRed, colorYellow: alerts [Measured]

Typography

SoDo Sans at 400, 600 and 700. [Measured]

RoleDesktopMobileWeight and tracking
Rewards display50 on 6028 on 33.6700 [Measured]
Page headline28 on 38.7824 on 33.24700, -0.16px [Measured]
Hero title24 on 33.622 on 30.8600, -0.24px [Measured]
Lead19 on 28.516 on 24400 to 600, -0.16px [Measured]
Body16 on 2414 on 21400, -0.16px [Measured]
Button16 on 19.2 (14 in the header)14 on 16.8600 [Measured]
Uppercase label14 on 21, 1.4pxsame700 [Measured]
Legal14 on 2113 on 19.5400, 58 percent black [Measured]

Shape and spacing

Buttons are 50px pills, cards 12px (cardBorderRadius) with a hairline double shadow, and Rewards panels 32. [Measured] The space scale is 4, 8, 16, 24, 32, 40, 48, 56 and 64. [Measured]

Iconography and motion

The token set names motion durations: 0.4s by default, 300ms entrances, 200ms exits, and 200ms in, 100ms out for toasts. [Measured] Icons were not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. Dark green bands are fixed. [Measured]

Platform: iOS

How the Starbucks iOS app looks and behaves was not captured. The token set ships on the web, and the brand guidelines were not read, so it cannot be shown here that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, scanning to pay, ordering, gift cards and offers is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

An Accent Green order or pay action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the named greens, the 50px pills and SoDo Sans with the web. [Inferred]

Platform: Android

How the Starbucks Android app looks and behaves was not captured. The token set ships on the web, and the brand guidelines were not read, so it cannot be shown here that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, scanning to pay, ordering, gift cards and offers is expected. [Inferred]

Main action

Expected on Android: Floating action button.

An Accent Green order or pay action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the named greens, the 50px pills and SoDo Sans with the web. [Inferred]

Platform: Web

The home page, menu page and Rewards page, measured at 1440 and 390 wide. The sign-in page rendered only its footer.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with uppercase menu links (Menu, Rewards, Gift Cards) at 14 on 21, 700 with 1.4px tracking, an outlined Sign in pill and a black Join now pill, both 33 high. On mobile the links move into a menu of 48 high rows. [Measured]

Main action

Expected on Web: Page-level button.

An Accent Green #00754a pill with white 16px semibold text, 35 high ("Join now" on Rewards). On the green hero, the action is an outlined white pill ("Order now"). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Toast timings are named in the tokens (200ms in, 100ms out). Toasts and modals themselves were not seen. [Measured]

Controls

Expected on Web: Native or custom.

Rewards tier tabs (25, 60, 100, 200 Stars) are text tabs, 53 high on desktop and 45 on mobile. Toggles use Accent Green when on and soft black when off, per the tokens. [Measured]

Text sizing

Expected on Web: Browser zoom.

Space and some type tokens are set in rem, and sizes step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Header pills are 31 to 35 high, below 44. Mobile menu rows are 48 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The sign-in page did not render its form in the automated browser, so sign-in options were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive site: menus collapse, type steps down, and the greens and pills stay the same. Header pills are smaller than touch guidance on mobile. [Measured]

Cross-platform consistency

Consistent across platforms: the named greens, the warm Rewards palette, 50px pills and SoDo Sans. [Measured for web, Inferred for the apps]

Intentionally different: the Rewards page uses a warmer, gold-led palette than the rest of the site. [Measured]

Do's and Don'ts

Do

  • Use the named greens for their jobs: Accent Green for actions, Starbucks and House Green for bands.
  • Set text in black at 87 percent and secondary text at 58 percent.
  • Make every button a 50px pill.
  • Move to warm neutrals and gold for anything about Rewards.

Don't

  • Don't use gold outside Rewards.
  • Don't use square buttons.
  • Don't use pure black for body text.

Known Gaps

  • The ordering flow, cart and account screens sit behind an account, and the sign-in page rendered only its footer, so none were measured.
  • The iOS and Android apps were not captured. The token set ships on the web, and the brand guidelines were not read, so every mobile topic is inferred.
  • Icons and modals were not measured.
  • Header pills are 31 to 35 high, below the 44 and 48 touch minimums. That is the shipped size.
  • SoDo Sans is private. Onest was chosen by comparing the same headline side by side: it matches the open, slightly rounded letters and measured within 1 percent of the width. DM Sans and Geist were close seconds.
  • Account deletion and store policy rules were not verified.