---
title: "BRAND Starbucks 2026 · Overview"
url: https://memocore.ai/memos/6ab9ef63af51aac421da8b0c
project: "Brand Styles"
tags: "brand-starbucks"
updated_at: "2026-09-28T04:45:22.710Z"
---

# BRAND Starbucks 2026 · Overview

HEADER
brand: Starbucks; domain: starbucks.com; industry: coffeehouse chain (menu, mobile ordering, loyalty, gift cards); design_date: 2026-09
captured: https://www.starbucks.com (US, English, lang en-US; the root domain serves the US site, no region cookie needed), /menu, /menu/coffee-espresso/hot-coffee-espresso, /menu/product/873068625/hot, /rewards, 2026-09-28
evidence: measured from the pattern library stylesheets (www.starbucks.com/app-assets/patternLibStyles.b9fc59b961422a074705.css, sharedStyles, coreApp, ordering-menu, ordering-pdp, ordering-crust; Next.js home /_next/static/css/9005c839d7a61f5d.css and ee527ecf1201ebec.css), the patternLib and coreApp scripts, and computed styles in the live pages unless marked
note: two front ends share one pattern library: the home page is a Next.js CMS page (content blocks with inline CMS colors); menu, product, rewards, gift and account pages are a React app ("coreApp"). The Rewards page uses a newer warm-cream token set (NGL, see TOKENS)
style_tags: flat, card-ui, material-1 (floating action pill)
viewports: desktop 1440, mobile 390; breakpoints: 375 (xs+), 480 (sm), 768 (md, desktop nav appears), 1024 (lg), 1280 (xl), 1520 (layout max width kicks in), 1600, 1702 (logo moves outside the max width)
pages: BRAND Starbucks 2026 · Page: home; BRAND Starbucks 2026 · Page: category-listing; BRAND Starbucks 2026 · Page: product-detail; BRAND Starbucks 2026 · Page: landing-campaign
recipes: BRAND Starbucks 2026 · Recipe: frap-button; BRAND Starbucks 2026 · Recipe: nav-drawer; BRAND Starbucks 2026 · Recipe: reward-tabs
rebuild check: not done

