# Starbucks At Home — Design System
> The official digital destination for Starbucks coffee products designed for home consumption.
- **Canonical:** https://uiuxskills.com/library/starbucks-at-home
- **Source:** https://athome.starbucks.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:15.942Z

---

---
version: alpha
name: Starbucks At Home
description: The official digital destination for Starbucks coffee products designed for home consumption.
tone: >-
  Inviting, professional, and aspirational. The voice is helpful and barista-focused, aiming to
  empower users to craft their own coffee experiences.
color-scheme: light
colors:
  primary: "#006241"
  secondary: "#D4E9E2"
  surface: "#FFFFFF"
  surface-dim: "#F2F0EB"
  on-surface: "#1E1E1E"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  error: "#BA1A1A"
  success: "#1B6C37"
  focus-ring: "#006241"
typography:
  display-lg:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: SoDo Sans, sans-serif
    fontSize: 0.75rem
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-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#004d34"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-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: "#004d34"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  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 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

The Starbucks At Home visual identity is a digital extension of the iconic global brand, emphasizing warmth, quality, and the "third place" experience brought into the home. It utilizes a high-contrast, clean aesthetic that balances professional product photography with the signature Starbucks green to create an inviting, aspirational environment.

## Colors

The color strategy relies on a high-contrast palette that prioritizes readability and brand recognition. The iconic green serves as the primary anchor, while warm, neutral backgrounds provide depth and focus for product imagery.

