starbucks.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: starbucks.com
description: "Light product system built on #ffffff with #00754a as the primary CTA accent. Type anchored in SoDoSans at 24px / weight 600. Extracted automatically from https://starbucks.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  starbucks.com is built on a pure-white canvas (rgb(255, 255, 255)).
  The system uses rgb(0, 117, 74) as the accent for primary actions and brand signals.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside SoDoSans as the primary typeface.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 23 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#f9f9f9"
  surface-2: "#f9f9f9"
  primary: "#00754a"
  on-primary: "#ffffff"
  primary-hover: "#008248"
  primary-focus: "#00754a"

typography:
  display-xl:
    fontFamily: "SoDoSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.16px
  display-md:
    fontFamily: "SoDoSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  body:
    fontFamily: "SoDoSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  body-sm:
    fontFamily: "SoDoSans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.4px
  button:
    fontFamily: "SodoSans_Normal, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 8px
  sm: 50px
  md: 58px
  lg: 66px
  xl: 74px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 13px
  md: 26px
  lg: 51px
  xl: 64px
  xxl: 90px

components:
  button-pill:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 7px 16px
  button-pill-2:
    backgroundColor: "{colors.primary-focus}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 7px 16px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px

extracted_at: "2026-06-11T05:02:30.753Z"
completeness: 66
scoreVersion: "v2"

---

# Design System — starbucks.com
> Extracted automatically by Prism from https://starbucks.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (SoDoSans) | "Cup sleeve giveaway tomorrow!" |
| Color assertion | dual-accent | #00754a |
| Whitespace | sparse | section rhythm 77px |
| Interaction | expressive | 23 keyframes, 6 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(255, 255, 255)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0, 117, 74)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 77px between major bands. Card padding: 51px.
> - **Default radius**: 50px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

starbucks.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Typography is anchored in **SoDoSans**, deployed with OpenType features enabled globally (`"calt"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Headlines use weight 600 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-0.16px at 24px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Translucent Pure Black (87%) (`rgba(0, 0, 0, 0.87)`) (contrast ratio 21.0:1, well above WCAG AA). **#00754a** (`#00754a`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: Lander Tall
- Accent: #00754a (`#00754a`)
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: Lander Tall, SoDoSans, SodoSans_Normal, SodoSans_Bold

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **Off-White** (`#f9f9f9`): Surface / elevated background

### Text & Content
- **Translucent Pure Black (87%)** (`rgba(0, 0, 0, 0.87)`): Primary body text
- **Dark Gray** (`#32462f`): Secondary text

### Accent & Interactive
- **#008248** (`#008248`): Interactive / accent
- **#00754a** (`#00754a`): Interactive / accent
- **#006241** (`#006241`): Interactive / accent
- **#006242** (`#006242`): Interactive / accent
- **#006342** (`#006342`): Interactive / accent

### Full Extracted Palette
**10 colors rendered on the page** + **11** more declared in design tokens (CSS custom properties — not necessarily painted). (9 categorized above + 12 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#808080` — Slate Grey
- `#33433d` — Dark Gray *(token)*
- `#1e3932` — Charcoal *(token)*
- `#c82014` — M Tricolor Red *(token)*
- `#282828` — Near-Black *(token)*
- `#f2f0eb` — Off-White *(token)*
- `#faf6ee` — Warm Cream *(token)*
- `#dfc49d` — #dfc49d *(token)*
- `#d4e9e2` — Light Gray *(token)*
- `#2b5148` — Dark Gray *(token)*
- `#edebe9` — Whitesmoke *(token)*
- `#cba258` — #cba258 *(token)*

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--buttonPadding`: `7px 16px`
- `--frapPadding`: `9rem`
- `--space-9`: `6.4rem`
- `--space-4`: `2.4rem`

**Shadow Token**
- `--caretBoxShadowSecondary`: `0 3px 1px rgba(0,0,0,0.06)`
- `--frapShadowSecondaryPosition`: `0 8px 12px`
- `--boxShadowSecondary`: `0 0 2px rgba(0,0,0,0.24)`
- `--frapShadowSecondary`: `0 8px 12px rgba(0,0,0,0.14)`

**Motion Token**
- `--transitionTime`: `0.4s`
- `--iconTransition`: `all ease-out 0.2s`
- `--defaultAnimationEasing`: `cubic-bezier(0.25,0.1,0.25,1)`

**Border Radius Token**
- `--buttonBorderRadius`: `50px`
- `--cardBorderRadius`: `12px`
- `--svcRoundedCorners`: `3.3333%/5.298%`

**Other tokens**
- `--colorBlack40`: `rgba(0,0,0,.4)`
- `--colorBlack90`: `rgba(0,0,0,.9)`
- `--colorHouseGreen`: `#1E3932`
- `--colorCeramicHsl`: `30 10% 92%`
- `--textSize8`: `2.8rem`
- `--colorTextWhite`: `rgba(255,255,255,1)`
- `--frapMiniBgColor`: `#ffffff`
- `--colorWhite90`: `rgba(255,255,255,.9)`

## 3. Typography Rules

### Font Families
- **Primary**: `SoDoSans`
- **Secondary**: `Lander Tall`
- **Font 3**: `SodoSans_Normal`
- **Font 4**: `SodoSans_Bold`

### Custom Fonts Loaded
- **Lander Tall** weight 400 (normal)
- **SoDoSans** weight 400 (normal)
- **SoDoSans** weight 600 (normal)
- **SoDoSans** weight 700 (normal)
- **SodoSans_Normal** weight normal (normal)
- **SodoSans_Bold** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | SoDoSans | 24px | 600 | 1.5 | -0.16px | Main headline (h1) |
| Sub-heading | SoDoSans | 24px | 400 | 1.5 | -0.16px | Section titles (h2) |
| Body | SoDoSans | 16px | 400 | 1.5 | -0.16px | Standard reading text |
| Button Large | SodoSans_Normal | 16px | 400 | 1.5 | normal | Button label (16px) |
| Button Large | SoDoSans | 16px | 700 | 1.2 | -0.16px | Button label (16px) |
| Button | SodoSans_Normal | 14px | 400 | 1.2 | normal | Button label (14px) |
| Button | SoDoSans | 14px | 600 | 1.2 | -0.16px | Button label (14px) |
| Link | SoDoSans | 14px | 700 | 1.5 | 1.4px | Link (14px) — Decoration: none |
| Button | SodoSans_Normal | 13px | 400 | 1.5 | -0.16px | Button label (13px) |

### Full Font Size Scale

Sizes detected in the design (descending): `24px`, `19px`, `16px`, `14px`, `13px`, `10px`

> 2 size(s) detected outside the sampled hierarchy (19px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **contextual alternates** (`calt`) — connections between letters refined contextually

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "calt";
}
```

## 4. Component Stylings

### Buttons

**Pill**
- Background: `#008248` `{colors.primary-hover}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 7px 16px
- Radius: 50px
- Font: 14px weight 400
- Use: Status pills, tags, chips
- Hover: textDecoration: `underline`
- Focus: outline: `rgb(0, 117, 74) solid 2px`

**Pill**
- Background: `#00754a` `{colors.primary-focus}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 7px 16px
- Radius: 50px
- Shadow: `rgba(0, 0, 0, 0.24) 0px 2px 4px 0px`
- Font: 16px weight 700
- Use: Status pills, tags, chips
- Hover: textDecoration: `underline`
- Focus: outline: `rgb(0, 117, 74) solid 2px`

**Ghost**
- Background: `transparent`
- Text: `rgba(0, 0, 0, 0.87)`
- Padding: 8px 0px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: textDecoration: `underline`
- Focus: outline: `rgb(0, 117, 74) solid 2px`


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 130, 72)"
    hover:
      bg: "transparent"
      fg: "inherit"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgb(0, 117, 74)"
      fg: "rgb(255, 255, 255)"
      shadow: "rgba(0, 0, 0, 0.24) 0px 2px 4px 0px"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.87)"
    hover:
      bg: "transparent"
      fg: "inherit"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(0, 0, 0, 0.58)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **2 shape(s)** in this system: `Pill`, `Ghost`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 13px |
| md | 26px |
| base | 38px |
| lg | 51px |
| xl | 64px |
| 2xl | 77px |
| 3xl | 90px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 8px | Tiny corners (badges, micro elements) |
| Sm | 50px | Buttons, inputs, small elements |
| Md | 58px | Cards, containers |
| Lg | 66px | Large rounded elements, pill segments |
| Xl | 74px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `50px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 8px, 50px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~24px internal vertical padding (up to 32px) — **compact**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `90px` | Top/bottom of full-bleed hero sections |
| **section** | `64px` | Between major bands (color change, content shift) |
| **subsection** | `51px` | Within a section, between content groups |
| **card** | `26px` | Card padding, list-item spacing |
| **compact** | `13px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 108px tall (not full-viewport)
- **Heading:** "This site uses cookies, but not the kind you eat" — 24px left-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 99px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a static logo left links left navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 10 cards detected
- **Columns (desktop):** 8-up grid
- **Card dimensions:** 190×389px (aspect 0.49:1)
- **Gap:** 32px between cards
- **Content:** ✗ no image + icon
- **Clone instruction:** Build a 8-column grid (desktop) with cards at ~0.49:1 aspect ratio. Text/icon-only cards (no photography).

### Footer Pattern

- **Columns:** 1
- **Links:** 38 total
- **Height:** 935px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~38 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.1) 0px 11px 15px 0px`,<br>`rgba(0, 0, 0, 0.06) 0px 9px 46px 8px`,<br>`rgba(0, 0, 0, 0.07) 0px 24px 38px 3px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.24) 0px 2px 4px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.06) 0px 2px 2px 0px`,<br>`rgba(0, 0, 0, 0.07) 0px 0px 2px 0px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgba(0, 0, 0, 0.1) 0px 4px 3px -3px inset`,<br>`rgba(0, 0, 0, 0.07) 0px 4px 2px -2px inset` | Buttons, pressed-state elements |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--defaultAnimationEasing` | `cubic-bezier(0.25,0.1,0.25,1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--defaultAnimationExitDuration` | `200ms` | Normal |
| `--defaultAnimationEntranceDuration` | `300ms` | Normal |
| `--duration` | `0.4s` | Slow |
| `--expanderDuration` | `300ms` | Normal |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.2s ease-out, opacity 0s linear 0.2s;
```

**All Props**
```css
transition: 0.2s ease-out;
```

**All Props**
```css
transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `slideDown` | Slide | transform | Panel / drawer enter |
| `ripple` | Fade + Move | opacity, transform | UI transition |
| `fade` | Fade | opacity | UI transition |
| `field-status-icon-fade-in` | Fade | opacity | Element entrance |
| `option-label-marker-expansion` | Scale | transform | UI transition |
| `float-label-active-mobile` | Fade + Move | opacity, font-size, top, transform | UI transition |
| `float-label-active-desktop` | Fade + Move | opacity, font-size, top, transform | UI transition |
| `float-label-inactive-mobile` | Slide | font-size, top, transform | UI transition |
| `float-label-inactive-desktop` | Slide | font-size, top, transform | UI transition |
| `fadeIn` | Fade | opacity | Element entrance |
| `checkbox-label-marker-expansion` | Scale | transform | UI transition |
| `slideOpen` | Slide | transform | UI transition |
| `slideClosed` | Slide | transform | UI transition |
| `topLineAnimation` | Rotate / Spin | transform | UI transition |
| `middleLineAnimation` | Fade | opacity | UI transition |
| `bottomLineAnimation` | Rotate / Spin | transform | UI transition |
| `dash` | Custom | stroke-dashoffset | UI transition |
| `sb-loadingIndicator-slide` | Slide | transform | Loading indicator |
| `sb-loadingIndicator-slideToCenter` | Slide | transform | Element entrance |
| `sb-loadingIndicator-expand` | Custom | width, left, box-shadow | Loading indicator |

> *3 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 23 unique animations (23 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use SoDoSans as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.16px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use #00754a (`#00754a`) as the primary accent — it's the brand's signature interactive color
- Use 50px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Maintain nav height at 99px — consistent vertical space for the navigation bar
- Respect the 6px–64px spacing range — the design uses a wide scale for visual breathing room
- Each card uses an icon (not photo) — the visual language is illustrative, not photographic
- Use a 8-column grid on desktop — density matters for this content type

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use sharp-cornered or pill buttons — 50px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(255, 255, 255)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0, 117, 74)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0, 117, 74)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 375px | Single column, compact spacing |
| Mobile | 420px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `24px` | `22px` |
| heading | line-height | `36px` | `33px` |
| heading | letter-spacing | `-0.16px` | `-0.14px` |
| body | font-size | `16px` | `14px` |
| body | line-height | `24px` | `21px` |
| nav | height | `99px` | `72px` |
| button | width | `178px` | `253px` |

### Collapsing Strategy
- Headlines: 24px → 22px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 4 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (2 → 0) — the design prioritizes content over conversion buttons at small sizes.
- **Card grid: 8-up → 2-up** — cards stack as viewport narrows.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **CSS-variable animations** (2) — animated custom properties.

> **Motion fingerprint**: standard CSS transitions only

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- /next_static/icons/summary_square.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.71:1 (landscape (16:9-ish))
- Rendered size: 720×420px
- Alt text: "A limited-edition cup sleeve that mimics a soccer captain armband wraps around a Starbucks hot cup"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 4 (100%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)

**Media Format Mix:**
- JPG: 4 (typically photographic content)

**Average rendered image size:** 720×420px
**Above-fold image count:** 2 / 4

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure White (`#ffffff`)
- Primary text: Translucent Pure Black (87%) (`rgba(0, 0, 0, 0.87)`)
- Accent: #00754a (`#00754a`)
- Border: Translucent Pure Black (12%) (`rgba(0, 0, 0, 0.12)`)
- Font: SoDoSans
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 24px SoDoSans weight 600, line-height 1.5, letter-spacing -0.16px, color rgba(0, 0, 0, 0.87)."
- "Create the primary CTA button: `#00754a` background, `#ffffff` text, 50px border-radius, 7px 16px padding, 700 weight, SoDoSans font."
- "Build navigation: static on `#ffffff`. SoDoSans 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
2. **Typography**: All type in SoDoSans, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #00754a (`#00754a`) is the sole interactive color. On hover → #008248 (`#008248`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.25,0.46,0.45,0.94)`. Timing: 200ms for micro-interactions, 300ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (6px–64px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-on-primary: #ffffff;
  --ca-surface-2: #f9f9f9;
  --ca-primary-focus: #00754a;
  --ca-primary-hover: #008248;
}

/* Typography */
:root {
  --ca-font-primary: "SoDoSans", system-ui, sans-serif;
  --ca-text-display: 24px;
  --ca-text-body: 16px;
  --ca-text-small: 14px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 13px;
  --ca-space-md: 26px;
  --ca-space-base: 38px;
  --ca-space-lg: 51px;
  --ca-space-xl: 64px;
  --ca-space-2xl: 77px;
  --ca-space-3xl: 90px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 8px;
  --ca-radius-sm: 50px;
  --ca-radius-md: 58px;
  --ca-radius-lg: 66px;
  --ca-radius-xl: 74px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-duration: 0.4s;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: feature-section
    tag: div
    height: 2984px
    width: full-bleed
    layout: block
    children: 5
  - section: header
    tag: header
    height: 99px
    width: full-bleed
    layout: block
    children: 1
  - section: navigation
    tag: nav
    classes: ["bg-white"]
    height: 99px
    width: full-bleed
    layout: block
    children: 3
    bg: "rgb(255, 255, 255)"
  - section: navigation
    tag: div
    height: 99px
    width: 1269px
    layout: flex-row justify=normal
    children: 2
  - section: feature-section
    tag: div
    height: 536px
    width: 343px
    layout: block
    children: 3
  - section: feature-section
    tag: main
    classes: ["relative"]
    height: 1918px
    width: full-bleed
    layout: block
    children: 5
  - section: content-section
    tag: div
    height: 935px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~24px
  - section: footer
    tag: footer
    classes: ["py4", "relative"]
    height: 935px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~24px
    padding: "24px 0px"
  - section: navigation
    tag: nav
    classes: ["sb-global-gutters"]
    height: 887px
    width: full-bleed
    layout: block
    children: 5
    vertical-padding: ~32px
    padding: "0px 40px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "This site uses cookies, but not the kind you eat"
    - "It's a great day for coffee Start an order"
    - "It’s Starbucks summer"
    - "About Us"
    - "For Business Partners"
  ctas:
    - "Change cookie settings"
    - "Agree"
    - "Privacy Notice"
    - "Skip to main content"
    - "Sign in"
    - "Join now"
    - "Explore menu"
    - "Explore the summer menu"
  navigation:
    - "Find a store"
    - "MENU"
    - "REWARDS"
    - "GIFT CARDS"
    - "Sign in"
    - "Join now"
    - "Our Company"
    - "Our Coffee"
    - "About Starbucks"
    - "Starbucks Archive"
  footer-links:
    - "Our Company"
    - "College Achievement Plan"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Change cookie settings
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 6 · **cta** 1 · **auth** 1 · **blog** 1 · **social** 4 · **legal** 2 · **footer** 3 · **download** 1 · **other** 32

**Primary actions (conversion path):**
- Account access — "Sign in" (login/signup) → `https://www.starbucks.com/account/signin?ReturnUrl=%2F`
- Primary call-to-action — "Try one now" (the conversion path) → `https://www.starbucks.com/menu/drinks/refreshers/energy-refreshers/`

**Signals:** 8/51 links carry a featured image · dominant link roles: inline-link (33), navigation (6), content-card (6).


---
## Extraction Completeness: 66/100 (C)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 13 | 25 | 9 named colors |
| Typography | 20 | 20 | 9 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 9 | 10 | 188 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (Lander Tall, SoDoSans)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 188 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 9 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 16 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 4 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

4 font file(s) captured (145KB total). When running `prism add`, fonts are saved to `extractions/starbucks.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Lander Tall';
  /* src: url('/fonts/Lander-Tall.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SoDoSans';
  /* src: url('/fonts/SoDoSans.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SoDoSans';
  /* src: url('/fonts/SoDoSans.woff2') format('woff'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SoDoSans';
  /* src: url('/fonts/SoDoSans.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**23 @keyframes found** — these are the real animation definitions:

```
@keyframes slideDown { ... }
@keyframes ripple { ... }
@keyframes fade { ... }
@keyframes field-status-icon-fade-in { ... }
@keyframes option-label-marker-expansion { ... }
@keyframes float-label-active-mobile { ... }
@keyframes float-label-active-desktop { ... }
@keyframes float-label-inactive-mobile { ... }
@keyframes float-label-inactive-desktop { ... }
@keyframes fadeIn { ... }
@keyframes checkbox-label-marker-expansion { ... }
@keyframes slideOpen { ... }
@keyframes slideClosed { ... }
@keyframes topLineAnimation { ... }
@keyframes middleLineAnimation { ... }
@keyframes bottomLineAnimation { ... }
@keyframes dash { ... }
@keyframes sb-loadingIndicator-slide { ... }
@keyframes sb-loadingIndicator-slideToCenter { ... }
@keyframes sb-loadingIndicator-expand { ... }
@keyframes spin { ... }
@keyframes modal_fadeIn__jKKUD { ... }
@keyframes cup-writing_dash__PlgWx { ... }
```

<details><summary>Full keyframes CSS (23 animations)</summary>

```css
@keyframes slideDown{0%{transform:translateY(-100%)}
@keyframes ripple{0%{opacity:.5;transform:scale(1)}
@keyframes fade{0%{opacity:0}
@keyframes field-status-icon-fade-in{0%{opacity:0}
@keyframes option-label-marker-expansion{0%{transform:scale(0)}
@keyframes float-label-active-mobile{0%{opacity:1}10%,30%{opacity:0}40%{opacity:1;font-size:var(--floatLabelFontSizeMobile);top:50%;top:var(--floatLabelTop)}50%{font-size:var(--floatLabelActiveFontSizeMobile)}
@keyframes float-label-active-desktop{0%{opacity:1}10%,30%{opacity:0}40%{opacity:1;font-size:var(--floatLabelFontSizeDesktop);top:50%;top:var(--floatLabelTop)}50%{font-size:var(--floatLabelActiveFontSizeDesktop)}
@keyframes float-label-inactive-mobile{0%{font-size:var(--floatLabelActiveFontSizeMobile);top:-12px;top:var(--floatLabelActiveTop);transform:translateY(0)}50%{font-size:var(--floatLabelActiveFontSizeMobile)}
@keyframes float-label-inactive-desktop{0%{font-size:var(--floatLabelActiveFontSizeDesktop);top:-12px;top:var(--floatLabelActiveTop);transform:translateY(0)}50%{font-size:var(--floatLabelActiveFontSizeDesktop)}
@keyframes fadeIn{0%{opacity:0}40%{opacity:0}
@keyframes checkbox-label-marker-expansion{0%{transform:scale(0)}
@keyframes slideOpen{0%{transform:translateX(100%)}
@keyframes slideClosed{0%{transform:translateX(0)}
@keyframes topLineAnimation{0%{transform:translateY(0) rotate(0)}33%{transform:translateY(330%) rotate(0);transform:translateY(var(--verticalDistance)) rotate(0)}66%{transform:translateY(330%) rotate(90deg);transform:translateY(var(--verticalDistance)) rotate(90deg)}
@keyframes middleLineAnimation{0%{opacity:1}33%{opacity:1}34%{opacity:0}
@keyframes bottomLineAnimation{0%{transform:translateY(0) rotate(0)}33%{transform:translateY(calc(-1 * 330%)) rotate(0);transform:translateY(var(--negativeVerticalDistance)) rotate(0)}66%{transform:translateY(calc(-1 * 330%)) rotate(0);transform:translateY(var(--negativeVerticalDistance)) rotate(0)}
@keyframes dash{0%{stroke-dashoffset:25}
@keyframes sb-loadingIndicator-slide{0%{transform:translateX(-100%)}
@keyframes sb-loadingIndicator-slideToCenter{0%{transform:translateX(-100%)}
@keyframes sb-loadingIndicator-expand{0%{width:100%;left:0}50%{background:hsl(var(--colorGreenAccentHsl));box-shadow:0 1px calc(4px + 1px) hsl(var(--colorGreenAccentHsl)/50%);box-shadow:0 1px calc(var(--indicatorHeight) + 1px) hsl(var(--colorGreenAccentHsl)/50%)}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes modal_fadeIn__jKKUD{0%{opacity:0}
@keyframes cup-writing_dash__PlgWx{0%{fill:rgba(0,0,0,0)}25%{fill:rgba(0,0,0,0)}75%{fill:var(--careersCupNameColor)}
```
</details>

### Hover State CSS (Intercepted)

**5 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
@media (hover:hover) and (pointer:fine){.sb-iconButton:active .sb-icon-hover,.sb-iconButton:hover .sb-icon-hover{transform:scale(1);fill:currentColor}

.sb-iconButton-highContrast:hover{transform:scale(1.05);opacity:1}

.sb-textLink:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{-webkit-text-decoration:none;text-decoration:none}

.sb-button--default.sb-button--rewardsGreen:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--default:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorGreenAccentHsl)/10%)}

.sb-button--default.sb-button--houseGreen:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorHouseGreenHsl)/10%)}

.sb-button--default.sb-button--black:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--default.sb-button--rewardsDefault:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorBlack10)}

.sb-button--default.sb-button--red:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorRedHsl)/10%)}

.sb-button--default.sb-button--darkTheme:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--default.sb-button--white:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorBlack20)}

.sb-button--default.sb-button--gold:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorBlack20)}

.sb-button--positive.sb-button--rewardsGreen:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--positive:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorGreenAccentHsl)/90%);border-color:hsl(var(--colorGreenAccentHsl)/90%)}

.sb-button--positive.sb-button--houseGreen:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorHouseGreenHsl)/90%);border-color:hsl(var(--colorHouseGreenHsl)/90%)}

.sb-button--positive.sb-button--black:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--positive.sb-button--rewardsDefault:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorBlack70);border-color:var(--colorBlack70)}

.sb-button--positive.sb-button--darkTheme:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--positive.sb-button--white:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorWhite80);border-color:var(--colorWhite80)}

.sb-button--positive.sb-button--gold:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorGoldLightHsl));border-color:hsl(var(--colorGoldLightHsl))}

.sb-button--positive.sb-button--red:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorRedHsl)/88%);border-color:hsl(var(--colorRedHsl)/88%)}

.sb-button--text.sb-button--rewardsGreen:not(.sb-button--loading):not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--text:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorGreenAccentHsl)/8%)}

.sb-button--text.sb-button--houseGreen:not(.sb-button--loading):not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorHouseGreenHsl)/10%)}

.sb-button--text.sb-button--black:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--text.sb-button--rewardsDefault:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorBlack6)}

.sb-button--text.sb-button--darkTheme:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover,.sb-button--text.sb-button--white:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:var(--colorWhite10)}

.sb-button--text.sb-button--gold:not(.sb-button--disabled):not(.sb-button--nonInteractive):not(.sb-button--loading):hover{background-color:hsl(var(--colorGoldHsl)/10%)}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 310 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**13 breakpoints** read from the live `@media` rules (not guessed):
`375px` · `420px` · `421px` · `480px` · `767px` · `768px` · `850px` · `856px` · `1024px` · `1280px` · `1520px` · `1600px` · `1702px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×236 · `19px`×28 · `14px`×24 · `24px`×15 · `13px`×4 · `10px`×1

**Radius scale** (× = paint count): `50px`×18 · `8px`×1

**Weights** (× = paint count): `400`×265 · `600`×33 · `700`×8 · `300`×2

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.24) 0px 2px 4px 0px
rgba(0, 0, 0, 0.1) 0px 11px 15px 0px, rgba(0, 0, 0, 0.06) 0px 9px 46px 8px, rgba(0, 0, 0, 0.07) 0px 24px 38px 3px
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.07) 0px 0px 2px 0px
rgba(0, 0, 0, 0.1) 0px -1px 3px 0px, rgba(0, 0, 0, 0.06) 0px -2px 2px 0px, rgba(0, 0, 0, 0.07) 0px 0px 2px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:#ffffff; color:rgba(0,0,0,.87); font-family:SoDoSans,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight:400; font-size:1.4rem }
@media (min-width: 768px) body { font-size:1.6rem }
nav { background-color:#ffffff!important }
nav { box-shadow:0 1px 3px rgba(0,0,0,.1),0 2px 2px rgba(0,0,0,.06),0 0 2px rgba(0,0,0,.07) }
h1 { font-size:2em }
h1 { font-weight:600!important }
h1 { font-size:19px }
@media (min-width: 375px) h1 { font-size:22px }
@media (min-width: 768px) h1 { font-size:24px }
button { font-family:SodoSans_Normal; background:none; color:#008248; font-size:16px; background-color:initial }
a { color:currentColor }
a { font-family:SodoSans_Normal; background:none; color:#008248; font-size:13px; background-color:initial }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://starbucks.com | 2026-06-11T05:02:30.786Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*