---
version: alpha
name: spotify.com
description: "Light product system built on #ffffff with #1f1f1f as the primary CTA accent. Type anchored in SpotifyMixUITitle at 24px / weight 700. Extracted automatically from https://spotify.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  spotify.com is built on a pure-white canvas (rgb(255,255,255)).
  The system uses rgb(31, 31, 31) as the singular interactive color.
  Generously rounded CTAs (50%) suggest approachable, content-first design alongside SpotifyMixUITitle as the primary typeface.
  SpotifyMixUITitle is paired with CircularSp-Arab for secondary roles.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  background: "#ffffff"
  surface-1: "rgba(255, 255, 255, 0.7)"
  surface-2: "rgba(255, 255, 255, 0.7)"
  ink: "#b3b3b3"
  ink-muted: "#121212"
  ink-subtle: "#292929"
  primary: "#1f1f1f"
  on-primary: "#ffffff"
  primary-hover: "#108393"
  hairline: "#b3b3b3"
  semantic-success: "#1ed760"
  semantic-warning: "#ffa42b"

typography:
  display-xl:
    fontFamily: "SpotifyMixUITitle, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: normal
    letterSpacing: 0
  body:
    fontFamily: "SpotifyMixUI, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  button:
    fontFamily: "SpotifyMixUI, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: normal
    letterSpacing: 0
  mono:
    fontFamily: "SpotifyMixUI, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 32px
  lg: 500px
  xl: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 12px
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 12px
  button-icon-button:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
  card-standard-card:
    backgroundColor: "transparent"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 12px
  input-text-input:
    backgroundColor: "{colors.on-primary}"
    textColor: "#000000"
    typography: "{typography.mono}"
    rounded: "{rounded.none}"
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 16px 16px 8px

extracted_at: "2026-06-11T05:02:29.471Z"
completeness: 73
scoreVersion: "v2"

---

# Design System — spotify.com
> Extracted automatically by Prism from https://spotify.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**: moderate  |  **Motion**: subtle  |  **Weight**: heavy  |  **Aesthetic**: soft-rounded

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (SpotifyMixUI) | "Popular albums and singles" |
| Color assertion | dual-accent | #1f1f1f |
| Whitespace | moderate | section rhythm 40px |
| Interaction | subtle | 1 keyframes, 22 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · soft-pill · subtle-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(31, 31, 31)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 40px between major bands. Card padding: 24px.
> - **Default radius**: 8px 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

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

Headlines are set in **SpotifyMixUITitle**, a sans-serif display face (the dominant type signature, e.g. "Popular albums and singles" at 24px). Body text is set in **SpotifyMixUI**. Headlines use weight 700 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Grey (`#b3b3b3`). **Near-Black** (`#1f1f1f`) provides interactive distinction without visual aggression. 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. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: CircularSp-Deva
- Primary text: Grey (`#b3b3b3`)
- Accent: Near-Black (`#1f1f1f`)
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: CircularSp-Deva, CircularSp-Grek, CircularSp-Arab, CircularSp-Cyrl, CircularSp-Hebr, SpotifyMixUI, SpotifyMixUITitle, SpotifyMixUITitleVariable

## 2. Color Palette & Roles

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

### Text & Content
- **Grey** (`#b3b3b3`): Primary body text
- **Text Negative** (`#f3727f`): Text (CSS var)
- **Text Positive** (`#1ed760`): Text (CSS var)
- **Text Announcement** (`#539df5`): Text (CSS var)
- **Near-Black** (`#121212`): Secondary text

### Accent & Interactive
- **#108393** (`#108393`): Interactive / accent
- **Slate Gray** (`#5c7b87`): Interactive / accent
- **#9a6d37** (`#9a6d37`): Interactive / accent
- **#983028** (`#983028`): Interactive / accent
- **#a84858** (`#a84858`): Interactive / accent
- **M Tricolor Red** (`#c02018`): Interactive / accent
- **#b00010** (`#b00010`): Interactive / accent

### Border & Divider
- **Light Grey** (`#c5c5c5`): Borders / dividers
- **Light Grey** (`#c1c1c1`): Borders / dividers

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

- `#000000` — Pure Black
- `#0000ee` — #0000ee
- `#1f1f1f` — Near-Black
- `#7c7c7c` — Slate Grey
- `#9d968e` — Cool Gray
- `rgba(118, 118, 118, 0.3)` — Translucent Stone (30%)
- `#535353` — Charcoal
- `#767680` — Slate Grey
- `#73777c` — Slate Grey
- `#333333` — Charcoal
- `#cf4740` — Vermillion
- `#c80000` — #c80000
- `#783028` — #783028
- `#102038` — Navy Blue
- `#b03038` — #b03038
- `#b02818` — #b02818
- `#e00808` — Red
- `#b16133` — Terracotta
- `#6f787d` — Slate Gray
- `#387880` — #387880
- `#6e7882` — Slate Gray
- `#0068b8` — #0068b8
- `#402828` — Charcoal
- `#e02818` — M Tricolor Red
- `#303838` — Charcoal
- `#405820` — #405820
- `#1f80a5` — #1f80a5
- `#956d6d` — Stone
- `#6e7881` — Slate Gray
- `#607880` — Slate Gray
- `#7c766a` — Stone
- `#d02820` — M Tricolor Red
- *…+20 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--encore-overlay-drop-shadow`: `0 4px 6px #0000004d`
- `--encore-overlay-box-shadow`: `0 4px 12px 0 #0000004d`
- `--encore-focus-box-shadow`: `0 3px 0 0`

