---
version: alpha
name: Spotify
description: One electric-green pulse fired across an all-black stage of album art.
colors:
  on-surface-variant: "#B3B3B3"
  on-surface: "#FFFFFF"
  surface: "#000000"
  outline: "#535353"
  primary: "#1ED760"
  base: "#121212"
  elevated-surface: "#1F1F1F"
  surface-hover: "#333333"
  surface-raised: "#383838"
  hairline: "#7C7C7C"
  placeholder: "#C5C5C5"
  ink: "#101010"
  light-surface: "#EEEEEE"
  decorative-mauve: "#A16387"
  decorative-green: "#508162"
  decorative-clay: "#A3694F"
  decorative-teal: "#4F7F77"
  decorative-rose: "#A84858"
typography:
  micro-badge:
    fontFamily: SpotifyMixUI
    fontSize: 10.5px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0em
  small-footer-link:
    fontFamily: SpotifyMixUI
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  body-secondary:
    fontFamily: SpotifyMixUI
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  base-card-title-h1:
    fontFamily: SpotifyMixUI
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  section-heading-h2:
    fontFamily: SpotifyMixUI
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0em
rounded:
  album-art-card: 6px
  small-chip: 2px
  control-tile: 4px
  panel-inner: 8px
  sidebar-panel-large-surface: 16px
  search-capsule: 500px
  pill-button: 9999px
spacing:
  xs: 6px
  sm: 12px
  md: 24px
  lg: 48px
---
# Spotify — Style Reference
> One electric-green pulse fired across an all-black stage of album art.

**Theme:** dark

Spotify's web player is a near-black canvas that exists to make cover art and a single green accent glow. The palette is almost entirely grayscale — pure black chrome, a `#121212` content plane, and a short ladder of `#1F1F1F → #535353` surfaces stepped by luminance, not shadow — so that `#1ED760`, the brand green, reads as the only saturated thing on screen and is spent sparingly on the play affordance and brand mark. Type is Spotify's proprietary stack (SpotifyMixUI over the classic Circular family), heavy where it names a thing (700/800) and quiet gray `#B3B3B3` where it labels one. Everything actionable is a fully-round pill or a perfect circle; the white pill is the loudest button on the page and the green is reserved. Layout is a fixed dark shell — a persistent left library rail, a floating black top bar with a 500px search capsule — wrapping a scrolling grid of 6px-cornered cards. Depth comes from stacked near-blacks and hairline insets, never from color.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Spotify Green | `#1ED760` | `--color-green` | The one brand accent — play button fill, active/brand mark, focus. Never as a text color on body copy and never as a surface behind long text; it is a signal, not a background. |
| Pure Black | `#000000` | `--color-black` | Top bar and outermost chrome canvas; also the ink on the white primary pill. |
| Base | `#121212` | `--color-base` | Main content plane and left library rail — the "true" background the eye reads as neutral. |
| Elevated Surface | `#1F1F1F` | `--color-surface` | Cards on hover, the search input, icon buttons, sidebar cards — one luminance step above base. |
| Surface Hover | `#333333` | `--color-surface-hover` | Row/control hover fill, next step up the gray ladder. |
| Surface Raised | `#383838` | `--color-surface-raised` | Pressed/active control fill and higher tiles. |
| Muted Surface | `#535353` | `--color-surface-muted` | Disabled fills, scrubber track, subtle dividers. |
| Hairline | `#7C7C7C` | `--color-border` | The only border color — a 1px inset ring on inputs and outlined controls. |
| Primary Text | `#FFFFFF` | `--color-text` | Headings, titles, primary labels; also the primary button surface. |
| Muted Text | `#B3B3B3` | `--color-text-muted` | Secondary text — "Artist", subtitles, "Show all", inactive nav links. The single gray that does 90% of the labeling. |
| Placeholder | `#C5C5C5` | `--color-text-placeholder` | Input placeholder / faint helper text. |
| Ink | `#101010` | `--color-ink` | Text on light surfaces (e.g. on a white field). |
| Light Surface | `#EEEEEE` | `--color-surface-light` | Rare light fill — pressed white-pill / light control state. |
| Decorative Mauve | `#A16387` | `--color-decorative-mauve` | Auto-generated playlist/genre tile fill. |
| Decorative Green | `#508162` | `--color-decorative-green` | Auto-generated tile fill. |
| Decorative Clay | `#A3694F` | `--color-decorative-clay` | Auto-generated tile fill. |
| Decorative Teal | `#4F7F77` | `--color-decorative-teal` | Auto-generated tile fill. |
| Decorative Rose | `#A84858` | `--color-decorative-rose` | Auto-generated tile fill. |

