Design system do open.spotify.com

---
version: alpha
name: "open.spotify.com"
description: "Design system extracted from https://open.spotify.com/ on 2026-09-28"
colors:
  background: "#121212"
  surface: "#000000"
  surface-2: "#333333"
  surface-3: "#1f1f1f"
  foreground: "#b3b3b3"
  muted-foreground: "#ffffff"
  primary: "#a3694f"
  on-primary: "#ffffff"
  secondary: "#1ed760"
  border: "#292929"
typography:
  headline-display:
    fontFamily: "SpotifyMixUI"
    fontSize: "16px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-lg:
    fontFamily: "SpotifyMixUITitle"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "1.4"
  headline-md:
    fontFamily: "SpotifyMixUI"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "SpotifyMixUI"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: "SpotifyMixUI"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.4"
  button:
    fontFamily: "SpotifyMixUI"
    fontSize: "16px"
    fontWeight: 700
    lineHeight: "1.4"
  code:
    fontFamily: "SpotifyMixUI"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
rounded:
  none: "0px"
  full: "9999px"
  md: "6px"
  sm: "4px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "32px"
  7: "156px"
components:
  button-secondary:
    backgroundColor: "#1f1f1f"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "48px"
    padding: "12px 12px"
  button-ghost:
    backgroundColor: "#000000"
    textColor: "#b3b3b3"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "48px"
    padding: "12px 12px"
  input:
    backgroundColor: "#1f1f1f"
    rounded: "0px"
    height: "48px"
---

# open.spotify.com

## Overview

Spotify - Web Player: Music for everyone

Pill-shaped controls, layered shadows for depth, restrained display type at 16px / 700, a single red accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 2848 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#121212` | Page background |
| surface | `#000000` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#333333` | Secondary surface |
| surface-3 | `#1f1f1f` | Secondary surface |
| foreground | `#b3b3b3` | Primary text |
| muted-foreground | `#ffffff` | Secondary text, captions |
| primary | `#a3694f` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#1ed760` | Secondary accent (green) |
| border | `#292929` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#121212`, `#000000`, `#333333`, `#535353`, `#1f1f1f`, `#1ed760`, `#687a80`, `#a3694f`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgb(18, 18, 18) 100%), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0`; `linear-gradient(90deg, rgb(175, 40, 150), rgb(80, 155, 245))`; `linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgb(42, 42, 42) 10%, rgb(42, 42, 42) 90%, rgba(0, 0, 0, 0) 100%)`.

The accent `#a3694f` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **SpotifyMixUI** for h1, body, label, button, code: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **SpotifyMixUITitle** for h2: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | SpotifyMixUI | 16px | 700 | 1.4 | normal |
| headline-lg | SpotifyMixUITitle | 24px | 700 | 1.4 | normal |
| headline-md | SpotifyMixUI | 24px | 600 | 1.4 | normal |
| body-md | SpotifyMixUI | 16px | 400 | 1.4 | normal |
| label-md | SpotifyMixUI | 16px | 400 | 1.4 | normal |
| button | SpotifyMixUI | 16px | 700 | 1.4 | normal |
| code | SpotifyMixUI | 16px | 400 | 1.5 | normal |

Type scale in use: 11px, 12px, 14px, 16px, 24px. Base body size 16px.

The H1 renders at 16px / 700, start aligned, up to 90px wide. Sample: "Your Library".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 32, 156 (px).
- Flex and grid gaps: 4, 8, 12 px.
- Content max width: not detected (fluid).
- Breakpoints: 320px, 400px, 550px, 600px, 896px.
- Header: 754px tall, static, background `rgba(0, 0, 0, 0)`; 9 nav links at 14px / 700 (Browse podcasts · Legal · Safety & Privacy Center · Privacy Policy · Cookies · About Ads · Accessibility · Notice at Collection).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.5) 0px 8px 24px 0px`
- shadow-2: `rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset`

## Shapes

- Buttons: 9999px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 6px
- Radius scale: none 0px, full 9999px, md 6px, sm 4px

## Components

### Button, secondary

Background `#1f1f1f`, text `#ffffff`, border none, radius 9999px, height 48px, padding 12px 12px, 16px / 400.

### Button, ghost

Background transparent (it sits on `#000000`, so place it on that colour), text `#b3b3b3`, border none, radius 9999px, height 48px, padding 12px 12px, 16px / 400.

### Input

Height 48px, background `#1f1f1f`, border 0px solid #ffffff, radius 0px, 16px text, padding 12px 96px.

### Link

Colour `#ffffff`, no underline at rest, weight 400.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | fluid | 435px | 16px | 16px, 1 line, start | 754px, 9 links, 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | fluid | 435px | 16px | 16px, 1 line, start | 622px, 9 links, 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | fluid | 335px | 16px | 16px, 1 line, start | 858px, 9 links, 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | fluid | 335px | 16px | 16px, 1 line, start | 680px, 9 links, 1 CTA | text only | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 16px → 16px (100%), 1 → 1 lines.
- Nav never collapses to a hamburger (9 links still visible at 390px).
- Card grids: 1 columns → 1 column on phones (gap normal → normal).
- Body text stays 16px at every width.
- Phone side gutter 335px.
- Horizontal overflow at 768, 390px (the source has a responsive bug; do not copy it).
- Section top padding 16px → 16px.

## Interaction & Motion

288 elements carry transitions; typical 0.15s with cubic-bezier(0.3, 0, 0, 1), mostly on transform, background-color, opacity. 4 running keyframe animations (WvqjIO41Fsk89RJ0u2WC 0.25s 1; LVV5qXMAKD5JxMYTJ5kg auto 1; mKwU8TAUxK2egmWkUsOA auto 1).

- Hover on button-primary: background #1f1f1f → #2a2a2a, moves up 1px; cursor pointer; transition background-color, color | 0.2s, 0.2s | ease-in-out, ease-in-out | delay 0s, 0s.
- Hover on button-secondary ("English"): border #7c7c7c → #ffffff, moves up 0.6px; cursor pointer; transition border-color, transform | 0.15s | cubic-bezier(0.3, 0, 0, 1).
- Hover on nav-link ("Browse podcasts"): moves up 0.6px; cursor pointer; transition background-color, transform | 0.15s | cubic-bezier(0.3, 0, 0, 1).
- Hover on body-link ("Trending songs"): underline appears; cursor pointer.
- Hover on input: background #1f1f1f → #2a2a2a, shadow added (rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset); cursor text; transition box-shadow, background, color | 0.22s, 0.22s, 0.22s | ease-in, ease-in, ease-in | delay 0s, 0s, 0s.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on body-link: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on input: box-shadow ring rgba(255, 255, 255, 0.267) 0px 0px 0px 0.53658px inset.
- Tooltips: below the trigger, 12px gap, centered on trigger; transparent on #ffffff, 14px/400, radius 0px, padding 0px 0px, no arrow; appears after a delay; removed instantly on leave.
- 1 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 96 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Portal roots present: ReactModalPortal, ReactModalPortal, ReactModalPortal.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#a3694f` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in SpotifyMixUI.
- Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.