--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Accent Green | `#00754a` | colorGreenAccent: Join buttons, toggles, skip link [Measured] | | Starbucks Green | `#006241` (`#006242` on the hero) | colorGreenStarbucks, colorStarbucksGreen300 [Measured] | | House Green | `#1e3932` | colorHouseGreen: menu band, dark sections [Measured] | | Uplift and Light Green | `#2b5148`, `#d4e9e2` | colorGreenUplift, colorGreenLight [Measured] | | Gold | `#cba258`, `#dfc49d`, `#faf6ee` | colorGold, GoldLight, GoldLightest: Rewards [Measured] | | Coffee leaf | `#2c3d28`, `#253322` | colorCoffeeLeaf600, 700: Rewards headings [Measured] | | Kraft | `#7a5231` | colorKraft700: Rewards eyebrow [Measured] | | Text | black at 87 percent, soft at 58 percent | colorTextBlack, colorTextBlackSoft [Measured] | | Text on dark | white, soft at 70 percent | colorTextWhite, colorTextWhiteSoft [Measured] | | Neutrals | `#f9f9f9` cool, `#f2f0eb` warm, `#edebe9` ceramic | colorNeutralCool, Warm, Ceramic [Measured] | | Warm neutrals | `#fffcf7`, `#f7f0e4`, `#f3e9d9`, `#f1ece4` | colorWarmNeutral5, 25, 50, colorNeutral50 [Measured] | | Red and yellow | `#c82014`, `#fbbc05` | colorRed, colorYellow: alerts [Measured] | ### Typography SoDo Sans at 400, 600 and 700. [Measured] | Role | Desktop | Mobile | Weight and tracking | |------|---------|--------|---------------------| | Rewards display | 50 on 60 | 28 on 33.6 | 700 [Measured] | | Page headline | 28 on 38.78 | 24 on 33.24 | 700, -0.16px [Measured] | | Hero title | 24 on 33.6 | 22 on 30.8 | 600, -0.24px [Measured] | | Lead | 19 on 28.5 | 16 on 24 | 400 to 600, -0.16px [Measured] | | Body | 16 on 24 | 14 on 21 | 400, -0.16px [Measured] | | Button | 16 on 19.2 (14 in the header) | 14 on 16.8 | 600 [Measured] | | Uppercase label | 14 on 21, 1.4px | same | 700 [Measured] | | Legal | 14 on 21 | 13 on 19.5 | 400, 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.