*   **Primary (#006241):** The core brand color used for primary CTAs and key identity elements.
*   **Secondary (inferred) (#D4E9E2):** A soft mint green used for subtle accents and background highlights.
*   **Surface (inferred) (#FFFFFF):** The standard clean white background for content areas.
*   **Surface-dim (inferred) (#F2F0EB):** A warm, light cream tone used for alternating section backgrounds to create visual interest.
*   **On-surface (inferred) (#1E1E1E):** Dark charcoal for primary text to ensure high contrast against white surfaces.
*   **On-primary (inferred) (#FFFFFF):** White text for use on primary green buttons.
*   **Outline (inferred) (#E0E0E0):** Neutral grey for dividers and card borders.
*   **Error (inferred) (#BA1A1A):** Standard error red for validation states.
*   **Success (inferred) (#1B6C37):** Deep green for success states and positive feedback.
*   **Focus-ring (inferred) (#006241):** Primary brand color used for accessibility focus indicators.

## Typography

The typography system uses SoDo Sans, a clean, geometric sans-serif that maintains legibility across all screen sizes. Hierarchy is established through size and weight, ensuring clear navigation from hero headers to body copy.

*   **Display-lg (inferred):** Used for hero headlines to create immediate impact.
*   **Headline-lg (inferred):** Used for main section titles.
*   **Headline-md (inferred):** Used for card titles.
*   **Body-md (inferred):** Standard paragraph text.
*   **Body-sm (inferred):** Used for secondary descriptions and legal text.
*   **Label-md (inferred):** Used for button labels.
*   **Label-sm (inferred):** Used for small UI elements.

## Layout

The site utilizes a responsive grid system with a max-width container that centers content on large screens. Spacing is consistent, using a 4px-based scale (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px) to maintain rhythm between product cards and section headers. The page structure follows this order: hero, featured-products, recipe-showcase, quiz, about, and footer. The hero pattern features a full-width image with a left-aligned headline and a single primary CTA button. The design is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive cards from the background, relying on subtle, single-layer shadows. Values are inferred based on standard design patterns for e-commerce sites.

*   **elevation.sm:** Used for subtle card lift.
*   **elevation.md:** Used for dropdowns, popovers, and interactive elements.
*   **elevation.lg:** Used for modal or drawer overlays.

## Shapes

The brand uses a mix of sharp and rounded corners to balance professional precision with approachability. Buttons and input fields typically use `{rounded.sm}` (4px) to maintain a crisp, functional feel.

Product cards and containers utilize `{rounded.md}` (8px) to feel softer and more approachable. Avoid mixing different border-radius values on the same component type to maintain visual consistency.

## 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`


### Buttons
Buttons use `{typography.label-md}` and are designed for clear, actionable intent. `button-primary` uses `{colors.primary}` with `{colors.on-primary}` text, while `button-secondary` uses a transparent background with a `{colors.primary}` border.

### Cards
Cards are the primary container for products and recipes. Use `card` for standard content with a `{colors.outline}` border and `{rounded.md}` corners. Use `card-dim` with `{colors.surface-dim}` for secondary content or grouping related items.

### Input Fields
Input fields use `{rounded.sm}` and `{colors.outline}` for the default border state. Upon focus, the border must switch to `{colors.focus-ring}` to ensure accessibility.

### Badges
Badges are used for status or category labels. `badge` defaults to `{colors.secondary}` background with `{colors.primary}` text. Use `badge-success` or `badge-error` for specific state-driven feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for secondary or tertiary buttons. |
| Apply `{typography.headline-lg}` for main section titles. | Avoid using `{typography.body-sm}` for primary content. |
| Use `{colors.surface-dim}` for alternating section backgrounds. | Never use low-contrast text colors on `{colors.surface-dim}` backgrounds. |
| Ensure all buttons have a minimum height of 44px. | Do not use shadows on flat UI elements like navigation bars. |
| Use `{rounded.md}` for all product cards. | Do not mix different border-radius values on the same component type. |
| Apply `{colors.on-surface}` for all body copy. | Avoid using more than two font weights in a single section. |
| Use `{colors.outline}` for card borders and dividers. | Do not use `{colors.primary}` for text inside `card-dim` components. |
| Use `{colors.focus-ring}` for all keyboard focus states. | Avoid using `{colors.secondary}` for text that requires high readability. |

## Content Style

CTA labels are action-oriented and imperative, using verbs like "Try it now" or "Explore Iced." Keep labels concise and focused on the immediate benefit to the user.

Headings should be warm, inviting, and benefit-focused. They should clearly articulate the value proposition of the coffee experience being presented, avoiding overly abstract or marketing-heavy language.

Copy density should be kept low. Use short, scannable paragraphs and bullet points to break up information. Maintain generous whitespace between sections to allow the product photography to breathe.

## Imagery & Icons

Imagery features high-quality, warm-toned product photography that is central to the visual experience. Icons are minimal and clean, often using thin strokes to maintain the brand's accessible, uncluttered aesthetic. The treatment is mixed, combining lifestyle photography with clean product shots.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Starbucks At Home, a minimal and accessible coffee brand with an inviting, barista-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every color, spacing, typography, radius, and elevation value by its token name — `{colors.primary}`, `{spacing.md}`, `{typography.headline-lg}`, `{elevation.sm}` — never hardcode hex values or pixel sizes.
2. Render only the component variants defined under `components:`. Do not invent states, sizes, or variants the spec omits.
3. Follow the Layout section for page structure (hero → featured-products → recipe-showcase → quiz → about → footer), spacing rhythm, and mobile-first breakpoints; if a breakpoint is unspecified, use a single breakpoint at 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.primary}` as body text inside `card-dim` — surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If the product has an authoritative token source (Figma tokens, a theme file, Storybook), those values supersede inferred ones.

## Output contract

**Must:**
- Use token names for every design value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` as the visible keyboard focus indicator on all interactive elements.
- Use `{rounded.sm}` for buttons and inputs; `{rounded.md}` for cards. Never mix radius values on the same component type.
- Keep all button minimum heights at 44px per the Do's and Don'ts.
- Match CTA copy style — short, verb-led, benefit-focused — per the Content Style section when generating placeholder labels.

**Must NOT:**
- Invent colors, type scales, radius values, or elevation levels absent from the spec.
- Use generic utility defaults when a brand token exists.
- Use `{colors.primary}` for secondary or tertiary buttons, or as text inside `card-dim` components.
- Use `{colors.secondary}` for text requiring high readability.
- Add emoji, decorative copy, or filler text.
- Rewrite, replace, or reorder existing page copy, headings, navigation items, or routes.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` for alternating sections.
- For ambiguous text roles, use `{colors.on-surface}` on light surfaces and `{colors.on-primary}` on `{colors.primary}` backgrounds.
- Inferred tokens are approximations — flag them if precision matters for production.