**Motion Token**
- `--scrollAnimationRangeStart`: `0px`
- `--encore-productive-exit-duration`: `.2s`
- `--scrollAnimationRangeEnd`: `0px`

**Spacing Token**
- `--content-spacing`: `16px`
- `--encore-spacing-looser-4`: `64px`
- `--encore-spacing-looser-6`: `128px`
- `--encore-spacing-looser-5`: `96px`

**Border Radius Token**
- `--encore-corner-radius-larger-2`: `8px`
- `--encore-border-radius-rounded`: `9999px`
- `--encore-corner-radius-larger`: `6px`
- `--encore-corner-radius-base`: `4px`

**Z-Index Token**
- `--encore-z-index-popover`: `1060`
- `--encore-z-index-dialog`: `1050`
- `--encore-z-index-skiplink`: `9999`
- `--top-bar-z-index`: `1`

**Other tokens**
- `--text-negative`: `#f3727f`
- `--encore-text-size-smaller-2`: `.75rem`
- `--encore-text-size-larger-3`: `3rem`
- `--encore-text-size-larger-5`: `6rem`
- `--start-gradient-color`: `rgb(0, 0, 0)`
- `--encore-text-size-base`: `1rem`
- `--text-subdued`: `#b3b3b3`
- `--text-warning`: `#ffa42b`

## 3. Typography Rules

### Font Families
- **Primary**: `SpotifyMixUI`
- **Secondary**: `CircularSp-Deva`
- **Font 3**: `CircularSp-Grek`
- **Font 4**: `CircularSp-Arab`
- **Font 5**: `CircularSp-Cyrl`

### Custom Fonts Loaded
- **CircularSp-Deva** weight 800 (normal)
- **CircularSp-Deva** weight 700 (normal)
- **CircularSp-Deva** weight 400 (normal)
- **CircularSp-Grek** weight 800 (normal)
- **CircularSp-Grek** weight 700 (normal)
- **CircularSp-Grek** weight 400 (normal)
- **CircularSp-Arab** weight 800 (normal)
- **CircularSp-Arab** weight 700 (normal)
- **CircularSp-Arab** weight 400 (normal)
- **CircularSp-Cyrl** weight 800 (normal)
- **CircularSp-Cyrl** weight 700 (normal)
- **CircularSp-Cyrl** weight 400 (normal)
- **CircularSp-Hebr** weight 800 (normal)
- **CircularSp-Hebr** weight 700 (normal)
- **CircularSp-Hebr** weight 400 (normal)
- **SpotifyMixUI** weight 700 (normal)
- **SpotifyMixUI** weight 400 (normal)
- **SpotifyMixUITitle** weight 800 (normal)
- **SpotifyMixUITitle** weight 700 (normal)
- **SpotifyMixUITitleVariable** weight 100 1000 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | SpotifyMixUITitle | 24px | 700 | normal | normal | Main headline (h2) |
| Card Title | SpotifyMixUI | 16px | 400 | normal | normal | Card headings |
| Button Large | SpotifyMixUI | 16px | 700 | normal | normal | Button label (16px) |
| Button | SpotifyMixUI | 14px | 700 | normal | normal | Button label (14px) |
| Input | SpotifyMixUI | 13.3333px | 400 | normal | normal | Form input (13.3333px) |

### Full Font Size Scale

Sizes detected in the design (descending): `24px`, `16px`, `14px`, `13.33px`, `12px`, `11px`, `10.50px`

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

## 4. Component Stylings

### Buttons

**Secondary**
- Background: `#1f1f1f` `{colors.primary}`
- Text: `#ffffff` `{colors.on-primary}`
- Padding: 12px
- Radius: 50%
- Font: 16px weight 400
- Use: Secondary action
- Hover: transform: `matrix(1.04, 0, 0, 1.04, 0, 0)`

**Pill**
- Background: `transparent`
- Text: `#b3b3b3` `{colors.hairline}`
- Padding: 12px
- Radius: 9999px
- Font: 16px weight 400
- Use: Status pills, tags, chips
- Hover: transform: `matrix(1.04, 0, 0, 1.04, 0, 0)`

**Icon Button**
- Background: `transparent`
- Text: `#b3b3b3` `{colors.hairline}`
- Padding: 0px
- Radius: 9999px
- Font: 16px weight 400
- Use: Toolbar/UI icons
- Hover: transform: `matrix(1.04, 0, 0, 1.04, 0, 0)`

**Pill**
- Background: `transparent`
- Text: `#b3b3b3` `{colors.hairline}`
- Padding: 8px 0px
- Radius: 9999px
- Font: 16px weight 700
- Use: Status pills, tags, chips
- Hover: transform: `matrix(1.04, 0, 0, 1.04, 0, 0)`

**Icon Button**
- Background: `#1f1f1f` `{colors.primary}`
- Text: `#b3b3b3` `{colors.hairline}`
- Padding: 8px
- Radius: 9999px
- Font: 13.3333px weight 400
- Use: Toolbar/UI icons
- Hover: transform: `matrix(1.04, 0, 0, 1.04, 0, 0)`

### Cards & Containers

**Standard Card**
- Background: `transparent`
- Padding: 12px
- Radius: 6px
- Use: Content containers, listing items

### Inputs & Forms

**Text Input**
- Background: `#ffffff` `{colors.on-primary}`
- Text: `#000000`
- Padding: 0px
- Radius: 0px
- Border: 1px solid rgb(193, 193, 193)
- Font: 13.3333px weight 400
- Use: Text fields, search inputs
- Focus: cursor: `auto`

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 16px 16px 8px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky flex nav — N/A items
- Hover: transform: `matrix(1, 0, 0, 1, 0, 0)`


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **hover:** transform applied
- **Input**:
  - **focus:** shadow added
