Spotify design system

Spotify's website (spotify.com) uses a dark interface with #1ed760 as its primary color and SpotifyMixUI as the main typeface, with SpotifyMixUITitle alongside it. designlang measured 11 font sizes from 10.5px to 24px, 12 spacing values, 9 corner radii.

Captured 21 May 2026Dark UI2,525 elements read

Download tokens Read it yourself

Spotify colors

The brand roles and neutrals spotify.com renders, with how many elements use each one.

Brand colors

Primary#1ed76040 uses
Secondary#346e4a6 uses
Accent#1db9542 uses

Neutrals

#ffffff2,367 uses
#b3b3b31,887 uses
#000000610 uses
#696969129 uses
#55555544 uses
#12121228 uses
#7c7c7c25 uses
#1f1f1f11 uses
#33333311 uses
#2929295 uses

Backgrounds

#121212
#000000
#535353
#eeeeee

Text colors

#0000001.12:1 on #121212
#b3b3b38.93:1 on #121212
#0000ee1.99:1 on #121212
#ffffff18.73:1 on #121212
#7c7c7c4.49:1 on #121212
#1010101.02:1 on #121212
#c5c5c510.85:1 on #121212
#1212121:1 on #121212

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 88% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#1db954`	2.59:1	Fails AA
`#000000`	`#ffffff`	21:1	AAA
`#ffffff`	`#346e4a`	6.04:1	AA

Spotify fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

SpotifyMixUI: sans, most text (2,400 elements)
SpotifyMixUITitle: sans, most text (10 elements)

Body text: 16px at weight 400, line height normal.

Weights in use: 400, 700, 600, 500.

Type scale

Size	Weight	Line height	Tracking	Used on
24px	700	normal	normal	h2, span, a, h1
16px	400	normal	normal	html, head, style, meta
14.4px	400	38px	0.144px	button, svg, title, g
14px	700	normal	normal	a, span, svg, path
13.6px	400	27.2px	normal	div, svg, path, span
13.3333px	400	normal	normal	textarea, button, svg, path
13.008px	700	16.9104px	normal	div
12.992px	400	19.488px	normal	div, br, a, p
12.8px	400	normal	normal	input
12px	400	normal	normal	span, div, a, button
10.5px	600	14px	normal	span

Spacing and radii

Spacing scale

1px
15px
20px
23px
28px
35px
40px
48px
64px
96px
125px
154px

Corner radii

2px
6px
10px
16px
20px
32px
50px
500px
pill

Pill-shaped controls are a large share of the rounded elements. 10 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 100ms
sm: 200ms
md: 300ms
lg: 500ms
xl: 1000ms

Easing

custom (132 uses): cubic-bezier(0.3, 0, 0.4, 1)
ease-in-out (90 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

75/100, grade C

Components found: buttons (183), cards (244), inputs (20), links (326), navigation (17), footer (20).

By category

Color Discipline	65/100
Typography Consistency	80/100
Spacing System	70/100
Shadow Consistency	90/100
Border Radius Consistency	80/100
Accessibility	88/100
CSS Tokenization	100/100

1 WCAG contrast failures
175 !important rules — prefer specificity over overrides
71% of CSS is unused — consider purging
12418 duplicate CSS declarations

Download the tokens

The files designlang wrote for spotify.com. Run it yourself for a fresh read: npx designlang spotify.com.

The core values as CSS variables

:root {
  --color-primary: #1ed760;
  --color-secondary: #346e4a;
  --color-accent: #1db954;
  --color-background: #121212;
  --color-text: #000000;
  --color-neutral-1: #ffffff;
  --color-neutral-2: #b3b3b3;
  --color-neutral-3: #000000;
  --color-neutral-4: #696969;
  --font-primary: "SpotifyMixUI", sans-serif;
  --font-secondary: "SpotifyMixUITitle", sans-serif;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

Read spotify.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Retool design system

Dark UI, saansFont, #e9ebdf

GitHub design system

Dark UI, Mona Sans, #f0f6fc

Resend design system

Dark UI, inter, #d6ebfd

Linear design system

Dark UI, Inter Variable, #e4f222

Quick answers

What font does Spotify use?

spotify.com sets most of its text in SpotifyMixUI (2,400 elements), with SpotifyMixUITitle alongside it. designlang read this from the computed styles of the live page on 21 May 2026.

What are Spotify's brand colors?

The brand roles on spotify.com are primary #1ed760, secondary #346e4a and accent #1db954, on a #121212 background. The neutrals used most are #ffffff, #b3b3b3 and #000000.

How do I use the Spotify design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang spotify.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from spotify.com's public pages on 21 May 2026, so it shows what the site renders, not Spotify's internal source files. Spotify is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of spotify.com on 21 May 2026. Spotify is a trademark of its owner; designlang is not affiliated with it. More: the full Spotify brand kit, the token extraction guide and the markdown version of this page.