RECOGNITION KEYS
1 Greens carry the brand: Green Accent #00754a for filled actions and focus rings, Starbucks Green #006241/#006242 for big promo panels, House Green #1e3932 for dark bands (product header, order bar, subnav dark), Light Green #d4e9e2 for soft highlights; everything else is white, near-black text rgba(0,0,0,0.87) and warm neutrals.
2 SoDo Sans everywhere, in 400 / 600 / 700; headings semibold or bold in sentence case, tight tracking -0.01em; the desktop nav alone is 14px bold caps with 0.1em tracking.
3 Buttons are small pills (radius 50px, padding 7px 16px, 1px border, 14-16px 600): outline (transparent with a colored border and text) or filled; hover adds a 10% tint, press shrinks to scale(0.95).
4 The frap: a large floating pill (60px, 19px 600, two-layer drop shadow) for the main order action, fixed bottom right above a House Green order bar (Recipe frap-button).
5 Product and category images are circles: cut-out drinks in round frames (112px category thumbs, 148px product tiles, 300px on the product page).
6 Home promos are 50/50 split blocks: full-bleed photo on one side, solid green panel with centered white semibold headline, body and an outline-white pill on the other, alternating sides.
7 White header 99px tall with the round green siren logo, bold caps nav, and a soft three-layer shadow; the active nav item has a 6px Green Accent bar at the bottom.
8 Rewards pages switch to warm cream surfaces (#fffcf7, #f3e9d9, #f1ece4) with deep green-black text #2c3d28 and big 24-32px rounded cards.

GUARDRAILS
no square or 4px buttons (all 50px pills; frap 500px); no gradients in UI (single exception: a light-to-Starbucks-Green gradient behind some product images, linear-gradient(#79bb6a, #006241)); no pure black body text (rgba(0,0,0,0.87)); no grey or blue focus rings (always #00754a, with a white 5px gap on buttons); no hover lift or zoom on cards; no uppercase headings (caps only in the desktop nav and eyebrows with 0.1em tracking); no serif headlines on the main site (Starbucks Serif and Lander Tall are declared but not used on the described pages); no square product photos on menu pages (circles); no dark mode; no cool greys for Rewards surfaces (warm creams only); older starbucks.com elements not in this design: the 2017-2020 full-width hero carousel, gold "Starbucks Rewards" top bar, black footer

TOKENS
/* rem base: html font-size 62.5% -> 1rem = 10px */
/* color: pattern library */
--color-white: #ffffff; --color-neutral-cool: #f9f9f9; --color-neutral-warm: #f2f0eb; --color-ceramic: #edebe9; --color-black: #000000;
--color-green-starbucks: #006241; --color-green-accent: #00754a; --color-green-light: #d4e9e2; --color-green-uplift: #2b5148; --color-house-green: #1e3932;
--color-gold: #cba258; --color-gold-light: #dfc49d; --color-gold-lightest: #faf6ee; --color-red: #c82014; --color-yellow: #fbbc05;
--color-black-6: rgba(0,0,0,0.06); --color-black-10: rgba(0,0,0,0.1); --color-black-20: rgba(0,0,0,0.2); --color-black-40: rgba(0,0,0,0.4); --color-black-70: rgba(0,0,0,0.7); --color-white-10: rgba(255,255,255,0.1); --color-white-30: rgba(255,255,255,0.3); --color-white-80: rgba(255,255,255,0.8);
/* color roles */
--color-primary: #00754a; --color-primary-hover: rgba(0,117,74,0.9); --color-on-primary: #ffffff;
--color-ink: rgba(0,0,0,0.87); --color-text: rgba(0,0,0,0.87); --color-text-muted: rgba(0,0,0,0.58); --color-text-on-dark: #ffffff; --color-text-on-dark-soft: rgba(255,255,255,0.7);
--color-surface: #ffffff; --color-surface-alt: #f9f9f9; --color-surface-warm: #f2f0eb; --color-surface-dark: #1e3932; --color-promo-panel: #006242; /* CMS inline value on home */ --color-announcement: #32462f; /* CMS inline value, changes per campaign */
--color-border: rgba(0,0,0,0.1); /* 2px rules */ --color-subnav-border: #dbd9d7; --color-link: currentColor (underlined); --color-link-green: #00754a;
--color-focus: #00754a; --color-success: #006241; --color-error: #c82014; --color-image-placeholder: #d9d9d9;
/* color: NGL warm set (Rewards and newer modules) */
--color-surface-primary1: #fffcf7; --color-surface-primary2: #f1ece4; --color-surface-primary3: #f3e9d9; --color-surface-primary4: #f2f2e6; --color-surface-primary5: #e8e8d5;
--color-surface-accent1: #dbdbba; --color-surface-accent2: #2c3d28; --color-loyalty-green: #006242; --color-loyalty-gold: #cba258; --color-loyalty-reserve: #171717;
--color-text-header-on-primary: #2c3d28; --color-text-body-on-primary: #474542; --color-text-on-accent2: #f7f0e4; --color-eyebrow: #7a5231; --color-outline1: #dbd6ce; --color-outline2: #b0aca5; --color-notice: #fbe6a1;
/* font */
--font-text: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-loading: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-serif: StarbucksSerifCA, Georgia, serif; /* declared, not used on described pages */
--font-rewards: "Lander Tall", "Iowan Old Style", Georgia, serif; /* declared on home CSS, not used on described pages */
/* type scale steps (--textSize1..10): 13 14 16 19 20 22 24 28 36 50 px */
/* size / line-height / weight / tracking; values: <375 | 375-767 | >=768 | >=1024 */
--type-body: 14px/1.5/400/-0.01em; /* 16px at >=768 */
--type-xxs: 13px -> 14px (>=768); --type-xs: 14px -> 16px; --type-sm: 16px -> 19px; --type-md: 19px -> 24px;
--type-lg: 20px | 24px | 28px /1.385/700 in use; /* page H1 "Menu" 28px 700 */
--type-xl: 22px | 28px | 36px /1.29; /* product name 22 | 28 | 36px 700, line-height 1.29 */
--type-xxl: 24px | 28px | 36px | 50px /1.2/700, tracking 2px at >=1024; /* Rewards hero */
--type-cms-heading-md: 19px | 22px | 24px /1.5/600; --type-cms-heading-sm: 16px -> 19px; --type-cms-body-sm: 16px -> 19px /1.75/400;
--type-nav: 14px/700/0.1em caps; --type-subnav: 13px/400; --type-button: 14px (header) or 16px (content) /1.2/600; --type-frap: 19px/1.2/600;
--type-footer-heading: 16px -> 19px /400; --type-footer-link: 16px/1.5/400; --type-legal: 13px -> 14px;
/* space */
--space: 4 8 16 24 32 40 48 56 64; /* --space-1..9 */
--gutter-outer: 16px; /* 24px >=768, 40px >=1024, 0 with max width 1440px centered at >=1520 */
--logo-offset: 99px (>=768), 131px (>=1024); /* content and footer align after the logo */
--column-small: 343px; --column-medium: 500px; --column-large: 720px; --column-xlarge: 1440px; --column-ngl: 1264px;
--header-height: 64px (<375), 72px (375-767), 83px (768-1023), 99px (>=1024); --subnav-height: 53px; --crust-height: 74px, 94px (>=1024);
--section-gap-home: 32px (my5) between promo blocks;
/* shape */
--radius-button: 50px; --radius-frap: 500px; --radius-card: 12px; --radius-dialog: 8px; --radius-input: 8px; --radius-image-product: 50%; --radius-rewards-sm: 16px; --radius-rewards-md: 24px; --radius-rewards-lg: 32px; --radius-rewards-xl: 40px; --radius-star-cost: 6px;
--border-button: 1px solid currentColor-based; --rule: 2px solid rgba(0,0,0,0.1); --rule-thin: 1px; --rule-thick: 4px radius 12px;
/* depth */
--shadow-header: 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);
--shadow-footer: 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);
--shadow-card: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);
--shadow-panel: 0 2px 4px rgba(0,0,0,0.07), 0 4px 5px rgba(0,0,0,0.06), 0 1px 10px rgba(0,0,0,0.1); /* desktop form columns */
--shadow-frap: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14);
--shadow-inset-top: inset 0 4px 5px -3px rgba(0,0,0,0.2);
--mask: rgba(0,0,0,0.38);
--blur-glass: none;
/* motion */
--ease-standard: cubic-bezier(0.25,0.1,0.25,1); --ease-expander: cubic-bezier(0.25,0.46,0.45,0.94); --ease-drawer: cubic-bezier(0.75,0,0.5,1); --ease-check-pop: cubic-bezier(0.32,2.32,0.61,0.27);
--dur-button: 200ms (all 0.2s ease); --dur-enter: 300ms; --dur-exit: 200ms; --dur-expander: 300ms; --dur-drawer: 400ms; --dur-image-fade: 300ms ease-in; --dur-toggle: 400ms ease-out;
/* focus */
--focus-ring: outline 2px solid #00754a, offset 2px; buttons and icon buttons add box-shadow 0 0 0 5px #ffffff (a white gap); dark theme: 5px #1e3932 gap and 2px white outline
dark_mode: none

