# Spotify design system: colors, fonts and tokens

> 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.

Source: https://spotify.com, captured 21 May 2026. Page: https://designlang.app/design-system/spotify

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#1ed760` | 40 |
| Secondary | `#346e4a` | 6 |
| Accent | `#1db954` | 2 |

Neutrals: `#ffffff`, `#b3b3b3`, `#000000`, `#696969`, `#555555`, `#121212`, `#7c7c7c`, `#1f1f1f`, `#333333`, `#292929`

Backgrounds: `#121212`, `#000000`, `#535353`, `#eeeeee`

## Fonts

- SpotifyMixUI (sans), 2400 elements
- SpotifyMixUITitle (sans), 10 elements

## 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

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

## Radii

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

## Motion

Feel: mixed. Durations: 100ms, 200ms, 300ms, 500ms, 1000ms.

## Audit

Overall 75/100 (grade C).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/spotify-com/spotify-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/spotify-com/spotify-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/spotify-com/spotify-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/spotify-com/spotify-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/spotify-com/spotify-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/spotify-com/spotify-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/spotify-com/spotify-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/spotify-com/spotify-com.brand.pdf)

Regenerate: `npx designlang spotify.com`