- **NavLink**:
  - **hover:** transform applied

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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(31, 31, 31)"
      fg: "rgb(255, 255, 255)"
    hover:
      bg: "transparent"
      fg: "inherit"
  input:
    default:
      bg: "rgb(31, 31, 31)"
      fg: "rgb(255, 255, 255)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(0, 0, 238)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
    hover:
      bg: "transparent"
      fg: "inherit"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(179, 179, 179)"
      shadow: "rgb(128, 128, 128) 0px 0px 5px 0px"
```

**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
- **3 shape(s)** in this system: `Secondary`, `Pill`, `Icon Button`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

## 5. Layout Principles

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

### Grid
Single column, centered content

### Max Width
1955px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 40px |
| 3xl | 64px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `50%` |
| Cards & Containers | `6px` |
| Inputs & Forms | `0px` |
| Navigation | `none` |
| Page Body | `0px` |
| Primary Input | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 2px, 4px, 6px, 8px, 32px, 500px, full/pill (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

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

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | 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:** 59px tall (not full-viewport)
- **Heading:** "Your Library" — 16px 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:** unknown — Layout not classified
- **Height:** 754px
- **Logo:** ✗ absent
- **Nav links:** 7 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 5 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1005×314px (aspect 3.2:1)
- **Gap:** 24px between cards
- **Content:** ✓ image
- **Image position:** left
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~3.2:1 aspect ratio. Each card has an image at the left.

### Footer Pattern

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

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgb(128, 128, 128) 0px 0px 5px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgb(18, 18, 18) 0px 1px 0px 0px`,<br>`rgb(124, 124, 124) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.5) 0px 2px 4px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.5) 0px 8px 24px 0px` | Cards, elevated surfaces |

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

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-in` | Ease In — Accelerating |
| `cubic-bezier(0.3,0,0,1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--encore-productive-exit-duration` | `.2s` | Normal |

### Copy-Paste Transition Snippets

**Background**
```css
transition: background 0.5s cubic-bezier(0.3, 0, 0.4, 1);
```

**Opacity**
```css
transition: opacity 0.3s ease-in;
```

**Background**
```css
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
```

**All Props**
```css
transition: width 0.22s ease-in;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `onetrust-fade-in` | Fade | opacity | Element entrance |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `220ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 1 unique animation (1 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use SpotifyMixUI as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use Near-Black (`#1f1f1f`) as the primary accent — it's the brand's signature interactive color
- Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
- Apply 12px padding inside cards — matches the design system's content breathing room
- Use 6px border-radius on cards — consistent with the grid card corners
- Style form inputs with a `1px solid rgb(193, 193, 193)` border — use border-based inputs, not floating labels or underline-only
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a left image — imagery is part of the card identity, not optional

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top
- Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)


## 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(31, 31, 31)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(31, 31, 31)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 400px | Single column, compact spacing |
| Mobile | 479px | Single column, compact spacing |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1023px | Multi-column grids begin |
| Desktop | 1100px | Full feature layout |
| Desktop | 1279px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| nav | display | `flex` | `block` |
| nav | flex-direction | `column` | `row` |
| nav | height | `754px` | `1065px` |
| button | padding | `12px` | `0px` |
| button | font-size | `16px` | `13px` |
| button | width | `48px` | `94px` |
| card | padding | `12px` | `8px` |
| card | width | `195.5px` | `168px` |
| sidebar | width | `1424px` | `390px` |
| sidebar | display | `flex` | `block` |

### Collapsing Strategy
- Navigation: flex → block on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 12px 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):

*No major structural differences detected between desktop and mobile widgets. The same blueprints scale rather than collapse — verify by inspecting actual mobile render.*


## 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.*

- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: non-rectangular shapes (10)

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

