What is Starbucks' primary brand color?

Starbucks doesn't have a single primary green — the system runs a four-tier family. Starbucks Green (#006241) is the historic brand green used on h1 headings and primary section headers. Green Accent (#00754A) is the slightly brighter, more luminous green used as the primary filled-CTA color and the fill of the floating Frap circular button. House Green (#1E3932) is the deep near-black brand green used on footer surfaces, feature-band backgrounds, and Rewards dark surfaces. Green Uplift (#2b5148) is a secondary mid-dark green used sparingly on decorative accents.

Why does Starbucks use a cream canvas instead of white?

The page canvas is Neutral Warm (#f2f0eb) or a slightly darker Ceramic (#edebe9), not pure white. The warm cream references actual store materials — the paper napkins, café walls, and wood finishes you see in any Starbucks location. Pure white would flatten the brand temperature. Body text never goes pure black either — it sits at `rgba(0,0,0,0.87)` to match the warm-neutral canvas tone rather than fight it.

What typography does Starbucks use, and what should I substitute?

Starbucks runs SoDoSans, a proprietary corporate typeface licensed from House Industries and not publicly available. It sits across nearly every surface with a tight `-0.16px` letter-spacing — confident and friendly rather than fashion-magazine severe. Reasonable open-source substitutes are Inter, Manrope, or Nunito Sans. The Rewards page switches to a warm serif (Lander Tall / Iowan Old Style) for editorial headlines, and Careers pages use Kalam script for cup-name decorative touches. Three typefaces, three contexts — never mix them within the same surface.

What is the Frap floating button?

The Frap is the product's signature elevation element — a 56px circular order button in Green Accent (#00754A) that floats bottom-right on every shopping surface. It carries a layered shadow stack — base `0 0 6px rgba(0,0,0,0.24)` plus ambient `0 8px 12px rgba(0,0,0,0.14)` — and compresses via `scale(0.95)` on press, with the ambient shadow fading to zero. A 40px mini variant exists. The Frap uses a `-0.8rem` touch offset to extend the tap area 8px beyond the visual edge.

Why are all the buttons full pills?

Every button in the system uses a 50px full-pill radius — there are no square or softly rounded button corners anywhere. Cards take a 12px rounded-rectangle. Circular icons and the Frap floating button are full 50%. The universal active state is `transform: scale(0.95)` with a `0.2s ease` transition. Padding stays at `7px 16px` for standard pills; the PDP Customize button uses a generously larger `14px 40px` because it's a secondary primary action. Skipping the `scale(0.95)` press is the fastest way to make a Starbucks-style button feel wrong.

When should I use the gold color?

Gold (#cba258) is reserved almost exclusively for Rewards-status ceremony — Gold-tier callouts, partnership badges like SkyMiles and Bonvoy, and premium-feeling Rewards accents like the gold-outlined `200 star item` Rewards Cost Pill on PDP. Gold Light (#dfc49d) softens background washes on gold-tier sections, and Gold Lightest (#faf6ee) is a cream-gold wash that ties the gold accent back into the warm neutral system. Using gold as a general-purpose accent flattens the Rewards signal — keep it scoped.

Starbucks Design System

Starbucks design system as a DESIGN.md file.

About Starbucks DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source starbucks.com

Food & Delivery
E-commerce & Retail

Starbucks runs one of the most disciplined retail design systems online. Every surface wears the green of the storefront apron, but never as a single "brand green" — there are four calibrated tiers (Starbucks #006241 for headings, Green Accent #00754A for CTAs, House Green #1E3932 for deep feature bands, Green Uplift #2b5148 for decorative). The canvas is not white. It is a warm-neutral cream (#f2f0eb) or a slightly darker ceramic (#edebe9) that references real café materials — paper napkins, café walls, wood finishes. Gold (#cba258) shows up only around Rewards-status ceremony. The product feels like clean café signage: confident, warm, legible, never shouting.

This DESIGN.md file packages the whole system into one machine-readable spec. Inside: roughly 22 color tokens grouped by role (primary, secondary, surface, neutral, semantic, alpha ladders), 11 typography tokens running on SoDoSans with tight `-0.16px` tracking across the board, a rem-based spacing scale anchored at 1.6rem (16px) stepping to 6.4rem (64px), a universal 50px pill radius for buttons plus 12px for cards, and over 30 components — from the standard pill button family to the signature floating Frap circular order CTA, the dark-green feature bands, the Rewards status cards, and the full PDP component cluster (size selector, milk select, numeric stepper, Customize pill, gold-outlined Rewards Cost Pill).

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Starbucks' restraint — the four-green discipline, the cream canvas, the universal 50px pill, the `scale(0.95)` press — rather than a generic shadcn theme. Or reference tokens directly: every hex, font, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. The reason this system is worth studying is the four-tier color discipline: most brands ship one "brand color" and call it done. Starbucks ships four greens, each with a defined surface role, and the difference is visible on every screen.

What makes it distinct

Four-tier green systemStarbucks #006241, Accent #00754A, House #1E3932, Uplift #2b5148 each mapped to a distinct surface role
Warm cream canvas (#f2f0eb / #edebe9) instead of pure whitereferences café paper napkins and wood finishes
Universal 50px full-pill buttons with `scale(0.95)` active press as the signature micro-interaction
Floating Frap circular CTA at 56px (Green Accent #00754A)the product's signature elevation moment, layered shadow stack
Gold (#cba258) reserved exclusively for Rewards-status ceremonynever a general-purpose accent

Live at starbucks.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

starbucks.com

Explore Starbucks

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Starbucks design system FAQ

Common questions about Starbucks's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Starbucks in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→