A visual catalog of the tokens, components, and layout principles extracted from Starbucks.com — generated from DESIGN.md.
Four-tier green brand system, warm-neutral cream canvas, gold reserved for Rewards ceremony only.
SoDoSans for everything with tight -0.01em tracking. Serif and script reserved for Rewards and Careers contexts.
Every button is a 50px full pill with scale(0.95) active press. Weight contrasts primary (green filled) vs signin (outlined dark) vs conversion (black filled).
Content cards, Rewards status panels, gift-card tiles, feature bands.
12px radius with whisper-soft dual-shadow stack. Default content surface.
Same baseline card, used for feature modules on the cream canvas.
Gold-tint variant inherits the same 12px radius but on #faf6ee background for Rewards partnership band.
As you earn more Stars, you unlock new benefits.
Reach Gold status by earning 450 Stars in 12 months.
Extra perks once you reach mission status.
Full-width dark-green zones for feature moments. White headline + translucent-white secondary + two-button CTA row.
Iced Lavender Cream Matcha and Iced Lavender Cream Oatmilk Matcha, now available.
Size selector, add-in rows, customize flow, Rewards Cost pill, description band, nutrition table — the menu-product-page component cluster.
Crafted with crisp strawberry and smooth coconutmilk, then hand-shaken with ice and real freeze-dried strawberries. Your ultimate energizing pick-me-up — boosted with 125mg of caffeine in a grande and an excellent source of B vitamins.
140 calories, 25g sugar, 2.5g fat ⓘ
Not available for this item
We cannot guarantee that any prepackaged products served in our stores are allergen-free because we use shared equipment to store, prepare, and serve them. Customers with allergies can find ingredient information for products on the labels of our packaged products or online at Starbucks.com/menu.
** Caffeine is an approximate value. 2,000 calories a day is used for general nutrition advice, but calorie needs vary.
Floating labels animate size + position on focus. Valid-field gets mint tint, invalid gets pale red tint.
Rem-based (1rem = 10px). --space-3 (16px) is the universal rhythm constant.
12px cards + 50px pills dominate. Shadows are layered low-alpha stacks, never heavy drop shadows.
Progressive nav heights (64 → 72 → 83 → 99px). Gift grid scales 2-up → 5-up.
| Name | Width | Key Changes |
|---|---|---|
| xs | < 480px | Nav 64px · hamburger · single-column · gift grid 2-up |
| Mobile | 480–767px | Nav 72px · 2-up gift · tightened padding |
| Tablet | 768–1023px | Nav 83px · 3-up gift · hero split appears |
| Desktop | 1024–1439px | Nav 99px · 4-up gift · full 40/60 hero |
| XLarge | 1440px+ | Content caps 1440px · 5-up gift · wide cream margins |
Pill buttons at `7px 16px` padding are ~32px tall — typically expanded visually on mobile to meet 44px WCAG AAA. Frap at 56px clears the minimum with an extra -0.8rem tap offset.
Copy-paste names for AI agents generating Starbucks-style UI.
-0.01em tracking throughout.