registry://designs/voltagent-awesome-design-md-starbucks
### Starbucks - Coffee retail flagship. - Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography - Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canv
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 documentedStill exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
Share your design system with AI agents worldwide