**Hero Image (above-fold dominant visual):**
- Aspect: 1:1 (square / portrait)
- Rendered size: 172×172px
- *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): 0 (0%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 54 (100%)

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

**Average rendered image size:** 172×172px
**Above-fold image count:** 40 / 54

**Decorative Patterns Detected:**
- 3 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 background pattern (non-photo url() backgrounds) — textures/illustrations as backdrops

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**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: Grey (`#b3b3b3`)
- Accent: Near-Black (`#1f1f1f`)
- Border: Grey (`#b3b3b3`)
- Font: SpotifyMixUI
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 16px SpotifyMixUI weight 700, line-height normal, color #b3b3b3."
- "Create the primary CTA button: `#1f1f1f` background, `#ffffff` text, 50% border-radius, 12px padding, 700 weight, SpotifyMixUI font."
- "Design a card on `transparent` background. Border: none. Radius: 6px. Shadow: none. Padding: 12px."
- "Build navigation: static on `#ffffff`. SpotifyMixUI 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 SpotifyMixUI, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Near-Black (`#1f1f1f`) is the sole interactive color. On hover → #108393 (`#108393`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.3,0,0.4,1)`. Timing: 200ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `50%`, cards at `6px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). 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-hairline: #b3b3b3;
  --ca-ink-muted: #121212;
  --ca-ink-subtle: #292929;
  --ca-primary: #1f1f1f;
  --ca-primary-hover: #108393;
  --ca-semantic-success: #1ed760;
  --ca-semantic-warning: #ffa42b;
}

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

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 40px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 32px;
  --ca-radius-lg: 500px;
  --ca-radius-xl: 9999px;
  --ca-radius-full: 9999px;
}
```


## 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: 900px
    width: full-bleed
    layout: block
    children: 1
  - section: navigation
    tag: div
    classes: ["Root", "global-nav", "centered-layout"]
    height: 900px
    width: full-bleed
    layout: block
    children: 4
  - section: navigation
    tag: nav
    classes: ["zOQ0BU6AULAqd7Qd"]
    height: 754px
    width: 331px
    layout: flex-column justify=normal
    children: 1
  - section: feature-section
    tag: main
    classes: ["J6wP3V0xzh0Hj_MS"]
    height: 754px
    width: 1085px
    layout: block
    children: 2
  - section: feature-section
    tag: section
    classes: ["JlQyoTD6puMgqY_y", "CDyHWsKVsLAC4HFx"]
    height: 1701px
    width: 1085px
    layout: block
    children: 2
    padding: "4px 0px 32px"
  - section: feature-section
    tag: div
    classes: ["main-view-container"]
    height: 754px
    width: 1085px
    layout: block
    children: 4
  - section: feature-section
    tag: div
    classes: ["main-view-container__scroll-node", "qLlzLghnvcCySJ8T"]
    height: 754px
    width: 1085px
    layout: flex-row justify=normal
    children: 3
  - section: feature-section
    tag: div
    classes: ["main-view-container__scroll-node-child"]
    height: 754px
    width: 1085px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["l3tPikCftuELMOzz", "e4IK04uNVRsB6jbO", "yTHNsGSMiG01kxo3"]
    height: 329px
    width: 1005px
    layout: flex-column justify=normal
    children: 2
  - section: section
    tag: section
    classes: ["q8mQFn7r8UYsKdHE", "tMFkXbMSXNUegQIu", "aIU4qABgiIgjAEyD", "LUVEWqx9qW4kwbPr"]
    height: 134px
    width: 315px
    layout: flex-column justify=center
    children: 2
    bg: "rgb(31, 31, 31)"
    tone: dark
    padding: "16px 20px"
  - section: section
    tag: section
    classes: ["q8mQFn7r8UYsKdHE", "tMFkXbMSXNUegQIu", "aIU4qABgiIgjAEyD", "LUVEWqx9qW4kwbPr"]
    height: 134px
    width: 315px
    layout: flex-column justify=center
    children: 2
    bg: "rgb(31, 31, 31)"
    tone: dark
    padding: "16px 20px"
  - section: feature-section
    tag: section
    classes: ["l3tPikCftuELMOzz", "e4IK04uNVRsB6jbO", "yTHNsGSMiG01kxo3"]
    height: 306px
    width: 1005px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: section
    classes: ["l3tPikCftuELMOzz", "e4IK04uNVRsB6jbO", "yTHNsGSMiG01kxo3"]
    height: 328px
    width: 1005px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: section
    classes: ["l3tPikCftuELMOzz", "e4IK04uNVRsB6jbO", "yTHNsGSMiG01kxo3"]
    height: 304px
    width: 1005px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: section
    classes: ["l3tPikCftuELMOzz", "e4IK04uNVRsB6jbO", "yTHNsGSMiG01kxo3"]
    height: 304px
    width: 1005px
    layout: flex-column justify=normal
    children: 2
  - section: footer
    tag: div
    classes: ["main-view-container__mh-footer-container"]
    height: 444px
    width: 1085px
    layout: block
    children: 2
    bg: "rgb(18, 18, 18)"
    tone: dark
    padding: "40px 0px 0px"
  - section: navigation
    tag: nav
    classes: ["esBjsh"]
    height: 355px
    width: 1085px
    layout: block
    children: 3
    bg: "rgb(18, 18, 18)"
    tone: dark
    vertical-padding: ~24px
    padding: "8px 32px 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:
    - "Trending songs"
  ctas:
    - "Premium"
    - "Install App"
    - "Sign up"
    - "Log in"
    - "Create playlist"
    - "Browse podcasts"
  navigation:
    - "Spotify"
    - "Install App"
    - "Skip to main content"
    - "Browse podcasts"
    - "Legal"
    - "Safety & Privacy Center"
    - "Privacy Policy"
    - "About Ads"
    - "Accessibility"
    - "Cookies"
```

**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:
  product:
    count: 50
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**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">
  Action
