Design Token Catalog

Design System Inspired by Starbucks

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Browse Colors View Typography

01 / Colors

Color Tokens

Primary & Action

Starbucks Green

#00704A

Primary action, CTA buttons

House Green

#1E3932

Dark backgrounds, nav

Light Green

#D4E9E2

Success tints, light accents

Gold

#CBA258

Rewards, premium accent

Gold Light

#F2E0BE

Rewards tint, warm highlight

Surfaces

Warm White

#F9F6F1

Default page background

Cream

#F2EFE9

Alternate section surface

Paper

#EDE8DF

Cards, subtle containers

Dark Surface

#1E3932

Dark sections, hero

Darker Surface

#0D2117

Footer, deepest bg

Neutrals

Text Primary

#1E3932

Headings, primary text

Text Secondary

#4A4A4A

Body copy, descriptions

Text Muted

#767676

Captions, labels, meta

Border Light

#D9D3C8

Card borders, dividers

Border Muted

#C7C1B6

Input borders, separators

Semantic

Error

#D4351C

Form errors, alerts

Error BG

#FDECEC

Error state background

Success

#00704A

Confirmations, success

Warning

#C47A00

Warnings, caution states

Info

#0066CC

Informational messages

02 / Typography

Type Scale

Display Hero

Display Hero -- 64px / 700 / 1.00 / -0.03em / Lora (Sodo Sans stand-in)

Display Large

Display Large -- 48px / 700 / 1.07 / -0.025em / Lora

Heading 1

Heading 1 -- 36px / 700 / 1.15 / -0.02em / Lora

Heading 2

Heading 2 -- 28px / 700 / 1.20 / -0.015em / Lora

Heading 3

Heading 3 -- 22px / 600 / 1.30 / 0em / Lora

Lead body — The perfect cup starts with the finest beans, ethically sourced from farms around the world.

Body Lead -- 18px / 400 / 1.60 / 0em / Source Sans 3

Body — We believe in the highest quality coffee in the world, brewed fresh and served in a welcoming space that feels like a second home.

Body -- 16px / 400 / 1.60 / 0em / Source Sans 3

Body Small — Order ahead with the app, earn Stars on every purchase, and redeem for free drinks, food, and more.

Body Small -- 14px / 400 / 1.50 / 0em / Source Sans 3

Label / Eyebrow

Label Eyebrow -- 13px / 700 / 1.40 / 0.06em / Source Sans 3 / UPPERCASE

code: --green-starbucks: #00704A; --font-display: 'Lora';

Monospace -- 13px / 400 / 1.50 / 0em / Courier New

04 / Cards

Cards on Light Background

Seasonal Menu

Discover our latest seasonal offerings, crafted with carefully selected ingredients to bring you something truly special this season.

See the full menu →

Starbucks Rewards

Earn Stars every time you buy your favorite drinks and food, then redeem them for free items. The more you spend, the more you earn.

Join Rewards →

Find Your Store

With thousands of locations across the globe, there's always a Starbucks nearby. Use the locator to find hours, amenities, and more.

Locate a store →

04 / Cards

Cards on Dark Background

At-Home Coffee

Bring the Starbucks experience home. Explore our range of whole bean and ground coffees, espresso pods, and cold brew concentrates.

Shop at home →

Nondairy Options

Every drink, your way. Choose from oat, almond, coconut, or soy milk at no extra charge. Because great coffee should work for everyone.

Explore options →

Ethical Sourcing

We work directly with farmers across 30 countries to ensure the finest beans are grown responsibly and communities thrive alongside our cups.

Learn more →

05 / Forms

Form Elements

Email Address

Default

Password

Focus

Promo Code

⚠ This promo code is not valid or has expired.

Error

Special Instructions

Textarea — Default

Order Note

Textarea — Focus

06 / Spacing

Spacing Scale

--space-4 4px Micro gap

--space-8 8px Icon padding, tight gap

--space-12 12px Compact row gap

--space-16 16px Base unit

--space-24 24px Card padding, form groups

--space-32 32px Section sub-gaps

--space-40 40px Component spacing

--space-48 48px Mobile section padding

--space-64 64px Desktop side padding

--space-80 80px Section vertical padding

--space-96 96px Hero vertical padding

07 / Radius

Border Radius

--radius-none

0px · Sharp edges

--radius-sm

4px · Labels, badges

--radius-md

8px · Inputs, color cards

--radius-lg

12px · Cards, panels

--radius-xl

20px · Modal, drawer

--radius-pill

100px · Buttons, tags

--radius-circle

50% · Avatars, icons

Design System Inspired by Starbucks

Color Tokens

Type Scale

Button Variants

Cards on Light Background

Seasonal Menu

Starbucks Rewards

Find Your Store

Cards on Dark Background

At-Home Coffee

Nondairy Options

Ethical Sourcing

Form Elements

Spacing Scale

Border Radius

Shadow Scale