---
title: "Spotify design system"
variant: extended
source: https://open.spotify.com/
captured_at: 2026-10-12
theme: dark
industry: media
generator: Design DNA (https://four.wiralomi.com/style/spotify-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Spotify · Design System

> A dark listening room built around vivid music discovery.

**Theme:** dark · **Industry:** media · **Source:** https://open.spotify.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Spotify’s web player pairs a near-black interface with bright, image-led music recommendations. A persistent library sidebar frames the main discovery feed, while a colorful signup banner anchors the bottom edge.

## North star

Keep interface chrome quiet and near-black so music artwork and a few high-contrast actions carry the visual energy.

## Overview

The page uses a nearly black listening-room palette: #121212 forms the main canvas, with #000000 anchoring the top bar and deeper structural areas. White headings and primary labels contrast with muted gray secondary copy, while Spotify green marks a small number of high-signal actions. The most vivid magenta-to-blue gradient is reserved for the persistent signup preview banner, not the general content surface. SpotifyMixUI provides compact, direct interface typography; the title face is used for prominent feed headings. A fixed top navigation and left library rail organize a wide, scrollable discovery area. Dense horizontal recommendation rows let colorful album art supply variety against restrained chrome. Cards remain visually light on borders and shadows, with rounded artwork and controls providing the main shape language. Generous gaps between feed groups preserve separation despite the high information density.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Listening Room | `#121212` | `--color-listening-room` | brand | Primary page canvas and main content background; also underlies feed and card areas. |
| Playback White | `#ffffff` | `--color-playback-white` | neutral | High-contrast headings, primary labels, and the white Log in control. |
| Deep Track | `#000000` | `--color-deep-track` | surface | Top navigation and deepest structural surfaces; also appears as text on the green badge. |
| Soft Silver | `#b3b3b3` | `--color-soft-silver` | neutral | Secondary copy, artist labels, muted navigation links, and supporting button text. |
| Quiet Outline | `#7c7c7c` | `--color-quiet-outline` | semantic | Subtle control outline, including the English language selector. |
| Shadow Black | `#070707` | `--color-shadow-black` | surface | Near-black gradient endpoint and shadow tone, supporting depth rather than defining a content section. |
| Spotify Green | `#1ed760` | `--color-spotify-green` | accent | Brand action accent, notably the green Search badge; use sparingly against dark surfaces. |
| Graphite | `#535353` | `--color-graphite` | surface | Secondary dark surface tone used in supporting interface elements. |
| Card Charcoal | `#333333` | `--color-card-charcoal` | surface | Raised or differentiated card surface; also sampled from circular media tiles. |
| Pulse Magenta | `#af2896` | `--color-pulse-magenta` | accent | Left-side stop in the signup banner gradient and occasional decorative gradient. |
| Stream Blue | `#509bf5` | `--color-stream-blue` | accent | Right-side stop in the signup banner gradient and occasional decorative gradient. |
| Panel Slate | `#1f1f1f` | `--color-panel-slate` | surface | Inset interface surface used for inputs and subtle navigation or control backgrounds. |
| Album Umber | `#9a6d4f` | `--color-album-umber` | semantic | Muted brown sampled from album artwork; treat as image content, not interface chrome. |
| Cover Rose | `#956e66` | `--color-cover-rose` | semantic | Dusty rose sampled from music imagery; appears within cover art rather than the UI palette. |
| Artwork Teal | `#687878` | `--color-artwork-teal` | semantic | Low-saturation teal sampled from media thumbnails; not a defining interface color. |

### Semantic aliases

`--color-canvas` → `#121212` (Listening Room) · `--color-surface` → `#000000` (Deep Track) · `--color-surface-2` → `#535353` (Graphite) · `--color-surface-3` → `#333333` (Card Charcoal) · `--color-surface-4` → `#1f1f1f` (Panel Slate) · `--color-text` → `#ffffff` (Playback White) · `--color-text-muted` → `#b3b3b3` (Soft Silver) · `--color-text-subtle` → `#000000` (Deep Track) · `--color-border` → `#7c7c7c` (Quiet Outline) · `--color-accent` → `#1ed760` (Spotify Green) · `--color-accent-2` → `#af2896` (Pulse Magenta) · `--color-accent-3` → `#509bf5` (Stream Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#121212` | 18.73:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#535353` | 7.69:1 | AAA |
| `#ffffff` | `#333333` | 12.63:1 | AAA |
| `#b3b3b3` | `#121212` | 8.93:1 | AAA |
| `#b3b3b3` | `#000000` | 10.02:1 | AAA |
| `#b3b3b3` | `#535353` | 3.67:1 | AA-large |
| `#b3b3b3` | `#333333` | 6.03:1 | AA |
| `#000000` | `#121212` | 1.12:1 | fail |
| `#000000` | `#535353` | 2.73:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgb(18, 18, 18) 100%), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWd`
- `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%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SpotifyMixUI | `--font-body` | webfont | 400, 700 | Navigation, body copy, links, labels, and buttons throughout the player. | Inter |
| SpotifyMixUITitle | `--font-display` | webfont | 700 | Prominent content headings such as Trending songs and Popular artists. | Inter |

- **SpotifyMixUI:** Use regular for supporting text and bold for controls; keep casing natural and tracking neutral.
- **SpotifyMixUITitle:** Bold display treatment for feed titles; maintain neutral tracking and sentence-style capitalization.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 700 | normal | 0 | — | SpotifyMixUITitle | Primary discovery-feed heading, such as Trending songs. |
| body | 16px | 400 | normal | 0 | — | SpotifyMixUI | Library prompts, playlist guidance, and general interface copy. |
| caption | 14px | 400 | normal | 0 | — | SpotifyMixUI | Artist names and compact supporting metadata beneath recommendations. |
| button | 16px | 700 | normal | 0 | — | SpotifyMixUI | Prominent actions including playlist creation and signup. |
| nav | 12px | 400 | normal | 0 | — | SpotifyMixUI | Compact legal links and secondary navigation labels. |
| link | 14px | 400 | normal | 0 | — | SpotifyMixUI | Artist names, recommendations, and inline feed destinations. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 172 px.
- Section rhythm 172px · element gap 8px · card padding — · max content width 1424px.

The web player is organized as a persistent top bar, a narrow left library rail, and a much wider main discovery feed. The measured page maximum width is 1424px, with content aligned to the start of each region. Recommendation cards flow in horizontal rows, while clear vertical gaps separate music categories. The interface is information-dense, but dark surfaces, image spacing, and distinct section headings keep the feed scannable. A full-width signup preview banner stays pinned to the bottom of the viewport.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `6px` · media `6px` · badge `9999px` · nav `9999px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.5) 0px 8px 24px 0px`
- Shadow `inset` (text): `rgb(18, 18, 18) 0px 1px 0px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset`
- Motion: standard transition `0.15s cubic-bezier(0.3, 0, 0, 1)` on interactive elements.

The overall interface is mostly flat, using adjacent dark surfaces rather than prominent outlines to separate the sidebar and feed. Rounded panels and media tiles provide soft component boundaries. Cards may use a restrained shadow, while the language control uses a fine gray outline. The bottom signup banner stands out through its bright gradient and fixed overlay placement.

## Imagery

Photography dominates the discovery feed through square album covers and circular artist portraits. Artwork is cropped tightly into consistent media shapes and displayed in horizontal recommendation rows; portraits are circular while album art stays square. Images retain their original colors and contrast, creating vivid accents against the nearly black interface. The sampled brown, rose, and teal tones belong to this varied artwork, not the interface palette.

## Components

### Top navigation

A black horizontal bar combines home and search controls on the left with compact account and install links on the right.

### Library rail

A dark fixed sidebar groups Your Library, playlist and podcast prompts, compact legal links, and the outlined English selector.

### Discovery section

Bold white feed titles sit above horizontal recommendation rows, with a muted Show all link aligned opposite each title.

### Music card

Square album artwork or circular artist portraits lead; titles use white text and artist or category metadata uses muted gray.

### Prompt panel

Compact charcoal sidebar panels pair a bold prompt, short explanatory copy, and a white pill-shaped action.

### Signup preview banner

A persistent bottom bar uses a magenta-to-blue gradient, concise preview copy, and a white pill signup action.

### Search field

A rounded dark inset field combines a search icon, muted prompt, and trailing utility icon.

### Measured component styles

- **Primary button**: background #1f1f1f · text #ffffff · radius 50% · padding 12px · 400 16px SpotifyMixUI
- **Secondary button** (“English”): transparent background · text #ffffff · border 1px solid #7c7c7c · radius 9999px · padding 4px 16px 4px 36px · 700 14px SpotifyMixUI
- **Link** (“Gunna”): transparent background · text #b3b3b3 · radius 0px · padding 0px · 400 14px SpotifyMixUI
- **Input**: background #1f1f1f · text #ffffff · radius 500px · padding 12px 96px 12px 48px · 400 16px SpotifyMixUI
- **Card** (“Home Trending songs Show all pop it EGun”): background #121212 · text #b3b3b3 · radius 8px · padding 0px · 400 16px SpotifyMixUI
- **Badge** (“Search”): background #1ed760 · text #000000 · radius 9999px · padding 4px 16px · 700 14px SpotifyMixUI
- **Navigation item** (“Your Library Create your first playlist ”): transparent background · text #b3b3b3 · radius 0px · padding 0px · 400 16px SpotifyMixUI

## Do

- Use #121212 as the dominant content canvas.
- Keep navigation and structure close to black.
- Reserve white for clear headings and key actions.
- Use #b3b3b3 for secondary labels and links.
- Let colorful music imagery supply most visual variation.
- Use the magenta-to-blue gradient chiefly for the signup banner.

## Don't

- Do not turn album-art colors into global interface colors.
- Do not add bright borders around every card.
- Do not let secondary copy compete with feed titles.
- Do not stretch square artwork into inconsistent shapes.
- Do not use green as a general-purpose page background.
- Do not obscure the persistent navigation or signup banner.

## Agent prompt

Build a new music-discovery page in Spotify’s dark web-player style. Use Listening Room #121212 for the main canvas and Deep Track #000000 for persistent navigation; create restrained secondary surfaces with Panel Slate #1f1f1f and Card Charcoal #333333. Set headings in bold SpotifyMixUITitle-like typography and interface copy in SpotifyMixUI-like sans serif, with Playback White #ffffff for primary text and Soft Silver #b3b3b3 for metadata. Organize the screen with a top navigation, left library rail, and wide feed of horizontally arranged recommendations. Keep artwork vivid, consistently cropped, and responsible for most color variation. Use Spotify Green #1ed760 sparingly; reserve Pulse Magenta #af2896 to Stream Blue #509bf5 gradients for a standout signup banner. Favor subtle boundaries, rounded controls, and clear spacing between feed groups.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Persistent top navigation and left library rail frame a wide main feed with horizontal music rows and a bottom signup banner. | Persistent navigation, Horizontal recommendations, Library prompts, Sticky signup action | Dark app shell, Album-art cards, Circular artist portraits, Gradient banner |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/spotify-com