Spotify — design system & UI screens

Consumer · 2 screens · 15 sections · spotify.com

A dark, two-column streaming home screen pairs a left rail (Your Library prompts, legal links, language picker) with a scrollable main feed of horizontally arranged content rows for trending songs, popular artists, and albums. Square album-art cards and circular artist avatars create rhythm under bold section headers with "Show all" links, while a persistent top search bar and a sticky bottom gradient banner drives logged-out users to sign up free.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/spotify.

Decoded design system

Spotify's decoded design system: background #121212, text #FFFFFF, accent #1ED760, link #0000EE, primary #1ED760; type scale h1 16px / h2 24px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#121212`
surface	`#202020`
border	`#353535`
text	`#FFFFFF`
text_muted	`#A4A4A4`
primary	`#1ED760`
accent	`#1ED760`
link	`#0000EE`
secondary	`#9D968E`
button_bg	`#000000`
button_text	`#B3B3B3`

Using these colors

Action color #000000 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent are all #1ED760 — one role, not several (the action color).
accent #1ED760 — accent for emphasis — keep it rare on the page.
link #0000EE — fails contrast on the background (~2.0:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #9D968E — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Spotify Mix
Body: Spotify Mix
h1: 16px
h2: 24px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 5px, 6px, 8px, 12px, 16px, 20px, 24px, 28px

Radii

base: 0px
button: 9999px

Shadows (elevation)

card: rgba(0, 0, 0, 0.3) 0px 8px 8px 0px
overlay: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.3, 0, 0, 1).

durations: 150ms · 200ms · 250ms
easings: cubic-bezier(0.3, 0, 0, 1) · ease-out
animated properties: transform, background-color, opacity, color

Native design tokens

Token	Value
`--essential-announcement`	`#1278f2`
`--background-base`	`#121212`
`--background-elevated-press`	`#191919`
`--background-elevated-highlight`	`#2a2a2a`
`--start-gradient-color`	`#000000`
`--essential-positive`	`#1ed760`
`--text-warning`	`#ffa42b`
`--decorative-base`	`#fff`
`--text-positive`	`#1ed760`
`--background-elevated-base`	`#1f1f1f`

…and 99 more measured on the page.

Button states (measured)

primary focus: outline 1px solid rgb(0, 0, 0)

Layout (measured)

nav: 754px
common grid: 2 columns

Motion choreography (measured)

Load order: div.os-scrollbar-handle → h2.e-10451-text → div.r10xDelHVNgJK_xY×8 → p.e-10451-text×8 → span.e-10451-text×6 → div.P0DCrcBH45YVGZwP×30

Scroll reveal: 3 elements rest at opacity 0, animate in over 0.15s ease-out.

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Input (measured)

height 48px · radius 500px · focus ring 1px auto rgb(16, 16, 16)

Responsive (measured)

breakpoints: 425px · 550px · 600px · 768px · 896px · 1024px
mobile (390px): hero 16px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →