--- 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) |
`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` | Cards, elevated surfaces | | Layered (Level 2) |
`rgba(0, 0, 0, 0.24) 0px 2px 4px 0px` | Cards, elevated surfaces | | Layered (Level 3) |
`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` | Cards, elevated surfaces | | Inset (Level 4) |
`rgba(0, 0, 0, 0.1) 0px 4px 3px -3px inset`,
`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 ``` _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 `