Color Palette
Album Art — Generated Palette (sample)
Typography
Base Font · SpotifyMixUI / Circular
SpotifyMixUI
Music for everyone. Millions of songs and podcasts. No credit card needed.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Title Font · SpotifyMixUITitle / Times
SpotifyMixUITitle
Now Playing · Your Daily Mix · Made For You · Artist Radio · Liked Songs
Serif · Italic
Times fallback
What do you want to play?
Display · 24px · Bold · line-height: 38px · letter-spacing: 0.144px
Liked Songs
Heading · 16px · Bold · line-height: 24px · letter-spacing: 0.16px
Made For You
Subheading · 14.4px · Semibold · line-height: 20.8px · letter-spacing: 0.16px
Various Artists · 2024 · 52 songs, 3 hr 14 min
Body · 14px · Regular · line-height: 17.6px · letter-spacing: 0.16px
Eminem · Rap God · Recovery · Popular song
Small Body · 13.6px · Regular · line-height: 16.91px · letter-spacing: 0.16px
Add to playlist · Go to artist · Share song
UI Small · 13px · Regular · line-height: 16.91px · letter-spacing: 0.16px
RECENTLY PLAYED · TOP MIXES · JUMP BACK IN
Label / Caption · 12px · Bold · line-height: 14.4px · letter-spacing: 1.2px
Letter Spacing
Spotify
Tight · 0.144px
--letter-spacing-tight · display, headings
Music
Normal · 0.16px
--letter-spacing-normal · body, UI text
NOW PLAYING
Wide · 1.2px
--letter-spacing-wide · all-caps labels
Spacing
Spacing Scale
22 tokens — 2px → 153.73px
Borders
Border Radii
Spotify heavily favors fully rounded elements — pill shapes (9999px) on buttons and tags, 50% circles for avatars and album art, and very minimal 2–6px on small UI chips.
Border Widths
--border-width-hairline
1px · dividers, card borders, inputs
--border-width-thin
12px · thick decorative accent borders
The unusual 12px border width appears as a thick decorative stripe — used for progress bars and visual accent separators in the player UI.
Shadow / Elevation
Shadow Tokens
6 tokens — drop, glow, inset
--shadow-sm
Album art, cards
rgba(0,0,0,0.5) 0px 8px 24px — heavy drop shadow on album covers and floating menus
--shadow-md
Dropdowns, tooltips
rgba(0,0,0,0.3) 0px 8px 8px — medium drop for context menus and popovers
--shadow-lg
Player bar, status
rgb(18,18,18) 0px 1px + inset rgb(124,124,124) 1px ring — combined separator and subtle edge highlight
--shadow-xl
Buttons, small elements
rgba(0,0,0,0.5) 0px 2px 4px — tight shadow for small interactive elements
--shadow-shadow-5
Focus glow, outlines
rgb(128,128,128) 0px 0px 5px — diffuse gray glow for focus states
--shadow-shadow-6
Inset border ring
rgb(124,124,124) 0px 0px 0px 1px inset — used as an inner 1px ring on surfaces
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | -1 | Behind content (artwork backgrounds, canvas decorations) |
| --z-2 → --z-8 | 1 – 7 | Fine-grained stacking of UI layers within a section (1,2,3,4,5,6,7) |
| --z-9 | 100 | Navigation, sticky player bar, floating controls |
| --z-10 | 9,999 | High-priority modals, popovers, command palette |
| --z-11 | 2,147,483,645 | Maximum browser z-index − 2 (iFrame / plugin escape) |
| --z-12 | 2,147,483,646 | Maximum browser z-index − 1 (overlay layer) |
| --z-13 | 2,147,483,647 | Maximum browser z-index (absolute top — true int32 max) |
Breakpoints
📱
--breakpoint-xs
400px
Mobile XS
📱
--breakpoint-sm
425px
Mobile SM upper
📱
--breakpoint-md
426px
Mobile SM lower
📱
--breakpoint-lg
500px
Mobile LG
📱
--breakpoint-xl
530px
Phablet
📱
--breakpoint-2xl
550px
Large phone
📱
--breakpoint-3xl
599.95px
Below 600 (upper)
💻
--breakpoint-bp-8
600px
Tablet lower
💻
--breakpoint-bp-9
768px
Tablet MD
💻
--breakpoint-bp-10
769px
Tablet MD+1
💻
--breakpoint-bp-11
890px
Tablet LG
💻
--breakpoint-bp-12
896px
Tablet LG+
🖥️
--breakpoint-bp-14
992px
Small desktop
🖥️
--breakpoint-bp-16
1024px
Desktop
🖥️
--breakpoint-bp-17
1280px
Wide desktop
Opacity
Opacity Tokens
2 tokens — 0.3 and 0.7
Spotify defines only 2 opacity tokens. Additional transparency is handled directly via rgba color values — e.g. rgba(0,0,0,0.5) in shadows and rgba(255,255,255,0.07) for subtle surface borders.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-light-gray | --color-black | 10.02:1 | AAA |
| --color-light-gray | --color-dark-gray-2 | 7.86:1 | AAA |
| --color-light-gray | --color-dark-gray-3 | 8.93:1 | AAA |
| --color-light-gray | --color-white | 2.1:1 | Fail |
| --color-light-gray | --color-green | 1.09:1 | Fail |
| --color-mid-gray | --color-white | 5.49:1 | AA |
| --color-mid-gray | --color-black | 3.83:1 | AA Large |
| --color-mid-gray | --color-dark-gray-2 | 3.0:1 | AA Large |
| --color-mid-gray | --color-dark-gray-3 | 3.41:1 | AA Large |
| --color-dark-gray | --color-white | 7.46:1 | AAA |
| --color-dark-gray | --color-black | 2.82:1 | Fail |
| --color-dark-gray | --color-green | 3.89:1 | AA Large |
| --color-mid-gray-2 | --color-white | 4.17:1 | AA Large |
| --color-mid-gray-2 | --color-black | 5.03:1 | AA |
| --color-mid-gray-2 | --color-dark-gray-3 | 4.49:1 | AA Large |
| --color-dark-gray-4 | --color-white | 5.83:1 | AA |
| --color-dark-gray-4 | --color-dark-gray-3 | 3.21:1 | AA Large |
CSS Variables Reference
Black--color-black#000000
Dark Gray 3--color-dark-gray-3#121212
Dark Gray 2--color-dark-gray-2#1F1F1F
Dark Gray 13--color-dark-gray-13#282828
Dark Gray 6--color-dark-gray-6#292929
Dark Gray 8--color-dark-gray-8#333333
White--color-white#FFFFFF
Green (Brand)--color-green#1ED760
Green 3--color-green-3#1DB954
Green 2--color-green-2#468254
Light Gray--color-light-gray#B3B3B3
Mid Gray--color-mid-gray#696969
Dark Gray--color-dark-gray#555555
Mid Gray 2--color-mid-gray-2#7C7C7C
Dark Gray 4--color-dark-gray-4#656565
Mid Gray 4--color-mid-gray-4#808080
Light Gray 4--color-light-gray-4#C5C5C5
Dark Gray 5--color-dark-gray-5#101010
Blue 2 (link)--color-blue-2#0000EE
Base Font--font-family-baseSpotifyMixUI
UI Font--font-family-2SpotifyMixUI
Title Font--font-family-3SpotifyMixUITitle
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs12px
XS--font-size-xs12.99px
SM--font-size-sm13.008px
Base--font-size-base13.33px
LG--font-size-lg13.6px
XL--font-size-xl14px
2XL--font-size-2xl14.4px
3XL--font-size-3xl16px
4XL (display)--font-size-4xl24px
Tight--letter-spacing-tight0.144px
Normal--letter-spacing-normal0.16px
Wide (caps)--letter-spacing-wide1.2px
Space 192--space-192110.91px
Space 256--space-256153.73px
Hairline--border-width-hairline1px
Thick accent--border-width-thin12px
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow220ms
Slower--duration-slower250ms
Long--duration-duration-7500ms
Ease Out--easing-ease-outease-out
Ease In--easing-ease-inease-in
Ease In-Out--easing-ease-in-outease-in-out
Behind BG--z-1-1
Base → Layer 7--z-2 → --z-81–7
Player / Nav--z-9100
Priority UI--z-109,999
Max (int32)--z-132,147,483,647
Design System Preview · Spotify (Dark) · Generated 18/04/2026 · 85 color tokens · 9 font-size · 3 font-family · 4 font-weight · 8 line-height · 3 letter-spacing · 22 spacing · 15 radius · 2 border-width · 6 shadow · 8 duration · 3 easing · 13 z-index · 17 breakpoints · 2 opacity