</button>
```
_Source pattern detected: padding `12px` · radius `50%` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `12px` · radius `6px` · shadow `none`_

**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** 5 · **social** 3 · **legal** 4 · **other** 48

**Signals:** 5/60 links carry a featured image · dominant link roles: inline-link (48), footer-link (7), navigation (5).


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 21 | 25 | 15 named colors |
| Typography | 13 | 20 | 5 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 7 | 10 | 139 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 (CircularSp-Deva, CircularSp-Grek, CircularSp-Arab)** — 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 |

### Per-section confidence

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

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'CircularSp-Deva';
  /* src: url('/fonts/CircularSp-Deva.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Deva';
  /* src: url('/fonts/CircularSp-Deva.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Deva';
  /* src: url('/fonts/CircularSp-Deva.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Grek';
  /* src: url('/fonts/CircularSp-Grek.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Grek';
  /* src: url('/fonts/CircularSp-Grek.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Grek';
  /* src: url('/fonts/CircularSp-Grek.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Arab';
  /* src: url('/fonts/CircularSp-Arab.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Arab';
  /* src: url('/fonts/CircularSp-Arab.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Arab';
  /* src: url('/fonts/CircularSp-Arab.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Cyrl';
  /* src: url('/fonts/CircularSp-Cyrl.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Cyrl';
  /* src: url('/fonts/CircularSp-Cyrl.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Cyrl';
  /* src: url('/fonts/CircularSp-Cyrl.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Hebr';
  /* src: url('/fonts/CircularSp-Hebr.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Hebr';
  /* src: url('/fonts/CircularSp-Hebr.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CircularSp-Hebr';
  /* src: url('/fonts/CircularSp-Hebr.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUI';
  /* src: url('/fonts/SpotifyMixUI.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUI';
  /* src: url('/fonts/SpotifyMixUI.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUITitle';
  /* src: url('/fonts/SpotifyMixUITitle.woff2') format('woff2 supports variations'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUITitle';
  /* src: url('/fonts/SpotifyMixUITitle.woff2') format('woff2 supports variations'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SpotifyMixUITitleVariable';
  /* src: url('/fonts/SpotifyMixUITitleVariable.woff2') format('woff2 supports variations'); */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes sdp3k891J8wmUTX1 { ... }
@keyframes glue-keyframes-rotate { ... }
@keyframes glue-keyframes-fade-in { ... }
@keyframes oJb4AJ6P5r0rFBOL { ... }
@keyframes H3qdG4N0BMAEDKVy { ... }
@keyframes dhgdKv_u_5AZOJJ_ { ... }
@keyframes mDFU7dO0yuwdbqzQ { ... }
@keyframes hEPD4r_3XMcGS9nc { ... }
@keyframes os-size-observer-appear-animation { ... }
@keyframes ZTW_mugOSsLC4tie { ... }
@keyframes _CRwrkc10UsnhBdg { ... }
@keyframes XPPaSWFU_JfyiTDX { ... }
@keyframes fcb7i1YUktEX45VG { ... }
@keyframes YN26h6scVvMidCMU { ... }
@keyframes ALTKluzTmM0UQHBM { ... }
@keyframes _k7esQ1E8gZHcGBd { ... }
@keyframes nFXVVYqVOksPESNF { ... }
@keyframes aWSBbzuXvAsMWoxX { ... }
@keyframes UTD1EDfNnu4yuSB_ { ... }
@keyframes RhKQxSFRwmIEm444 { ... }
@keyframes gk6O5ZbIR8Q2keRe { ... }
@keyframes WSQonKOsIgNqeltT { ... }
@keyframes RJGKfPc7lywQb20A { ... }
@keyframes cVSPqah3j4URu9Fj { ... }
@keyframes aDdYMXxZPUg1E31R { ... }
@keyframes KhTDUw6bHvUNISKc { ... }
@keyframes HY9Llq2t2fcWFPw9 { ... }
@keyframes _yLJcG7uCEFxQAAw { ... }
@keyframes TKKeX76gcyMG1Vp5 { ... }
@keyframes BS6xAdPKHA_tSHZF { ... }
@keyframes Cu6TD3QVv3gknrE_ { ... }
@keyframes JinXM5EViKkmRv5g { ... }
@keyframes DuyYbjxFKJQbx0X6 { ... }
@keyframes VoBxUly8z_gZM2CD { ... }
@keyframes BKunRzRbjJ8Sj3or { ... }
@keyframes CrC9WHiOXQIo2Ezz { ... }
@keyframes PM3yG5WWpg8FtBiq { ... }
@keyframes EE6CdwBuZeAXAHWC { ... }
@keyframes UY9fkMu2N4YagKBQ { ... }
@keyframes icz96MJmUdAWFWRS { ... }
@keyframes Tg2uPdfqTEC8KNNe { ... }
@keyframes v_l0fv5yCIcP81lH { ... }
@keyframes mioB6RQFuQP05cZ7 { ... }
@keyframes R7YQwpMkONApxHgA { ... }
@keyframes Daz91KwsOQsjZTic { ... }
@keyframes m_WRR0BLMXbE976p { ... }
@keyframes bJSGr_n8Eu0tzSj2 { ... }
@keyframes YFit0YkZK54zwtBh { ... }
@keyframes sZUdcvI88wjFQICL { ... }
@keyframes oCuZlfR2J005KuPJ { ... }
@keyframes encore-fade-in { ... }
@keyframes progress-circle-indeterminate-animation { ... }
@keyframes progress-dots-animation { ... }
@keyframes cOf6mSMS3i4jgFJA { ... }
@keyframes spinner-spin { ... }
@keyframes overlay-spin { ... }
@keyframes cZf7mZFDJdIQ29UY { ... }
@keyframes dHEDH50srNcN45sw { ... }
@keyframes _sIzGpHuIAoSKDHP { ... }
@keyframes MgdJ1kA78KMqvq_k { ... }
@keyframes ySiYDvQsxhKPyiWI { ... }
@keyframes HcnDd3O4Fw06QbPc { ... }
@keyframes kQ6v69gjIAf8vgJ6 { ... }
@keyframes hZ8VoskJk4BApaTv { ... }
@keyframes SHLY6DFNmJQjPs2O { ... }
@keyframes wLcimcGQwtIfLlqR { ... }
@keyframes Pjbj_6y2R0svd_HS { ... }
@keyframes iros32N90OYXmvPX { ... }
@keyframes GqogU7pOHJwE3WR0 { ... }
@keyframes yOFKDkxRwY_6WX5O { ... }
@keyframes cRSeq7SCf_0FvGcb { ... }
@keyframes P5_YK6MOblsA9Vvx { ... }
@keyframes Oc1lL4ol5qQhHlvG { ... }
@keyframes Sh1RKWoTxdwY5T2S { ... }
@keyframes a3HPQKwc9ZbZ2Si4 { ... }
@keyframes JVwlxtUkcb4IYjE3 { ... }
@keyframes LrCjqEUN_dYhyJII { ... }
@keyframes dnuW6UIhiUsw22F8 { ... }
@keyframes PromotionButtonTooltip-module_fadeIn__5GEyX { ... }
@keyframes zzSINO7Aptxb4k9M { ... }
@keyframes e54TsUY86uwx3nS5 { ... }
@keyframes TFoZTvqAEM6iVn3o { ... }
@keyframes VE4J3RQvE00U6gmw { ... }
@keyframes nICy6knMsFVS_G1j { ... }
@keyframes Nf9e2m6pD5sI_IaP { ... }
@keyframes CWircKuKPkUlNcW2 { ... }
@keyframes UZNDYbySn4L9MToL { ... }
@keyframes ZoA48O3OJcS88FhA { ... }
@keyframes yT4didF3iDIoYHzA { ... }
@keyframes tC3JRjnSs942aLBZ { ... }
@keyframes WU0Yf6Udj6EkcdFA { ... }
@keyframes MJzJ4b0IQ5F3B0bn { ... }
@keyframes kCEpsRVSF5k2G2Kh { ... }
@keyframes oQBl3dPAFnwAWYFf { ... }
@keyframes PQs7brw23h4uho51 { ... }
@keyframes X2QSn4U88SI01z9_ { ... }
@keyframes onetrust-fade-in { ... }
```

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

