Design System

Warmth in
every detail.

A warm coffeehouse palette with Starbucks Green as the hero accent, rich espresso text, and inviting cream surfaces. Friendly, rounded, and approachable.

15 color tokens 10 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Warm neutrals anchored by Starbucks Green. Espresso-toned text for rich contrast. Cream and linen surfaces create a cozy, layered canvas.

Parchment White
#FFFFFF
Primary background, cards
Cream Foam
#F9F5F0
Secondary sections, alternation
Warm Linen
#F2EEEA
Input fields, soft containers
Starbucks Green
#00704A
Primary CTA, links, active states
Deep Green
#1E5631
Hover states, emphasis
Emerald Mint
#D4E9E2
Success states, light highlights
Espresso
#1E3932
Primary text, headings
Dark Roast
#2D2926
Deep UI, footer backgrounds
Medium Roast
#4A4A4A
Secondary text, descriptions
Light Roast
#6B6B6B
Tertiary text, captions
Caramel
#C4975A
Warm accent, badges
Golden Latte
#D4A76A
Secondary accent, decorations
Soft Border
#E0DCD8
Borders, dividers, outlines
Mist
#F0ECE7
Disabled states, muted surfaces
Cherry Red
#D4200A
Error states, destructive actions
Typography

Type Scale

SoDo Sans as primary typeface (Nunito substitute). Rounded terminals, friendly proportions, and generous x-height for warmth and readability.

Display Handcrafted drinks 48px / 1.08 / -0.02em
Display-sm Your order awaits 40px / 1.15 / -0.02px
Heading-lg Featured drinks 32px / 1.2 / -0.01px
Heading Seasonal favorites 24px / 1.25 / -0.01px
Heading-sm Nutrition info 20px / 1.33 / 0
Body Rich, full-bodied espresso with a smooth finish 16px / 1.5 / 0
Body-sm Calories: 190 · Sugar: 18g 14px / 1.5 / 0.01px
Caption Venti only · Limited time 12px / 1.5 / 0.02px

Fonts

Primary SoDo Sans 400–700 · 12–48px
Display SoDo Sans Headline 700 · 40–64px
Mono JetBrains Mono 400 · 14px · Technical only
Fallback Nunito Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Generous density with warm, breathing layouts. 13-step spacing scale, 5 border radius values emphasizing rounded shapes.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 8px
input 12px
cards 20px
buttons 50px
pill 999px
Elevation

Surfaces

Warm, layered surfaces create depth without heavy shadows. Cream and linen tones evoke the cozy feel of a coffeehouse interior.

Parchment White #FFFFFF
Cream Foam #F9F5F0
Warm Linen #F2EEEA
Mist #F0ECE7
Components

Button Variants

Primary CTA in Starbucks Green, secondary outline with green accents, and ghost variants for navigation hierarchy. All buttons use pill-shaped radius.

Primary CTA Button
Main call to action — ordering, adding to cart
.btn-primary
Starbucks Green (#00704A) background, white text, 50px pill radius. Deep Green (#1E5631) on hover. Use exclusively for the single most important action.
Secondary Outline Button
Menu browsing, learn more, secondary actions
.btn-secondary
Starbucks Green text and border on transparent background. Emerald Mint (#D4E9E2) background on hover. Green identity without competing with primary CTA.
Ghost Button
Navigation, footer links, tertiary actions
.btn-ghost
Espresso text, Soft Border outline. Cream Foam background on hover. For low-emphasis navigation and supplementary actions.
Category Pill
Menu filters, drink categories
.pill
All Drinks Hot Coffee Cold Drinks
999px pill radius, 10px/20px padding. Green fill with white text when selected. Smooth transition between states.
Input Field
Search, customization, user input
input
Warm Linen background, 12px radius, 14px padding. Focus: Starbucks Green border with subtle green ring shadow.
Product Card
Menu items, drinks, food display
.card
Image
Caramel Macchiato
Espresso, vanilla syrup, milk, caramel drizzle
$5.95
White background, 20px radius, 24px padding, 1px Soft Border. Subtle shadow on hover. Product name in bold Espresso, price in Starbucks Green.
Guidelines

Do's & Don'ts

Do — Embrace
  • Parchment White (#FFFFFF) as primary canvas
  • Starbucks Green (#00704A) exclusively for CTAs
  • Espresso (#1E3932) for all primary text
  • Generous pill radius (50px buttons, 20px cards)
  • Cream Foam and Warm Linen for surface layering
  • Caramel (#C4975A) for decorative warm accents
  • Generous spacing with 4px grid, 16px+ gaps
Don't — Avoid
  • Pure black (#000000) for text — use Espresso
  • Harsh cool grays — use warm neutrals
  • Sharp corners on interactive elements
  • Starbucks Green for large background fills
  • Dense, cramped layouts without whitespace
  • Neon or saturated accent colors
  • Cherry Red outside of error states