The last five are the desaturated tones Spotify assigns to playlist and genre cards. They are *category color*, never UI chrome — keep them out of buttons, text, and structural surfaces.

## Tokens — Typography
### SpotifyMixUI — the UI face · `--font-ui`
- **Substitute:** Helvetica Neue, Arial, system-ui (the brand's own declared fallbacks)
- **Weights:** 700 (loaded); pairs with the Circular weight ladder below
- **Sizes:** 10.5px, 12px, 14px, 16px, 24px
- **Line height:** tight for UI — ~1.2–1.4
- **Letter spacing:** near-neutral *(inferred)*
- **Role:** Primary interface type across nav, cards, headings and body — the newer Spotify UI face, sitting in front of Circular in every stack.

### Circular (CircularSp) — the classic brand family · `--font-circular`
- **Substitute:** Inter, Helvetica Neue, Arial (Circular is proprietary)
- **Weights:** 400 Book, 700 Bold, 800 Black (all loaded across Latin, Cyrillic, Greek, Arabic, Hebrew, Devanagari scripts)
- **Sizes:** shares the UI scale
- **Line height:** ~1.2–1.4
- **Letter spacing:** neutral; slight negative at 800 display *(inferred)*
- **Role:** Spotify's historic geometric sans, still loaded as the fallback identity face and for large-weight display moments. The 800 Black is reserved for big statements.

### SpotifyMixUITitle — display cut · `--font-title`
- **Substitute:** SpotifyMixUI, Helvetica Neue, Arial
- **Weights:** shares 700+ display weights
- **Role:** The title-optimized cut of the UI family for large headings.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro / badge | 10.5px | 1.3 | neutral | `--text-2xs` |
| Small / footer link | 12px | 1.4 | neutral | `--text-xs` |
| Body / secondary | 14px | 1.4 | neutral | `--text-sm` |
| Base / card title / h1 | 16px | 1.4 | neutral | `--text-base` |
| Section heading / h2 | 24px | 1.3 | slight negative *(inferred)* | `--text-xl` |

## Tokens — Spacing & Shapes
**Base unit:** 6px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 6px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 48px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Album art / card | 6px |
| Small chip | 2px |
| Control / tile | 4px |
| Panel inner | 8px |
| Sidebar panel / large surface | 16px |
| Icon button (circle) | 50% |
| Search capsule | 500px |
| Pill button | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Dropdown / modal | `rgba(0, 0, 0, 0.5) 0px 8px 24px 0px` | `--shadow-overlay` |
| Inset hairline | `rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset` | `--shadow-inset` |
| Soft glow | `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` | `--shadow-soft` |

### Layout
- **Page max-width:** none — full-bleed fixed app shell
- **Section gap:** ~48px between content rows
- **Card padding:** 12px
- **Element gap:** 24px within a row, 12px inside a card

## Components
### Play / Icon Button
**Role:** Circular action affordance (home, play, add).
Perfect circle (`radius: 50%`), `#1F1F1F` fill, `#FFFFFF` glyph, 12px padding, 16px glyph. The brand-green `#1ED760` fill is reserved for the primary play affordance only.

### Primary Pill Button
**Role:** The loudest call to action — "Log in", "Sign up free".
Fully-round (`9999px`), `#FFFFFF` fill, `#000000` text, no border, no shadow. Scales up slightly on hover. Exactly one per view carries the white pill.

### Secondary / Ghost Button
**Role:** Lower-priority actions and nav — "Sign up", "Premium", "Support".
Transparent fill, `#B3B3B3` text at 700 weight, `9999px` radius, no border. Text brightens toward `#FFFFFF` on hover.

### Search Capsule
**Role:** The persistent top-bar search field.
`#1F1F1F` fill, `#FFFFFF` text, `#C5C5C5` placeholder, `500px` radius, asymmetric padding `12px 96px 12px 48px` to seat the leading search glyph and trailing browse icon. Hairline `#7C7C7C` inset ring appears on focus.

### Text Input
**Role:** Form fields.
`#1F1F1F` fill, `#FFFFFF` text, no border at rest, `#7C7C7C` 1px inset ring via `--shadow-inset` on focus.

### Content Card
**Role:** Album, artist, playlist, and podcast tiles in the scrolling grid.
`6px` radius on the artwork, `12px` padding, title in `#FFFFFF` 16px, subtitle in `#B3B3B3`. Lifts to a `#1F1F1F` surface on hover; no border.

### Sidebar Panel Card
**Role:** Promo cards in the left library rail ("Create your first playlist").
`#1F1F1F` surface, generous padding, `16px` radius on the outer panel, headline `#FFFFFF` 16px/700, body `#B3B3B3`, followed by a white pill CTA.

### Section Header
**Role:** Row titles across the grid ("Trending songs", "Popular artists").
`#FFFFFF` 24px/700, paired with a right-aligned `#B3B3B3` "Show all" ghost link.

### Explicit Badge
**Role:** The small "E" content marker on tracks.
Tiny `~10.5px` label chip, `2px` radius, muted gray.

### Nav Link
**Role:** Top-bar and footer navigation.
`#FFFFFF` when active/primary, `#B3B3B3` when secondary; 12–16px; no underline until hover.

### Left Library Rail
**Role:** The persistent navigation + library column.
Fixed-width dark column on `#121212`, "Your Library" header with a `+ Create` ghost control, stacked panel cards below, footer legal links in `#B3B3B3` 12px.

### Genre / Decorative Tile
**Role:** Category tiles with auto-assigned color.
Solid decorative fill (mauve/green/clay/teal/rose), `#FFFFFF` title, `6px` radius. Color is the only saturated surface Spotify allows — and never for chrome.

## Do's and Don'ts
### Do
- Keep the canvas grayscale: `#000000` chrome, `#121212` content, `#1F1F1F+` surfaces stepped by luminance.
- Reserve `#1ED760` for the play affordance and brand mark — treat it as a signal, not decoration.
- Make the white `#FFFFFF` pill the single loudest button per view; everything else is a gray ghost.
- Round every actionable thing fully — `9999px` pills, `500px` search, `50%` icon buttons.
- Let `#B3B3B3` carry all secondary labeling; brighten to `#FFFFFF` only on hover or for primary titles.
- Convey depth with stacked near-blacks and hairline `#7C7C7C` insets, not drop shadows.

### Don't
- Don't set body text or long surfaces in `#1ED760` — the green is never a text or content-background color.
- Don't introduce a border color other than `#7C7C7C`, and only as a thin inset ring.
- Don't push the decorative tile colors (`#A16387`, `#508162`, `#A3694F`, `#4F7F77`, `#A84858`) into buttons, text, or chrome — they are category color only.
- Don't add rectangular hard-cornered buttons; the pill/circle is law.
- Don't lean on shadows for elevation on flat surfaces — use the luminance ladder.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Chrome | `#000000` | Top bar and outermost frame |
| 1 | Base | `#121212` | Main content plane + library rail |
| 2 | Surface | `#1F1F1F` | Cards, inputs, icon buttons, panel cards |
| 3 | Surface Hover | `#333333` | Hover fills |
| 4 | Surface Raised | `#383838` | Pressed/active fills |
| 5 | Muted | `#535353` | Disabled, tracks, dividers |

## Elevation
Depth is luminance, not shadow. Elements rise by climbing the gray ladder — `#121212 → #1F1F1F → #333333 → #383838` — one step per interaction state, so a hovered card simply becomes lighter than the plane behind it. Real shadows are rationed to genuine overlays: `rgba(0,0,0,0.5) 0 8px 24px` for dropdowns and modals, a soft `rgba(0,0,0,0.2) 0 0 18px` glow for floating chrome, and the `#7C7C7C` inset ring for focus. On the flat grid, nothing casts a shadow.

## Imagery
Album and artist artwork *is* the imagery system — the entire grid is a mosaic of user- and label-supplied cover art at `6px` corners, and the dark chrome exists to make it pop. Artist avatars are circular, black-and-white-leaning portraits. Spotify supplies almost no illustration of its own; where a surface has no art, it gets a solid decorative color tile instead. Iconography is a thin monochrome line set (`#FFFFFF`/`#B3B3B3`), tucked into circular buttons. The brand mark is the green wordmark/glyph — the only place the green appears at rest.

## Layout
A fixed dark app shell, full-bleed, no max-width. Three regions: a persistent left **library rail** (`Your Library`, promo cards, footer legal), a floating black **top bar** (home circle, a `500px` search capsule centered, Premium/Support/Download links and the account pills on the right), and a scrolling **content grid** of horizontal rows — "Trending songs", "Popular artists", "Popular albums and singles" — each a row of `6px` cards with a `24px/700` heading and a "Show all" link. A gradient sign-up banner pins to the bottom for logged-out sessions. Rhythm is ~48px between rows, 24px between cards, everything left-aligned to the rail edge.

## Typography Signature
Spotify runs a two-mode voice: **name it, or label it.** Titles, headings and brand statements are set in the UI/Circular stack at 700 (and 800 Black for big display) in pure `#FFFFFF` — confident, tight, high-contrast. Everything supporting — subtitles, the ubiquitous "Artist" tag, "Show all", metadata — drops to 400/normal in `#B3B3B3`, one flat gray that never competes with a title. There is essentially no mid-tone: text is either loud white and bold, or quiet gray and regular. That binary is what keeps a dense grid legible — the eye locks onto the white titles and treats the gray as ambient. Sizes stay small and functional (12–16px carries the app; 24px marks a section), because the artwork, not the type, is meant to be the spectacle.

## Agent Prompt Guide
## Quick Color Reference
- background: `#121212` (chrome `#000000`)
- text: `#FFFFFF` / muted `#B3B3B3`
- surface: `#1F1F1F` / hover `#333333`
- border: `#7C7C7C` (inset ring only)
- accent: `#1ED760` (brand green — signal only)
- primary action: `#FFFFFF` pill with `#000000` text (no colored CTA; green is reserved for play)

## Example Component Prompts
1. **Play button**: A circular icon button, `50%` radius, `#1ED760` fill, `#000000` triangle glyph, 48px diameter, 12px padding, scales to 1.05 on hover. Reserve this green fill for play only.
2. **Content card**: A tile with `6px`-cornered album artwork on top, 12px padding, `#FFFFFF` 16px/700 title, `#B3B3B3` subtitle below, transparent at rest, lifting to a `#1F1F1F` surface on hover — no border, no shadow.
3. **Search capsule**: A `500px`-radius input, `#1F1F1F` fill, `#FFFFFF` text, `#C5C5C5` placeholder "What do you want to play?", leading search glyph, padding `12px 96px 12px 48px`, a `#7C7C7C` 1px inset ring on focus.
4. **Primary pill**: A fully-round `9999px` button, `#FFFFFF` fill, `#000000` 700-weight text, no border, one per view; secondary actions are transparent pills with `#B3B3B3` text that brighten to white on hover.
5. **Section row**: A `#FFFFFF` 24px/700 heading with a right-aligned `#B3B3B3` "Show all" ghost link, followed by a horizontally scrolling row of content cards on the `#121212` plane with ~24px gaps.

## Similar Brands
- **Apple Music** — the same near-black, art-forward grid, though Apple leans red-accent and heavier chrome.
- **SoundCloud** — dark player shell built to foreground cover art and waveforms over UI decoration.
- **Netflix** — a black canvas whose entire design job is to make a mosaic of thumbnail art glow.
- **Bandcamp / Tidal** — dark music surfaces that keep chrome minimal and let a single brand accent do all the signaling.
- **Linear** — kindred restraint: a monochrome luminance ladder for depth and one saturated accent used as pure signal.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-green: #1ED760;
  --color-black: #000000;
  --color-base: #121212;
  --color-surface: #1F1F1F;
  --color-surface-hover: #333333;
  --color-surface-raised: #383838;
  --color-surface-muted: #535353;
  --color-border: #7C7C7C;
  --color-text: #FFFFFF;
  --color-text-muted: #B3B3B3;
  --color-text-placeholder: #C5C5C5;
  --color-ink: #101010;
  --color-surface-light: #EEEEEE;
  --color-decorative-mauve: #A16387;
  --color-decorative-green: #508162;
  --color-decorative-clay: #A3694F;
  --color-decorative-teal: #4F7F77;
  --color-decorative-rose: #A84858;

  /* Typography — Families */
  --font-ui: 'SpotifyMixUI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-circular: 'CircularSp', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'SpotifyMixUITitle', 'SpotifyMixUI', 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-2xs: 10.5px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-xl: 24px;
  --leading-tight: 1.3;
  --leading-normal: 1.4;

  /* Font Weights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --radius-surface: 16px;
  --radius-circle: 50%;
  --radius-capsule: 500px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-overlay: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px;
  --shadow-inset: rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset;
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-green: #1ED760;
  --color-black: #000000;
  --color-base: #121212;
  --color-surface: #1F1F1F;
  --color-surface-hover: #333333;
  --color-surface-raised: #383838;
  --color-surface-muted: #535353;
  --color-border: #7C7C7C;
  --color-text: #FFFFFF;
  --color-text-muted: #B3B3B3;
  --color-text-placeholder: #C5C5C5;
  --color-ink: #101010;
  --color-surface-light: #EEEEEE;
  --color-decorative-mauve: #A16387;
  --color-decorative-green: #508162;
  --color-decorative-clay: #A3694F;
  --color-decorative-teal: #4F7F77;
  --color-decorative-rose: #A84858;

  /* Typography — Families */
  --font-ui: 'SpotifyMixUI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-circular: 'CircularSp', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'SpotifyMixUITitle', 'SpotifyMixUI', 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-2xs: 10.5px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-xl: 24px;
  --leading-tight: 1.3;
  --leading-normal: 1.4;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 48px;

  /* Border Radius */
  --radius-chip: 2px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --radius-surface: 16px;
  --radius-circle: 50%;
  --radius-capsule: 500px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-overlay: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px;
  --shadow-inset: rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset;
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```