```css
@keyframes sdp3k891J8wmUTX1{0%{opacity:.5;animation-timing-function:cubic-bezier(1,0,.7,1);transform:scale(1)}40%{opacity:.75;animation-timing-function:cubic-bezier(.3,0,0,1);transform:scale(1.3)}72.5%{opacity:.5;animation-timing-function:linear;transform:scale(1)}
@keyframes glue-keyframes-rotate{0%{transform:rotate(0)}
@keyframes glue-keyframes-fade-in{0%{opacity:0}
@keyframes oJb4AJ6P5r0rFBOL{0%{opacity:0}
@keyframes H3qdG4N0BMAEDKVy{0%{opacity:0}
@keyframes dhgdKv_u_5AZOJJ_{0%{transform:rotate(0)}
@keyframes mDFU7dO0yuwdbqzQ{0%{opacity:0}
@keyframes hEPD4r_3XMcGS9nc{0%{max-width:500px}
@keyframes os-size-observer-appear-animation{0%{cursor:auto}
@keyframes ZTW_mugOSsLC4tie{0%{opacity:1;display:block}
@keyframes _CRwrkc10UsnhBdg{to{opacity:1}}
@keyframes XPPaSWFU_JfyiTDX{0%{transform:translateY(10%)}}
@keyframes fcb7i1YUktEX45VG{0%{transform:translate(-100%)}
@keyframes YN26h6scVvMidCMU{0%{transform:rotate(0)}
@keyframes ALTKluzTmM0UQHBM{0%{opacity:0}
@keyframes _k7esQ1E8gZHcGBd{0%{transform:scale(0)}
@keyframes nFXVVYqVOksPESNF{0%{transform:scale(1)}35%{transform:scale(1.1)}
@keyframes aWSBbzuXvAsMWoxX{0%{transform:translate(-100%)}
@keyframes UTD1EDfNnu4yuSB_{0%{transform:translate(-100%)}
@keyframes RhKQxSFRwmIEm444{0%{transform:translate(-100%)}
@keyframes gk6O5ZbIR8Q2keRe{0%{--start-gradient-color:black}
@keyframes WSQonKOsIgNqeltT{0%{--end-gradient-color:#0000}
@keyframes RJGKfPc7lywQb20A{0%{opacity:0}
@keyframes cVSPqah3j4URu9Fj{0%{pointer-events:none}
@keyframes aDdYMXxZPUg1E31R{0%{transform:translate(-100%)}
@keyframes KhTDUw6bHvUNISKc{99%{visibility:hidden}
@keyframes HY9Llq2t2fcWFPw9{0%{opacity:0;transform:scale(.9)}
@keyframes _yLJcG7uCEFxQAAw{0%{opacity:0;transform:translateY(50%)}
@keyframes TKKeX76gcyMG1Vp5{0%{max-width:100%;padding-inline:8px;display:flex}
@keyframes BS6xAdPKHA_tSHZF{0%{max-width:0;padding-inline:0}
@keyframes Cu6TD3QVv3gknrE_{0%{transform:rotate(0)}
@keyframes JinXM5EViKkmRv5g{0%{opacity:0}
@keyframes DuyYbjxFKJQbx0X6{0%{transform:rotate(0)}
@keyframes VoBxUly8z_gZM2CD{0%{opacity:0}
@keyframes BKunRzRbjJ8Sj3or{80%{transform:scale(1)}
@keyframes CrC9WHiOXQIo2Ezz{20%{opacity:1}
@keyframes PM3yG5WWpg8FtBiq{80%{transform:scale(1)}
@keyframes EE6CdwBuZeAXAHWC{20%{opacity:1}
@keyframes UY9fkMu2N4YagKBQ{0%{transform:rotate(0)}
@keyframes icz96MJmUdAWFWRS{0%{opacity:0}
@keyframes Tg2uPdfqTEC8KNNe{0%{transform:rotate(0)}
@keyframes v_l0fv5yCIcP81lH{0%{transform:rotate(0)}
@keyframes mioB6RQFuQP05cZ7{0%{opacity:0}
@keyframes R7YQwpMkONApxHgA{0%{opacity:1;translate:0 -10px;scale:1}15%{opacity:.7;scale:.9}50%{translate:0 25%}
@keyframes Daz91KwsOQsjZTic{0%{transform:translate(-100%)}
@keyframes m_WRR0BLMXbE976p{0%{opacity:0}
@keyframes bJSGr_n8Eu0tzSj2{0%{opacity:1;transform:scale(1)}
@keyframes YFit0YkZK54zwtBh{0%{opacity:1;translate:0 -10px;scale:1}15%{opacity:.7;scale:.9}65%{translate:0 25%}
@keyframes sZUdcvI88wjFQICL{0%{opacity:1}
@keyframes oCuZlfR2J005KuPJ{0%{opacity:1;pointer-events:auto;display:block}1%{pointer-events:none;display:block}2%{opacity:0;pointer-events:none;display:none}98%{opacity:0;pointer-events:none;display:none}99%{pointer-events:auto;display:block}
@keyframes encore-fade-in{0%{opacity:0}
@keyframes progress-circle-indeterminate-animation{0%{stroke-dashoffset:calc(var(--encore-progress-circle-circumference)*-3/4);transform:rotate(0)}25%{stroke-dashoffset:calc(var(--encore-progress-circle-circumference)*-1/4);transform:rotate(270deg)}50%{stroke-dashoffset:calc(var(--encore-progress-circle-circumference)*-3/4)}
@keyframes progress-dots-animation{0%{opacity:.5;animation-timing-function:cubic-bezier(1,0,.7,1);transform:scale(1)}40%{opacity:.75;animation-timing-function:cubic-bezier(.3,0,0,1);transform:scale(1.3)}72.5%{opacity:.5;animation-timing-function:linear;transform:scale(1)}
@keyframes cOf6mSMS3i4jgFJA{0%{transform:translate(-100%)}
@-webkit-keyframes spinner-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}10%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(245deg);transform:rotate(245deg)}60%{-webkit-transform:rotate(700deg);transform:rotate(700deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}
@-webkit-keyframes overlay-spin{0%{opacity:1;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
@keyframes cZf7mZFDJdIQ29UY{0%{transform:rotate(0)}
@keyframes dHEDH50srNcN45sw{0%{opacity:0}
@keyframes _sIzGpHuIAoSKDHP{0%{transform:rotate(0)}
@keyframes MgdJ1kA78KMqvq_k{0%{opacity:0}
@keyframes ySiYDvQsxhKPyiWI{0%{transform:rotate(0)}
@keyframes HcnDd3O4Fw06QbPc{0%{opacity:0}
@keyframes kQ6v69gjIAf8vgJ6{0%{opacity:0}10%{opacity:1}50%{opacity:0}
@keyframes hZ8VoskJk4BApaTv{0%{transform:translate(-50%,-50%)rotate(0)}
@keyframes SHLY6DFNmJQjPs2O{0%{opacity:0}
@keyframes wLcimcGQwtIfLlqR{0%{transform:rotate(0)}
@keyframes Pjbj_6y2R0svd_HS{0%{opacity:0}
@keyframes iros32N90OYXmvPX{25%{transform:scaleY(.8)}50%{transform:scaleY(1.2)}75%{transform:scaleY(1.4)}}
@keyframes GqogU7pOHJwE3WR0{25%{transform:scaleY(1)}50%{transform:scaleY(.9)}75%{transform:scaleY(1.9)}}
@keyframes yOFKDkxRwY_6WX5O{25%{transform:scaleY(2)}50%{transform:scaleY(.8)}75%{transform:scaleY(1.2)}}
@keyframes cRSeq7SCf_0FvGcb{20%{transform:scaleY(2.5)}40%{transform:scaleY(1.4)}60%{transform:scaleY(1)}80%{transform:scaleY(.8)}}
@keyframes P5_YK6MOblsA9Vvx{0%{transform:translateY(-76%)}
@keyframes Oc1lL4ol5qQhHlvG{0%,to{transform:scale(1)}50%{transform:scale(.85)}}
@keyframes Sh1RKWoTxdwY5T2S{0%{transform:translate(-100%)}
@keyframes a3HPQKwc9ZbZ2Si4{0%,to{background-color:#fff;transform:translateY(0)}50%{background-color:#fff9;transform:translateY(-8px)}}
@keyframes JVwlxtUkcb4IYjE3{0%{transform:translate(-100%)}
@keyframes LrCjqEUN_dYhyJII{0%{opacity:.6}
@keyframes dnuW6UIhiUsw22F8{0%{color:var(--text-base,#ffffffe6)}
@keyframes PromotionButtonTooltip-module_fadeIn__5GEyX{0%{opacity:0}
@keyframes zzSINO7Aptxb4k9M{0%{opacity:.8}
@keyframes e54TsUY86uwx3nS5{0%{transform:translate(-100%)}
@keyframes TFoZTvqAEM6iV
```
</details>