FONTS
text and headings: SoDo Sans (custom Starbucks typeface by House Industries, proprietary (ext)); self-hosted woff, weights 400, 600, 700; font-feature-settings "calt"; antialiased; tracking -0.01em by default. Alternative: Figtree (OFL) 400/600/700, tracking -0.01em (est match of the round geometric-humanist shapes); second choice Nunito Sans. html class fonts-loading uses Helvetica Neue until the font loads.
serif (declared): Starbucks Serif CA (proprietary) -> Lora or Source Serif 4; Lander Tall (Starbucks Lander, proprietary (ext)) -> Crimson Pro; neither appears on the described pages.
figures: default; prices and calories in 600-700.

TYPOGRAPHY RULES
Page H1: 28px 700 (24px mobile), line-height 1.385, sentence case, left aligned on app pages; centered in Rewards and CMS blocks.
Section H2 on app pages: 24px 700 (19px mobile) followed by a 1px rule rgba(0,0,0,0.1) 16px below.
CMS promo headlines: 24px 600 white (22px at 375-767, 19px <375), line-height 1.5; body 19px/1.75 (16px/1.75 mobile), max width 46em (600/13 em).
Desktop nav: 14px 700 caps, letter-spacing 1.4px (0.1em); subnav 13px 400.
Muted text rgba(0,0,0,0.58); links in text underlined (sb-textLink), underline removed on hover.
Eyebrows (Rewards): 16-19px 700 caps, 0.1em tracking, #7a5231.
No text-wrap balance.

