Spotify Design System Reference

Music Discovery & Playback Platform

Spotify Design System

Dark, sophisticated, and music-first — tokens and components that power the world's leading audio streaming platform.

20 Color tokens 7 Type styles 4 Shadow levels 7 Radius tokens Inter

Foundation

Color Tokens

The full color palette extracted from Spotify's design system, including brand primaries, interactive states, neutrals, and surfaces.

Spotify Green

#1ED760

Primary CTA · Active states · Success

Almost Black 1

#1F1F1F

Primary background · Base surface

Almost Black 2

#121212

Secondary surface · Cards · Panels

Almost Black 3

#101010

Tertiary surface · Deep elevation

Bright White

#FFFFFF

Primary text · High contrast

Light Gray

#B3B3B3

Secondary text · Icons · Muted state

Medium Gray

#C1C1C1

Borders · Form elements · Tertiary text

Link Blue

#0000EE

Hyperlinks · Navigation · Info links

Error Red

#D00000

Errors · Destructive actions

Burnt Orange

#B65E29

Content accent · Thematic elements

Typography

Type Scale

Inter drives Spotify's interface — geometric, modern, and optimized for content hierarchy and readability across all screen sizes.

Primary Inter UI · Headings · Body · Buttons

Monospace Courier New Code · Token values · Badges

Display Build what matters 24px · 700 · 0px

H1 The quick brown fox 16px · 700 · 0px

Body Lg The quick brown fox jumps 14px · 400 · normal

Body The quick brown fox jumps 14px · 700 · normal

Caption The quick brown fox jumps over 13px · 400 · normal

Link The quick brown fox 16px · 400 · normal

Code const token = '#1ED760'; 13px · 400 · monospace

Layout

Spacing & Shapes

8-pixel base unit — every spacing token is a multiple of 8. Border radii range from sharp (0px) to fully rounded (9999px) to match context.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px md+

24px lg

32px xl

64px 2xl

Border Radius

None 0px

SM 2px

MD 4px

LG 6px

XL 12px

Full 50%

Pill 9999px

Shadows

Base No elevation

Hover Cards on hover

Overlay Modals · Dropdowns

Modal Full-screen modals

Border Widths

Thin 1px

Medium 2px

Accent 3px

Opacity

Full 100%

High 70%

Medium 30%

Z-index / Layering

Base 1

Dropdown 2

Modal 4

Fixed 100

Elevation

Depth & Surfaces

Three dark surface levels create spatial hierarchy. Background (L0) → Panel (L1) → Card (L2) — each step lifts slightly from the base plane.

Primary Background

Base layer — the canvas everything sits on

L0 · #1F1F1F

Secondary Surface

Cards · panels · primary containers

L1 · #121212

Tertiary Surface

Inputs · nested containers · deep elevation

L2 · #101010

Base #1F1F1F

Panel #121212

Card #101010

Border #C1C1C1

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #1ED760 bg · #000000 text · 500px radius · 8/16px padding · 48px height. Secondary: transparent bg · #B3B3B3 border. Ghost: link-style, transparent. All weights 700.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #C1C1C1 border · 500px radius · 48px height. Focus: #1ED760 border · 2px ring rgba(30,215,96,.2).

Card

Content container — elevated surface with shadow

.card

Now Playing

Experience music like never before with high-fidelity audio streaming and personalized recommendations.

#1F2328 bg · #B3B3B3 border · 6px radius · hover shadow. Title: 16px/700/#FFFFFF. Body: 14px/#B3B3B3. CTA: primary green button.

Badges

Status indicators — Success, Error, Info

.badge

Playing Unavailable Featured

12px/700 · 4/8px padding · 2px radius. Success: #1ED760. Error: #D00000. Info: #0000EE.

Guidelines

Do's & Don'ts

Principles for consistent application of the Spotify design language across surfaces and contexts.

Do — Embrace

Use Spotify Green (#1ED760) as the sole primary CTA color
Maintain the three-level dark surface hierarchy (L0→L1→L2)
Apply Inter at weights 400 and 700 exclusively for clarity
Use 8px base grid for all spacing decisions
Apply rounded buttons (9999px) for all primary CTAs
Implement hover states with subtle opacity or background tints
Prioritize content visibility with generous negative space

Don't — Avoid

Mix light and dark surface tones within a single panel
Use Link Blue (#0000EE) for primary actions — it signals navigation
Apply Error Red (#D00000) outside of destructive or error contexts
Use multiple accent colors in the same interface
Override the green accent with other colors for primary actions
Apply excessive shadow effects; use shadows sparingly for depth
Place content directly adjacent to edges without minimum 16px margin

Spotify

Preview

Remixes of Spotify