### Brand Gradient Palette

**20 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(to right,#0000 0,var(--background-elevated-highlight);

/* Gradient 2 */
background: linear-gradient(var(--direction-and-possibly-color-interpolation);

/* Gradient 3 */
background: linear-gradient(to right,transparent,var(--background-elevated-highlight);

/* Gradient 4 */
background: linear-gradient(90deg,var(--carousel-start-chevron-gradient,#121212);

/* Gradient 5 */
background: linear-gradient(-90deg,var(--carousel-start-chevron-gradient,#121212);

```

### Hover State CSS (Intercepted)

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

```css
a:not([data-encore-id]):hover,a:not([data-encore-id]):focus,a:not([data-encore-id])[data-context-menu-open=true],[data-context-menu-open=true]>a:only-child{text-decoration:underline}

.link-subtle:hover,.link-subtle:focus{color:#fff}

:is(.LayoutResizer__resize-bar:focus-within,.LayoutResizer__resize-bar:hover,.LayoutResizer__resize-bar--resizing){opacity:1}

.fEThIghNSPAx5Xs3.WXUVXy433Xk07S0H:hover .vH8s0xuGZZAqkkUl{transition:transform .5s cubic-bezier(.47,0,.23,1.38);transform:translate(0)}

.fEThIghNSPAx5Xs3.WXUVXy433Xk07S0H:hover .SC_eWQl28srvyLED{visibility:visible}

.fEThIghNSPAx5Xs3.WXUVXy433Xk07S0H:hover .wJiY1vDfuci2a4db{opacity:.9}

.fEThIghNSPAx5Xs3.WXUVXy433Xk07S0H:hover .Q3fgyBaNgcu34CP1{color:var(--text-base);transition:transform .5s cubic-bezier(.47,0,.23,1.38);transform:translate(0)}

.KzLH25pAEr43wpSc[href]:hover,.KzLH25pAEr43wpSc[href]:focus{text-decoration:none}

.KzLH25pAEr43wpSc:not([aria-checked=true]):focus,.KzLH25pAEr43wpSc:hover{color:#fff;background-color:#ffffff1a;text-decoration:none}

.KzLH25pAEr43wpSc.zVA1h9TUy8QQBogj:hover,.KzLH25pAEr43wpSc.zVA1h9TUy8QQBogj:focus{background-color:unset;color:#ffffff80}

.jwSP8uJQs8LkqY11:hover,.jwSP8uJQs8LkqY11:focus,.jwSP8uJQs8LkqY11[data-context-menu-open=true]{background-color:#282828}

.Xju6pjWnQEjwZpra:hover,.Xju6pjWnQEjwZpra:focus-visible{background-color:var(--background-elevated-highlight)}

.Xju6pjWnQEjwZpra:hover .IzuKJ64rasikK0XE,.Xju6pjWnQEjwZpra:focus-visible .IzuKJ64rasikK0XE{stroke:var(--background-elevated-highlight)}

.mTKn24eZtKM0ouGv:hover{background-color:#ffffff1a}

.mTKn24eZtKM0ouGv:hover .oRDWpqn8DvUa34aE{outline:2px solid #3e3e3e}

.limNV6_vMAZGC3Os:hover,.limNV6_vMAZGC3Os:focus{transform:scale(1.1)}

.X8iDE4nRFc6Fz1ua:not(.iWYXfFRVugfeZGTY):hover{background-color:var(--background-elevated-highlight)}

.X8iDE4nRFc6Fz1ua:not(.iWYXfFRVugfeZGTY):hover .o1ikq4AVMKwiMyZ8{color:var(--text-base)}

.X8iDE4nRFc6Fz1ua:not(.iWYXfFRVugfeZGTY):hover .rQH34vQDHkghalLs{opacity:1}

.edvX5XPBIXITSQoH.z0smqp67A9oDXKgR,.edvX5XPBIXITSQoH.z_1UmucQ3lwW_FKQ,.edvX5XPBIXITSQoH:focus-within,.edvX5XPBIXITSQoH:hover{background-color:var(--background-elevated-highlight);width:88px}
```

> **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 2282 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**27 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`400px` · `425px` · `426px` · `479px` · `480px` · `500px` · `530px` · `550px` · `600px` · `615px` · `700px` · `767px` · `768px` · `769px` … (+13 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1544 · `14px`×362 · `13.3333px`×281 · `12px`×35 · `10.5px`×27 · `24px`×20 · `13px`×5 · `8px`×2

**Radius scale** (× = paint count): `6px`×255 · `9999px`×142 · `500px`×55 · `50%`×35 · `2px`×19 · `4px`×6 · `8px`×6 · `1px`×2

**Weights** (× = paint count): `400`×2154 · `700`×95 · `600`×27 · `500`×2

**Layout gaps** (× = paint count): `4px`×78 · `8px normal`×54 · `normal 12px`×54 · `8px`×24 · `8px 12px`×5 · `12px`×5 · `2px`×5 · `16px`×2

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.5) 0px 8px 24px 0px
rgba(0, 0, 0, 0.3) 0px 8px 8px 0px
rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset
rgba(0, 0, 0, 0.08) 0px 0px 4px 1px
```

### 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 { font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif)),sans-serif }
body { font-family:var(--encore-body-font-stack) }
body { color:#b3b3b3 }
header { gap:8px }
nav { gap:var(--panel-gap) }
h1 { color:inherit; font-family:var(--encore-text-font-family,var(--encore-body-font-stack)); font-size:var(--encore-text-size,var(--encore-text-size-base)); font-weight:var(--encore-text-weight,400) }
h1 { font-family:var(--encore-body-font-stack); font-size:var(--encore-text-size-base) }
h1 { font-weight:700 }
h1 { color:var(--text-base) }
h2 { color:inherit; font-family:var(--encore-text-font-family,var(--encore-body-font-stack)); font-size:var(--encore-text-size,var(--encore-text-size-base)); font-weight:var(--encore-text-weight,400) }
h2 { font-family:var(--encore-title-font-stack); font-weight:700 }
h2 { font-size:var(--encore-text-size-larger) }
```

> 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://spotify.com | 2026-06-11T05:02:29.506Z*
*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.*