# Starbucks — Design System
> Global coffeehouse chain and roastery reserve brand.
- **Canonical:** https://uiuxskills.com/library/starbucks
- **Source:** https://www.starbucks.com
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:03.581Z

---

---
version: alpha
name: Starbucks
description: Global coffeehouse chain and roastery reserve brand.
tone: Inviting, warm, community-oriented, and optimistic.
color-scheme: light
colors:
  primary: "#006242"
  secondary: "#32462F"
  surface: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  surface-container: "#F2F0EB"
  outline: "#D4D4D4"
  error: "#BA1A1A"
  success: "#1E8E3E"
  focus-ring: "#006242"
typography:
  display-lg:
    fontFamily: Arial, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Arial, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Arial, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Arial, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Arial, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Arial, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Arial, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Starbucks maintains a warm, inviting, and community-focused visual identity. The brand relies on its iconic deep green palette to signal quality and consistency, paired with clean, accessible typography that emphasizes readability and friendliness.

## Colors

The color strategy centers on the signature brand green, supported by neutral surfaces to ensure the content remains the primary focus.

*   Primary (#006242): The signature Starbucks green used for primary branding and key actions.
*   Secondary (#32462F): A darker forest green used for secondary elements and text emphasis.
*   Surface (#FFFFFF): Clean white background for maximum readability and a fresh aesthetic.
*   On-Primary (inferred) (#FFFFFF): White text for high contrast against the primary green.
*   On-Surface (inferred) (#000000): Standard black text for body content.
*   Surface-Container (inferred) (#F2F0EB): Light neutral background for cards and section containers.
*   Outline (inferred) (#D4D4D4): Subtle border color for dividers and input fields.
*   Error (inferred) (#BA1A1A): Standard error red for validation states.
*   Success (inferred) (#1E8E3E): Success green for confirmation states.
*   Focus-Ring (inferred) (#006242): Primary green used for accessibility focus indicators.

## Typography

Typography is set in a clean, sans-serif Arial stack to prioritize accessibility and a neutral, approachable tone across all digital touchpoints.

*   Display-lg (inferred): Large hero headlines.
*   Headline-lg (inferred): Primary card titles.
*   Body-md (inferred): Standard paragraph text.
*   Label-sm (inferred): Button labels and small UI text.

## Layout

The site utilizes a centered container approach with a max-width constraint to maintain readability, following a mobile-first philosophy where navigation collapses into a drawer on smaller viewports. The vertical rhythm is governed by a 16px base unit, ensuring consistent spacing between sections. The standard page pattern flows from nav, hero, features, and cards, down to the footer. The hero composition typically features a centered headline and subhead paired with a single primary CTA and high-quality imagery.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying on subtle single-layer shadows. Values are inferred based on the brand's minimal, flat design language.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard card lift.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The brand employs a balanced approach to geometry, using sharp corners for structural containers and layout blocks to maintain professional order. 

Rounded corners are reserved for interactive elements like buttons and badges, utilizing the `rounded.full` token for pill-shaped CTAs and `rounded.md` for card containers. This mix creates a clear distinction between static information and actionable interface components.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.primary}` borders for secondary actions. They are designed with `{rounded.full}` to maintain an approachable, pill-shaped aesthetic.

### Card
Cards utilize `{colors.surface}` as a base with `{rounded.md}` corners. Use the `card-elevated` variant when content needs to stand out from the background, applying `elevation.md` to provide depth.

### Badge
Badges are used for status indicators or small labels. They typically use `{colors.surface-container}` for the background, though specific variants like `badge-success` use semantic colors to convey meaning.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Never use `{colors.error}` for primary brand actions. |
| Apply `{typography.headline-lg}` for main section headers. | Avoid using `{typography.display-lg}` for body text. |
| Maintain consistent `{spacing.md}` between card elements. | Do not mix `{rounded.sm}` and `{rounded.full}` on the same component. |
| Use `{rounded.full}` for pill-shaped buttons. | Avoid using low-contrast text on `{colors.surface-container}`. |
| Ensure all links use `{colors.primary}` for brand consistency. | Do not use `{elevation.lg}` for flat navigation elements. |
| Use `{colors.surface-container}` for secondary content backgrounds. | Never apply `{typography.body-md}` without sufficient line-height. |
| Apply `{rounded.md}` to all standard `{card}` components. | Do not use sharp corners on `{button-primary}` elements. |
| Use `{input-field-focus}` to indicate active states. | Never use default browser focus rings instead of `{colors.focus-ring}`. |

## Content Style

CTA labels should be written as imperative verbs in sentence case, kept short and direct to encourage immediate action (e.g., "Start an order").

Headings are phrased to be optimistic and benefit-focused, often highlighting seasonal offerings or community-oriented themes.

Copy density is kept low; paragraphs should be short and scannable, utilizing whitespace to separate distinct ideas and ensure the primary CTA remains the focal point of the section.

## Imagery & Icons

The brand employs high-quality, sun-drenched photography that captures products in natural, warm settings. Imagery should feel authentic and inviting, avoiding overly clinical or sterile compositions. Iconography should remain minimal and functional, deferring to the brand's established asset library for consistency.