packages/shared-skills/skills/frontend/references/design/starbucks.md
Starbucks' design system is a warm, confident retail flagship wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (#f2f0eb) and a ceramic off-white (#edebe9) — colors that reference actual store materials: the paper napkins, the café walls, the wood finishes — while the signature Starbucks Green (#006241) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (#cba258) appears only around Rewards-status ceremony — not as a general accent.
Typography carries most of the brand voice. The proprietary SoDoSans typeface (custom to Starbucks) sits across nearly every surface with a tight -0.16px letter-spacing — it reads confident and friendly rather than fashion-magazine severe. What's unusual: the Rewards page switches to a warm serif ("Lander Tall", "Iowan Old Style", Georgia) for specific headline moments, subtly echoing the nostalgic feel of a coffeehouse chalkboard. And the Careers pages use a handwritten script ("Kalam", "Comic Sans MS", cursive) for personal cup-name touches. Three typefaces, three contexts — the system is disciplined about when each appears.
The surfaces breathe through rounded geometry. Every button is a 50px full-pill. Cards take a 12px rounded-rectangle. The "Frap" floating CTA — a 56px circular order button in Green Accent (#00754A) — is the product's signature depth move: it floats bottom-right with a layered shadow stack (0 0 6px rgba(0,0,0,0.24) base + 0 8px 12px rgba(0,0,0,0.14) ambient) and compresses via scale(0.95) on press. Elevations are otherwise restrained — card shadows stay at a whispered 0.14/0.24 alpha, global nav gets a quiet three-layer shadow stack. The whole system feels like clean café signage: legible, warm, and never shouting.
Key Characteristics:
#f2f0eb / #edebe9) instead of cold white — references café materials-0.16px letter-spacing as the universal voice50px radius) universal, scale(0.95) active press the signature micro-interaction56px, Green Accent fill, layered shadow stack) — the product's signature elevation element--space-3, stepping to 6.4rem (~64px)Color-block page rhythm: Cream hero → White content sections → Dark-green (#1E3932) feature band with white text → Cream utility zone → Dark-green (#1E3932) footer with gold / white text — an espresso-dark bookend around the bright body.
Source pages analyzed: homepage, rewards, gift cards, product detail (Pink Energy Drink), product nutrition (Cold Brew).
#006241): The historic brand green. Used on h1 headings, primary section headers on the Rewards page, and as the main brand signal wherever a single dominant color is needed.#00754A): A slightly brighter, more luminous green. The primary filled-CTA color ("Explore our afternoon menu", "See the spring menu") and the fill of the floating Frap circular button.#1E3932): The deep near-black brand green. Footer surface, feature-band backgrounds, reward-status dark surfaces, and the headline "Free coffee is just the beginning" hero band on Rewards.#2b5148): A secondary mid-dark green used sparingly on decorative accents and dark-gradient moments.#d4e9e2): A pale mint wash used for form-valid-state tints and light green utility surfaces.#cba258): Reserved almost exclusively for Rewards-status ceremony — Gold-tier callouts, partnership badges (SkyMiles, Bonvoy), and premium-feeling accents. Never a general-purpose brand color.#dfc49d): Softer gold for background washes on gold-tier sections.#faf6ee): Cream-gold page-surface wash used under partnership sections on the Rewards page — ties the gold accent back into the warm neutral system.#ffffff): Primary card and modal surface. Also card fill on gift-card tiles.#f9f9f9): Subtle cool-gray surface used on dropdown menus ("Account" dropdown), form-card wraps, and quiet utility containers.#f2f0eb): The warm cream primary page canvas for Rewards utility zones and hero bands.#edebe9): A slightly warmer/darker cream for zone separators, soft page-section washes, and Rewards partnership band.#000000): Deep ink reserved for the dark top-of-page CTA strip ("Join now") and high-contrast top-nav sign-in buttons.rgba(0, 0, 0, 0.87)): Primary heading and body text color on light surfaces. Not pure black — an 87%-opacity black that reads warmer.rgba(0, 0, 0, 0.58)): Secondary/metadata text on light surfaces.rgba(255, 255, 255, 1)): Primary heading/body text on dark green surfaces.rgba(255, 255, 255, 0.70)): Secondary text on dark-green surfaces — footer link descriptions, caption text.#33433d): A dedicated muted slate-green used only on Rewards-page text blocks — a slightly "dustier" reading color than Text Black that signals "reward surface" without using full Starbucks Green.#c82014): Error and destructive state (form invalid, destructive actions).#fbbc05): Warning state, legacy brand touch.#d4e9e2 at 33% opacity = hsl(160 32% 87% / 33%)): Form valid-field tint background.hsl(4 82% 43% / 5%)): Invalid-field tint on forms.Two parallel translucent scales for overlay and secondary-text use:
rgba(0,0,0,0.06) through rgba(0,0,0,0.90) in 10% steps — for dark overlays on light surfacesrgba(255,255,255,0.10) through rgba(255,255,255,0.90) in 10% steps — for light overlays on dark surfacesNo structural gradient tokens observed. Surface hierarchy is solid-color-block throughout — the system relies on its five-tier cream/green surface palette rather than gradients.
SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif — Starbucks' proprietary corporate typeface, used across nearly every surface"Helvetica Neue", Helvetica, Arial, sans-serif — what users see before SoDoSans loads"Lander Tall", "Iowan Old Style", Georgia, serif — used on specific Rewards-page headline moments for a warm editorial feel"Kalam", "Comic Sans MS", cursive — used exclusively for Careers-page "cup name" decorative touches, referencing the hand-written names on Starbucks cupsNo OpenType stylistic sets explicitly activated at :root.
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | Largest Rewards/hero display |
| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | Secondary hero headings |
| Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | Landing section headlines |
| H1 | 24px | 600 | 36px | -0.16px | Starbucks-Green primary heading |
| H2 | 24px | 400 | 36px | -0.16px | Regular-weight section title in Text Black |
| Body Large | 19px | 400–600 | 33.25px (~1.75) | -0.16px | Hero intro copy, feature-band body |
| Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | Default body copy |
| Small (text-2) | 1.4rem / ~14px | 400–600 | 1.5 | -0.01em | Button label, metadata, form labels |
| Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | Active float-label state, caption micro-copy |
| Button Label | 14–16px | 400–600 | 1.2 | -0.01em | All pill-button labels |
Letter-spacing tokens:
letterSpacingNormal: -0.01em (default — tight, characteristic)letterSpacingLoose: 0.1em (emphasized caps)letterSpacingLooser: 0.15em (uppercase-style labels, extreme emphasis)Line-height tokens:
lineHeightNormal: 1.5 (body)lineHeightCompact: 1.2 (display/buttons)-0.01em) is applied almost universally — the entire product reads slightly compressed, which gives SoDoSans its confident presence without feeling squeezed.1rem = 10px on this site (via a font-size: 62.5% root trick). So 1.6rem = 16px, 2.4rem = 24px, etc. The scale is semantic (textSize-1 through textSize-10), not arbitrary pixel values.rgba(0,0,0,0.87) to match the warm-neutral canvas temperature.SoDoSans is proprietary to Starbucks (licensed from House Industries, not publicly available). Reasonable open-source substitutes:
If substituting, verify the tight -0.01em / -0.16px tracking still reads well; some open-source fonts need -0.005em instead.
Lander Tall (the Rewards serif) is custom — open-source substitutes: Iowan Old Style (already in fallback), Lora, or Source Serif Pro. Kalam (Careers script) is available on Google Fonts directly.
1. Primary Filled — "Explore our afternoon menu / Sign up for free"
#00754A (Green Accent)#ffffff1px solid #00754A50px (full pill)7px 16px-0.01emtransform: scale(0.95) via --buttonActiveScaleall 0.2s ease2. Primary Outlined — "Give them a try / Start an order"
#00754A (Green Accent)1px solid #00754A3. Black Filled — "Join now"
#000000#ffffff1px solid #00000050px, Padding: 7px 16px4. Dark Outlined — "Sign in"
rgba(0, 0, 0, 0.87) (Text Black)1px solid rgba(0, 0, 0, 0.87)50px, Padding: 7px 16px5. Green-on-Green Inverted — "See the spring menu"
#ffffff#00754A1px solid #ffffff6. Outlined on Dark — "Learn more / Order now"
#ffffff1px solid #ffffff7. Consent Agree (dark-green variant)
rgb(0, 130, 72) (a specific variant green used in the cookie-consent module)#ffffff50px radius, 7px 16px padding, 14px / weight 4008. Frap — Floating Circular Order Button
#00754A (Green Accent)#ffffff5.6rem / 56px (standard), 4rem / 40px (mini variant)50% (full circle)-0.8rem touch offset for extra tap comfort0 0 6px rgba(0,0,0,0.24) + ambient 0 8px 12px rgba(0,0,0,0.14)0 8px 12px rgba(0,0,0,0)9. Full-width Feedback Tab — "Provide feedback"
#00754A#ffffff12px 12px 0px 0px (top-rounded only)8px 16pxContent Card (default)
#ffffff (--cardBackgroundColor)12px (--cardBorderRadius)0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24) (--cardBoxShadow)Gift Card Tile
~12px, slightly tighter on corners)Rewards Status Cards (Rewards page signature)
#1E3932) panel with:
Partnership Card (Rewards)
#faf6ee (Gold Lightest) warm-cream surfaceDropdown Menu (Account dropdown, top-nav)
#f9f9f9 (Neutral Cool)24px / weight 400 in Text BlackModal
2.4rem (--modalPadding)8.8rem (--modalTopPadding) — leaves room for close button / header11.2rem12px)Floating Label Input
1.9rem default, animates to 1.4rem when active1.6rem default, animates to 1.3rem active12px from left-12px with -50% Y translation12px1.6remrgba(green-light, 0.33) tint; invalid-field gets rgba(red, 0.05) tint0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27) on checked-inputOption Icon (checkbox/radio)
3px innerGlobal Nav (top bar)
64px xs → 72px mobile → 83px tablet → 99px desktop0 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) — three-layer soft lift99px (md) / 131px (lg) from left edgeSub-nav (second bar, e.g., Rewards internal)
53px (global subnav) / 48px (internal subnav)Mobile Nav
--headerCrateProportion: 40vw / --contentCrateProportion: 60vw)opacity 0.3s ease-in transition on image load (--imageFadeTransition).Full-width #1E3932 (House Green) band with:
rgba(255,255,255,0.70) for secondary copy300ms (--expanderDuration)cubic-bezier(0.25, 0.46, 0.45, 0.94) — a measured ease-outDark-green modal card at top of page with "Agree" (green-filled) and "Manage preferences" (outlined) buttons. Appears on first visit; dismissible.
A repeating component cluster used on menu product pages (e.g., /menu/product/40498/iced for a drink detail, /menu/product/.../nutrition for nutrition facts). These extend the component inventory without changing tokens.
Size Options Selector
2px solid #00754A) around the selected cup icon12px or flat; individual icons are 50% circular16px 24px internalAdd-in / Milk Select (outlined rectangle)
#ffffff1px solid #d6dbde (Input Border)4px0.325px letter-spacing#00754A)Numeric Stepper
− minus button + count number + + plus button, all inline right of the label32×32px with 1px solid #d6dbde border, neutral gray iconCustomize Button
#ffffff#00754A (Green Accent)1.5px solid #00754A50px (full pill)14px 40px (generously larger than default pills — this is a secondary primary action)Add to Order Button (PDP)
#00754A (Green Accent)#ffffff50px14px 32pxRewards Cost Pill — "200★ item"
1px solid #cba258 (Gold)#cba258 (Gold)50px (full pill)4px 12px★ is a small filled star glyph — indicates the Rewards Stars required to redeem this item0.5px letter-spacingProduct Description Band
#1E3932 House Green)32px verticalIngredients / Nutrition Table
1px solid #e7e7e7 hairline belowStore Availability Selector
4pxPDP Breadcrumb
/ slash character in Text Black SoftBack Chevron Link (PDP nutrition / detail sub-pages)
#00754A) 14/700 Proxima Nova< in the same greenRem-based semantic scale (anchored 1rem = 10px):
| Token | Rem | Pixels | Typical Use |
|---|---|---|---|
--space-1 | 0.4rem | 4px | Tightest inline padding |
--space-2 | 0.8rem | 8px | Small gap, button vertical padding |
--space-3 | 1.6rem | 16px | Default — card padding, outer gutter xs |
--space-4 | 2.4rem | 24px | Section inner spacing, outer gutter md |
--space-5 | 3.2rem | 32px | Major between-section spacing |
--space-6 | 4rem | 40px | Large gaps, outer gutter lg, header crate |
--space-7 | 4.8rem | 48px | Section-to-section spacing |
--space-8 | 5.6rem | 56px | Very large breathing — Frap height |
--space-9 | 6.4rem | 64px | Widest section padding |
Gutter tokens:
--outerGutter: 1.6rem (16px, default / mobile)--outerGutterMedium: 2.4rem (24px, tablet)--outerGutterLarge: 4.0rem (40px, desktop)Universal rhythm constant: 1.6rem (16px) appears across every page as the default outer gutter, card padding baseline, and text size 3 body — the system's most frequent spacing unit.
--columnWidthSmall: 343px / Medium: 500px / Large: 720px / XLarge: 1440px~343px tileslg+ breakpoints--headerCrateProportion / --contentCrateProportionWhitespace carries the feeling of "plenty of space in the café." Section padding leans generous (40–64px). Content blocks are separated by whitespace rather than dividers. The cream canvas (#f2f0eb) is itself a visual breath between white cards and green feature bands.
| Value | Use |
|---|---|
12px | Cards, modals, menu-item tiles (--cardBorderRadius) |
12px 12px 0 0 | Full-width feedback tab (top-rounded only) |
50px | All buttons — full-pill radius (--buttonBorderRadius) |
50% | Circular icons, Frap floating button, avatar thumbnails |
| Specialty | 3.3333%/5.298% elliptical for Starbucks-Visa-Card mockups (--svcRoundedCorners) |
| Level | Treatment | Use |
|---|---|---|
| Card | 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24) | Default content cards — a whisper-soft dual-shadow |
| Global Nav | 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) | Triple-layer soft lift on the fixed top bar |
| Frap Base | 0 0 6px rgba(0,0,0,0.24) | Base halo around the floating circular CTA |
| Frap Ambient | 0 8px 12px rgba(0,0,0,0.14) | Stacked directional ambient — floats the Frap forward |
| Gift Card | Light drop shadow around illustrated photograph | Physical-card feel for gift tiles |
| Starbucks Card (SVC) | drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24)) | Stacked SVG drop shadows for Starbucks Card visuals |
Shadow philosophy: Whisper-soft, layered over solid — the system never reaches for a single heavy drop shadow. Instead, it stacks 2–3 low-alpha shadows with different offsets to simulate real-world ambient + direct lighting. The Frap button is the most elevated element on any page.
#f2f0eb) or Ceramic (#edebe9) as page canvas instead of pure white — the warm cream is the signature-0.01em / -0.16px on SoDoSans across the whole systemtransform: scale(0.95) as the universal button active state#006241 everywhere flattens the brandrgba(0,0,0,0.87) matches the warm canvasscale(0.95) active feedback on buttons — it's a signature micro-interactionInferred from component width tokens and progressive nav heights:
| Name | Width | Key Changes |
|---|---|---|
| xs | < 480px | Global nav 64px; hamburger menu; single-column layouts; pill buttons full-width |
| Mobile | 480–767px | Global nav 72px; gift-card grid 2-up; card padding tightens |
| Tablet | 768–1023px | Global nav 83px; gift-card grid 3-up; hero split begins to appear |
| Desktop | 1024–1439px | Global nav 99px; gift-card grid 4-up; full asymmetric hero 40/60 |
| XLarge | 1440px+ | Content caps at --columnWidthXLarge; gift-card grid 5-up; extra cream margin |
7px 16px padding measure ~32px tall — below 44px WCAG AAA minimum for touch-only surfaces. On mobile, button padding may be visually expanded to meet the minimum.56px is well above minimum.--frapTouchOffset: calc(-1 * .8rem) to extend tap area 8px beyond visual edge.opacity 0.3s ease-in fade-in transition on image load (prevents jarring pop-in)#00754A)"#ffffff)"#006241)"#1E3932)"#f2f0eb)"#ffffff)"rgba(0,0,0,0.87))"rgba(0,0,0,0.58))"rgba(255,255,255,0.70))"#cba258)"#33433d)"#c82014)""Create a primary Starbucks CTA pill button with Green Accent (#00754A) background, white text 'Explore our afternoon menu', SoDoSans font at 16px weight 600 with -0.01em letter-spacing, 50px border-radius (full pill), 7px 16px padding. Apply transform: scale(0.95) as the active state with a 0.2s ease transition."
"Design a content card with White (#ffffff) background at 12px border-radius, layered shadow 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24). Pad contents 16–24px (--space-3 to --space-4). Place on a Neutral Warm (#f2f0eb) page canvas with 16px gap to siblings."
"Build the Frap floating circular order button — 56px diameter, Green Accent (#00754A) fill, white shopping-bag icon centered. Layered shadow: 0 0 6px rgba(0,0,0,0.24) + 0 8px 12px rgba(0,0,0,0.14). Fixed position bottom-right with -0.8rem touch offset. Active state collapses the ambient shadow to 0 8px 12px rgba(0,0,0,0) with scale(0.95)."
"Build a dark-green feature band — full-width section with House Green (#1E3932) background. Left column: white SoDoSans h2 at 24px weight 600, followed by a Text White Soft (rgba(255,255,255,0.70)) body paragraph and a CTA row with two buttons (White-filled with Green Accent text for primary, Outlined-on-Dark white border for secondary). Right column: product photography. Split ratio 40/60, stacked vertically below 768px."
"Create a Rewards status card — House Green (#1E3932) panel with 12px border-radius, colored gradient top stripe (Bronze/Silver/Gold tier). Title in SoDoSans 24px weight 600 in white. Benefits list as white bullets with rgba(255,255,255,0.70) secondary captions. Bottom progression text in Text White Soft. Stack 3 panels in a grid at lg+, single column on mobile."
"Design a gift-card tile — card radius matches 12px, fills with an illustrated photograph (hand-drawn watercolor-painted feel) as the entire surface. Subtle drop shadow makes it feel like a physical card on the cream canvas. Group under a category label ('Spring', 'Thank You', 'Birthday') in SoDoSans 24px weight 400 above the grid."
"Create a Starbucks product-detail header — House Green (#1E3932) band with breadcrumb 'Menu / Refreshers / Pink Energy Drink' in 14/400 white above the product title in SoDoSans 32/700 uppercase white. Product photograph centered below title. Below photo: a 4-up size selector row — each cup-icon button shows a vertical cup silhouette, size name ('Tall' / 'Grande' / 'Venti' / 'Trenta') in 16/700 white, and fluid-ounce in 13/400 Text White Soft. Selected size wraps the cup icon in a 2px solid #00754A circular ring."
"Build a Starbucks customize flow — under the size selector, 3 stacked outlined-rectangle input rows (white bg, 1px solid #d6dbde border, 4px radius). Each has a floating label ('Add-ins', 'Milk', 'Add-ins') above the top border in 13/700 Text Black uppercase. Value centered (e.g., 'Ice', 'Coconut'). Right side: chevron-down in Text Black Soft. For the scoop row, embed a numeric stepper (− 1 + with circular 32px outlined buttons). Below all three fields: outlined green 'Customize' pill with gold sparkle icon, 50px radius, 14px 40px padding. Pair with a Green Accent filled 'Add to Order' pill in the same row."
"Design a Starbucks product description band — full-width House Green (#1E3932) below product header. Top: a gold-outlined '200★ item' Rewards Cost Pill (50px radius, 4px 12px padding, gold #cba258 border and text). Below: product description in white 16/400/1.5. Nutritional inline summary in white 14/700 ('140 calories, 25g sugar, 2.5g fat') with info-icon tooltip. Outlined-white-on-green pill button 'Full nutrition & ingredients list'. 32px vertical padding."
"Create a Starbucks nutrition facts table — two-column layout inside a White card. Left column: 'Ingredients' header (24/400 Text Black), followed by ingredient list or 'Not available for this item' placeholder paragraph in 14/400 Text Black Soft. Right column: 'Nutrition' header, then label/value rows (nutrient name left, value right) separated by 1px solid #e7e7e7 hairlines. Typography: labels in 14/400 Text Black, values in 14/700 Text Black right-aligned. Footnote asterisk markers in 13/400 Text Black Soft at the bottom."
When refining existing screens generated with this design system:
scale(0.95) active state universally-0.01em / -0.16px across the board--duration: 0.4s, --iconTransition: all ease-out 0.2s, --expanderDuration: 300ms) are not captured for every interactive surface--svcRoundedCorners and --svcShadowFilter tokens but not fully documented