COLOR RULES
Page backgrounds are white (#ffffff) on the main site and #fffcf7 on Rewards. Light greys #f9f9f9 for subnav, breadcrumb bar and terms sections.
Filled primary buttons: Green Accent #00754a (content) or black #000000 (header "Join now"). Outline buttons: black text and border in the header, white on green panels.
Dark green bands: House Green #1e3932 for the product page header (#1f3933 in code), product summary band, order crust; Starbucks Green #006242 for CMS promo panels; #32462f (CMS) for the home announcement strip.
Gold #cba258 only for Rewards (Gold tier card, star cost badge border and text, wand icon).
Red #c82014 only for errors. Yellow #fbbc05 only for highlight flashes.
Share on app pages: ~85% white, ~10% green bands, accent under 3%.

LAYOUT
container: full width with outer gutters 16px / 24px (>=768) / 40px (>=1024); at >=1520 max width 1440px centered and gutters 0
logo offset: at >=768 content, subnav, breadcrumb and footer start after the logo column (99px / 131px); at 1440 the nav, subnav and footer text start at x 131
grid: no fixed 12-col grid; flex utilities and size-of-12 fractions (md-size6of12 for 50/50); app content columns 343 / 500 / 720 / 1440; Rewards column 1264
section rhythm: home blocks separated by 32px white gaps; app sections 24-48px apart (pb4 lg-pb6); Rewards sections 64px vertical padding
density: comfortable; alignment: left on app pages, centered in CMS blocks and Rewards
typical composition: 50/50 photo + solid color panel (home); side nav 150px + content (menu); two 420px columns (product page); centered stacks and 3-card rows (Rewards)

SHAPE AND DEPTH
radius: pills 50px (buttons), 500px (frap), 12px cards (sb-card), 8px dialogs and inputs, 50% all product and category images, 24-40px Rewards containers, 6px star cost badge; everything else 0 (home promo blocks and photos are square-edged)
borders: 1px button borders; 2px rules rgba(0,0,0,0.1); 1px subnav border #dbd9d7; size selector active ring 2px #006241
shadows: header and footer soft three-layer shadows (see TOKENS); cards very subtle 0 1px 1px; frap strong two-layer; no shadows on home blocks
materials and textures: none

COMPONENTS
button (base, sb-button): inline-block, border 1px solid, radius 50px, padding 7px 16px, font 600 line-height 1.2, text inherits 14px (header) / 16px (content); height ~32px / 35px; transition all 0.2s ease
  outline ("default") black: text rgba(0,0,0,0.87), border same; hover bg rgba(0,0,0,0.1)
  outline green: text and border #00754a; hover bg rgba(0,117,74,0.1)
  outline white (on green): text and border #ffffff; hover bg rgba(0,0,0,0.2)
  filled ("positive") green: bg and border #00754a, text white; hover bg and border rgba(0,117,74,0.9)
  filled black: bg #000000; hover rgba(0,0,0,0.7)
  filled white (on dark): bg #ffffff, text rgba(0,0,0,0.87); hover rgba(255,255,255,0.8)
  filled gold: bg #cba258, text rgba(0,0,0,0.87); hover #dfc49d; filled House Green #1e3932 hover 90%; red variants for destructive
  text button: no border, green text; hover bg rgba(0,117,74,0.08)
  all: active transform scale(0.95); focus-visible outline 2px #00754a offset 2px plus box-shadow 0 0 0 5px #ffffff; disabled opacity 0.5 cursor not-allowed; loading: collapses to a 32px circle with a spinning ring (0.75s linear)
frap (floating action pill): Recipe frap-button
icon button: 44px min touch box, 24-32px icon; hover (pointer devices) a circle behind the icon scales 0.4 -> 1 and fills currentColor at 10%; 200ms ease-out; active scale(0.95)
text link (sb-textLink): underline, removed on hover; focus-visible radius 2px
nav link: 14px 700 caps rgba(0,0,0,0.87); hover color #00754a instant; active page: inset 6px #00754a bar at the bottom of the 99px header
card (sb-card): bg #ffffff, radius 12px, overflow hidden, optional shadow 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24); no hover effect
category tile: 112px (72px mobile) circle image + 19px 400 label to the right, whole tile is a link (overlay)
product tile: 148px circle image centered, name 19px 400 below, padding 16px, text centered, whole tile clickable
input (sb-fieldBase): white box, radius 8px, 1px ring box-shadow 0 0 0 1px rgba(0,0,0,0.4), padding 12px 16px; floating label 16px (19px desktop) that shrinks to 13px (14px) and moves to -12px on the border (0.25s ease-in-out keyframes); focus: 2px #00754a ring and a light green tint; invalid: #c82014 ring; hint and error text with a fade-in icon
checkbox and radio: 24px, 1.5px #00754a border; checked fill #00754a with a pop-in marker (0.3s cubic-bezier(0.32,2.32,0.61,0.27))
toggle: 52x32 track radius 50px, off rgba(0,0,0,0.58), on #00754a; 30px white knob moves 20px; 0.4s ease-out
select: floating label pattern, 24px chevron, native select overlay
tabs: Recipe reward-tabs (4px #00754a indicator)
expander (accordion, footer on mobile): height transition 300ms cubic-bezier(0.25,0.46,0.45,0.94); caret 32px rotates 180deg (0.2s ease-out)
dialog: white, radius 8px, max width 420px, padding 32px, shadow-card; opens from scale(1.2) opacity 0 in 300ms, closes in 200ms; mask rgba(0,0,0,0.38)
bottom sheet (mobile): slides up translateY(100%) -> 0, 300ms standard easing
overlay crate (desktop): full-height panel from the right at 40vw (sb-overlay--rightCrate) with inset left shadow
alert: bg rgba(200,32,20,0.04), 1px #c82014 border, red icon
skeleton and images: gray #d9d9d9 fallback at 0.5 opacity, images fade in (opacity 0.3s ease-in)
star cost badge: 14px gold text in a 1px #cba258 box, radius 6px, padding 0 8px
toast: not seen

GLOBAL CHROME
header (desktop >=768): white, height 99px (83px 768-1023), shadow-header; round siren logo 51px (40px mobile, 32px <375) at the left gutter, margin-right 40px (24px md); nav Menu / Rewards / Gift Cards 14px 700 caps, 24px apart; right: Find a café (14px 600, 32px pin icon, 40px before the buttons), Sign in (outline black pill) 16px gap Join now (filled black pill); active page gets the 6px green bar; the desktop nav is switched on at >=768 by script; not sticky on home (relative), fixed on app pages below 1520 (sb-globalNav--fixed) (inf)
subnav (menu pages): 53px, bg #f9f9f9, 1px #dbd9d7 border, sticky at top 0 on >=1024; items 13px, 32px apart, active item underlined by a 1px line 12px above the bottom
mobile header and menu: below 768: 72px (64px <375) bar, logo left, 44px hamburger right; drawer from the right: Recipe nav-drawer
footer: white with shadow-footer on top; padding 24px top (lg 48px on app pages); gutters and logo offset as the header
  desktop (>=1024): five 190px columns About Us, Careers, Social Impact, For Business Partners, Ways to Shop; headings 19px 400 rgba(0,0,0,0.87) 24px above the links; links 16px rgba(0,0,0,0.58), 8px padding + 8px margin each (~40px pitch), hover rgba(0,0,0,0.87)
  then a 2px rule (40px vertical space), a row of 6 social icon buttons (32px icons in 44px boxes: Spotify, Facebook, Pinterest, Instagram, YouTube, X), legal links stacked 16px rgba(0,0,0,0.87) no underline (underline on hover), "Cookie Preferences" button, copyright "© 2026 Starbucks Coffee Company. All rights reserved." 14px rgba(0,0,0,0.58)
  mobile (<1024): each column becomes an expander row (heading 16px with a 32px caret), then the same social row and legal list
other: TrustArc cookie banner at the bottom (third party, "This site uses cookies, but not the kind you eat"); skip link pill (50px radius, Green Accent bg, white bold) slides in from the top on focus (200ms ease-out)

IMAGERY AND ICONS
hero media: no classic hero; home promos are 50/50 split blocks with lifestyle photos (warm natural light, drinks on tables, hands, seasonal props) at 12:7 (1440x840 source, 720x420 shown)
product imagery: cut-out drinks and food on transparent backgrounds inside circles; category thumbs have a dark green circular backdrop baked into the image; product page shows the cup large (300px) on the House Green header with a faint circular glow
illustration: seasonal illustrated gift cards (partner characters); Rewards uses small line-illustration icons for "How it works" and textured leaf imagery at the bottom of tier cards
icons: Starbucks custom SVG set, 24px (UI) and 32px (pin, bag, social), filled glyphs in currentColor; size icons are cup outlines (short/tall/grande/venti) that switch to a green-filled version when selected
image radius: 50% for products; 0 for promo photos; Rewards hero photo in a large rounded arch (est)
density: balanced; one image per block

MOTION
intensity: functional
hover policy: buttons tint in 200ms ease (all properties); nav links change color instantly; icon buttons grow a tinted circle 200ms; cards and tiles have no hover effect
press policy: buttons and icon buttons scale(0.95); frap moves down 4px
scroll reveal: none
signature motion: frap press and appear (Recipe frap-button); hamburger drawer slide 400ms with icon morph (Recipe nav-drawer); Rewards star tabs crossfade (Recipe reward-tabs)
component motion: enter 300ms / exit 200ms cubic-bezier(0.25,0.1,0.25,1) with fade, fadeGrow (scale 0.75) and grow (scale 0.3) variants; expanders 300ms; image fade-in 300ms ease-in; checked markers pop with an overshoot curve
page transitions: client-side route changes in the app with a hidden "Loading successful" status; no visual transition; top loading indicator bar in Green Accent (sb-loadingIndicator keyframes)
reduced motion: some modules disable animations under prefers-reduced-motion (quick-mod border flash, reset fade); others unchanged (inf)

RESPONSIVE
>=1520: content max width 1440 centered, gutters 0; >=1702 the logo sits outside the max width to the left
1024-1519: gutters 40px, header 99px, logo 51px with 24px vertical margins, footer 5 columns inline
768-1023: header 83px, desktop nav still shown, gutters 24px, footer columns become expanders, 50/50 blocks stay side by side
<768: header 72px with hamburger (Recipe nav-drawer), 50/50 blocks stack (image on top 228px high, text panel below), body text 16px -> 14px base, headings step down (see TOKENS), menu side nav hidden, crust 74px
<375: header 64px, logo 32px

CONTENT AND VOICE
headline style: short friendly sentences or puns, 3-6 words ("It's a great day for coffee", "Fall is here. Cue the hits.", "Nondairy. No extra.", "Free coffee is just the beginning")
body: one or two warm conversational sentences, 15-30 words
CTA labels: "Start an order", "Order now", "Send an eGift", "Join now", "Sign in", "Customize", "Add to Order", "Find a café"
case: sentence case; "café" with accent; ® and ™ marks kept

SUBSTITUTIONS
SoDo Sans -> Figtree 400/600/700 (or Nunito Sans); siren logo -> a round green placeholder mark; drink and food photos -> cut-out product placeholders in circles on #1e3932 or white; promo photos -> warm lifestyle placeholders 12:7; custom icons -> Material Symbols Rounded filled or Phosphor Fill at 24/32px; Starbucks Serif / Lander -> Lora / Crimson Pro if ever needed.

TECH
Home: Next.js (pages router, [[...page]] CMS route) with CSS modules; app pages: React 18 SPA (react-router, redux, react-intl) under /app-assets with webpack chunks per route (ordering-menu, ordering-pdp, ordering-crust ...); shared pattern library (sb-* classes, utility classes like mt3, md-flex, text-xs) delivered as patternLibStyles.css and patternLib.js; react-transition-group animators; TrustArc consent; Optimizely

SCREENSHOTS
- file: starbucks_2026_home_d1440_top.jpg
  shows: home first screen at 1440x900, scroll 0, live https://www.starbucks.com 2026-09-28 (cookie banner hidden by script)
  key values: header 99px white with shadow; logo 51px; nav 14px 700 caps; Sign in outline pill and Join now black pill 32px; announcement strip #32462f 110px with 19px 600 white text and an outline-white pill; promo block 420px: photo left, #006242 panel right, H2 24px 600 white, body 19px/33px, outline-white pill 35px
  do not copy: siren logo, photos; use placeholders
- file: starbucks_2026_home_m390_top.jpg
  shows: home first screen at 390x844 @2x (stored at 1x): 72px header with 40px logo and hamburger; announcement strip; first promo stacked (photo 228px above the green panel)
- file: starbucks_2026_overview_d1440_states.png
  shows: header buttons default; Sign in hover (rgba(0,0,0,0.1) fill); Join now hover (rgba(0,0,0,0.7)); Join now focus-visible (white 5px gap + 2px #00754a outline); Order now outline-white pill on #006242 default and hover (rgba(0,0,0,0.2) fill); crops scaled 2x
- file: starbucks_2026_overview_m390_menu-open.jpg
  shows: mobile drawer open (see Recipe nav-drawer)