Design System Inspiration of Starbucks

Dark-mode catalog — brand greens unchanged, canvas deepens to near-black forest; surfaces climb through House Green and Uplift.

1. Color Palette

The brand's own House Green becomes a surface in dark mode. Four-step brightness ladder from Canvas → Surface 3.

Brightness-Step Surface Ladder

Canvas
#0f1815
Surface 1
#1E3932
Surface 2
#2b5148
Surface 3
#33433d

Brand Greens (Unchanged)

Starbucks Green
#006241
Unchanged brand signal
Green Accent
#00754A
Primary CTA + Frap (unchanged)
Green Light
#d4e9e2
Brand heading on dark — pops brightly

Gold (Rewards Ceremony Only)

Gold
#cba258
Unchanged — reads brighter on dark
Gold Light
#dfc49d
Soft status wash

Text Opacity Tiers

100%Heading text · #ffffff
85%Body text · rgba(255,255,255,0.85)
60%Secondary / metadata · rgba(255,255,255,0.60)
40%Disabled / placeholder · rgba(255,255,255,0.40)

Translucent Borders

24% — focus, outlined pill
12% — default hairline
8% — card accent

2. Typography Scale

Identical sizes and weights. SoDoSans with -0.01em tracking. Brand-green headings shift to Green Light for dark contrast.

Display
50px / 600 / 1.2
Free coffee is just the beginning
Jumbo
36px / 600
Good afternoon
H1
24 / 600 · Green Light
How it works
H2
24 / 400 · White
Get rewarded for your routine
Body Large
19 / 400 / 1.75
Join Starbucks Rewards to earn Stars for free food and drinks.
Body
16 / 400 / 24
Default body copy on dark surface.
Small
14 / 600
Button label weight
Rewards Serif
Lora
Earn stars. Enjoy perks.
Careers Script
Kalam
Sarah

3. Button Variants

Green Accent stays the primary CTA — pops against dark canvas. Black pill becomes Surface 2 with translucent-white border. Outlined uses white-24 border.

Primary · Green Accent (unchanged)
Outlined · Green Light border
White-on-dark · inverted CTA
Outlined · white-24 border
Surface 2 pill · dark-mode signin

Frap — Floating Circular Order Button

Frap sits bottom-right with dark-mode shadow

4. Signature Components

Content cards, Rewards status panels, gift-card tiles — dark-adapted.

Content Cards

How it works

Surface 1 background · white-08 border · 12px radius · dark-mode shadow.

Your afternoon reset

Same card baseline for feature modules on the dark canvas.

Partnership

Same card spec. Gold accent used here would be fine — gold pops brighter on dark.

Rewards Status Cards

Green Level

  • ★ Earn Stars on every order
  • ★ Personalized offers
  • ★ Birthday reward

As you earn more Stars, you unlock new benefits.

Gold Level

  • ★ Free refills
  • ★ Monthly Double-Star days
  • ★ Personalized rewards

Reach Gold by earning 450 Stars in 12 months.

Mission

  • ★ Exclusive gifts
  • ★ Double Star days
  • ★ Free drink on your birthday

Extra perks once you reach mission status.

Gift Card Tiles

Happy Birthday
Thank You
Celebrate
Mother's Day
Spring
Anytime

5. Product Detail Components (PDP)

Size selector, add-in rows, customize flow, Rewards Cost pill, description band, nutrition table — dark-adapted.

PDP Breadcrumb

Menu  /  Refreshers  /  Pink Energy Drink

Size Options Selector

☕
Tall
12 fl oz
☕
Grande
16 fl oz
☕
Venti
24 fl oz
☕
Trenta
30 fl oz

Add-in / Milk Select Fields

Add-ins
Ice▾
Add-ins
Strawberry Fruit Inclusions scoop
1
Milk
Coconut▾

Customize + Add to Order

Rewards Cost Pill

200★ item 150★ item 75★ item

Product Description Band

200★ item

Crafted with crisp strawberry and smooth coconutmilk, hand-shaken with ice and real freeze-dried strawberries. Boosted with 125mg of caffeine in a grande.

140 calories, 25g sugar, 2.5g fat ⓘ

Ingredients / Nutrition Table

Ingredients

Not available for this item

We cannot guarantee that any prepackaged products served in our stores are allergen-free. Customers with allergies can find ingredient information online.

Nutrition

Calories5
Total Fat0 g
Sodium15 mg
Total Carbohydrates0 g
Protein0 g
Caffeine205 mg**

** Caffeine is an approximate value.

6. Form Elements

White-04 input fill · white-24 border · Green Light focus border. Valid / invalid use translucent tint versions.

7. Spacing Scale

Rem-based (1rem = 10px). --space-3 (16px) is the universal rhythm constant.

space-1 · 4px
space-2 · 8px
space-3 · 16px ★
space-4 · 24px
space-5 · 32px
space-6 · 40px
space-7 · 48px
space-8 · 56px
space-9 · 64px

8. Border Radius & Depth

Same scale. Shadows bumped to 40–60% alpha. Brightness ladder is primary elevation.

12px · cards
12px top · feedback
50px · pills
50% · Frap, icons

Elevation Tiers

Card
2-layer dark shadow
Nav
Border + lift
Frap
Base + ambient stack

9. Responsive Behavior

Identical breakpoint behavior. Progressive nav heights.

NameWidthKey Changes
xs< 480pxNav 64px · hamburger · 2-up gift grid
Mobile480–767pxNav 72px
Tablet768–1023pxNav 83px · 3-up gift
Desktop1024–1439pxNav 99px · 4-up gift
XLarge1440px+Content caps · 5-up gift
480
xs
768
tablet
1024
desktop
1440
xlarge

Touch Targets

Pill buttons visually expanded to meet 44px WCAG AAA on mobile. Frap at 56px + 0.8rem tap offset clears minimum comfortably.

Collapsing Strategy

10. Agent Prompt Guide — Quick Color Reference

Dark-mode canonical names. Brand greens unchanged; canvas and surfaces replace cream tokens.

Canvas
Deep Forest
#0f1815
Card
Surface 1 · House Green
#1E3932
Elevated
Surface 2 · Uplift
#2b5148
Accent Surface
Surface 3 · Rewards
#33433d
Primary CTA
Green Accent
#00754A
Brand Heading
Green Light
#d4e9e2
Heading
Pure White
#ffffff
Body
White 85
rgba(255,255,255,0.85)
Secondary
White 60
rgba(255,255,255,0.60)
Border
White 12
rgba(255,255,255,0.12)
Rewards Ceremony
Gold
#cba258
Destructive
Red
#c82014
Note. Use the brightness-step ladder (Canvas → Surface 1 → Surface 2 → Surface 3) as primary elevation. Green Accent unchanged for CTAs. Shift brand-green headings to Green Light for dark contrast.