# Spotify — Design Reference

> Black stage, green pill, type that shouts

**Theme:** dark · **Measured from:** spotify.com/us/premium (English, 1440 px)

Spotify looks like a concert at night. The canvas is near-black (`#121212`), the nav bar is pure black, and the text is white. There is one action color, Spotify Green `#1ed760`, and it only ever appears as a pill button (with black text) or as a small line icon. The hero is all typography: a 128px headline in a wide, ultra-heavy (900) title face, filling the screen edge to edge, with the last line cycling through words ("live events", "videos") in an italic slant. Below the fold the page alternates quiet white-on-black statements with big full-color cards — periwinkle, electric blue, burnt orange — rounded at 24px. No shadows, no gradients except the black fade at the bottom of the hero. Loud type, flat color, round buttons.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Spotify Green | `#1ed760` | Primary action: pill buttons and feature icons only |
| Stage | `#121212` | Page canvas |
| Black | `#000000` | Nav bar, hero fade, text on green buttons |
| White | `#ffffff` | Headlines, body, nav links |
| Silver | `#b3b3b3` | Secondary copy, captions, legal fine print |
| Fog | `#d9dadc` | Tertiary light text |
| Outline Gray | `#7f7f7f` | 1px border of the outline pill |
| Chip | `#282828` | Small info chips (white at 10% over Stage) |
| Periwinkle | `#576dd6` | Feature card fill |
| Electric Blue | `#0d72ea` | Feature card fill |
| Burnt Orange | `#d64000` | Feature card fill |

**Card colors** are flat, saturated, one per card, never mixed into a gradient. Green is never a card color — it stays reserved for actions.

## Typography

Two proprietary families. **SpotifyMixUITitle** (variable, wide geometric) for headlines — substitute **Archivo** at `wdth 125` (300–900) from Google Fonts. **SpotifyMixUI** for everything else — substitute **Figtree** (400/700).

- The hero headline is weight **900** at 128px. Lesser section titles drop to **800** at 64px.
- Statements and subheads go the other way: **400** at 48px or **300** at 24px. Heavy and thin, nothing in between for headlines.
- Buttons and nav are **700**; body is **400**.
- No letter-spacing adjustments anywhere; the width of the face does the work.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 128px | 900 | 1.2 | 0 |
| Heading XL | 64px | 800 | normal | 0 |
| Statement | 48px | 400 | normal | 0 |
| Heading | 32px | 700 | normal | 0 |
| Subheading | 24px | 300 | normal | 0 |
| Card title | 20px | 700 | normal | 0 |
| Body | 16px | 400 | normal | 0 |
| Button | 16px | 700 | 24px | 0 |
| Small | 14px | 400 | normal | 0 |
| Caption | 12px | 400 | 18px | 0 |

**Kinetic hero line:** the last line of the hero headline swaps words with a vertical roll, and the swapped words are slanted (oblique). Keep the first lines static and upright.

## Shape and spacing

- **Buttons:** full pill (`9999px`). Always.
- **Cards:** 24px radius, no border, no shadow.
- **Chips:** 4px radius.
- **Base unit:** 8px. Scale: 4, 8, 16, 24, 32, 48, 64, 96, 160.
- **Content width:** about 1120px centered for cards and feature rows; the hero starts 100px from the left edge.
- **Section gap:** generous, around 160px of pure black between sections.

## Components

### Primary button
Spotify Green `#1ed760` fill, black text, pill radius, 48px tall with about 32px side padding, 16px weight 700. No border, no shadow. Label: "Try 2 months for $0". In the nav it shrinks to about 38px tall.

### Outline button
Transparent fill, white text, 1px `#7f7f7f` border, pill radius, same height as the primary, 8–16px to its right. Label: "View all plans".

### Navigation
Full-width black bar, about 72px tall. White logo on the left; on the right, white 16px weight-700 links ("Premium plans", "Support", "Download"), a thin vertical divider, then "Sign up" and "Log in" in lighter weight color, then the green pill.

### Feature card
Full-width (about 1120px) block in one flat color (Periwinkle, Electric Blue or Burnt Orange), 24px radius. Product art on the left, copy on the right: a tiny "Premium" eyebrow with the Spotify glyph, a 20px weight-700 white title ("Concert tickets, saved for real fans"), a short white paragraph, and fine print at the bottom.

### Benefit row
Four columns on Stage: a green line icon (32px), a white weight-700 title ("Ad-free music listening", "Lossless music"), and two lines of Silver body text. Followed by the centered button pair and fine print.

### Offer chip
Small `#282828` box, 4px radius, a bell icon and 14px white text ("Offer ends in 5 days"). Sits directly above the hero buttons.

### Fine print
12px Silver text with underlined links ("Terms apply"), set right under every call-to-action pair, never more than ~300px wide.

## Do

- Keep the canvas near-black (`#121212`) and the nav pure black.
- Use green only for pill buttons and small icons.
- Make the hero all type: one enormous weight-900 headline, nothing else competing.
- Pair a green pill with an outline pill.
- Use one flat saturated color per feature card, with 24px corners.
- Put fine print under every offer button.

## Don't

- Don't use green as a section or card background.
- Don't use square or slightly rounded buttons; they're pills.
- Don't add shadows or borders to cards.
- Don't use mid weights (500–600) for headlines; go heavy or go light.
- Don't put gradients on cards or buttons.
- Don't use pure white backgrounds for sections.

## Layout

Left-aligned hero on Stage: the giant headline spanning most of the width, then the offer chip, the green + outline pill pair and fine print, all at the left margin. The hero fades to black, and a white 48px statement ("As the world's music hub…") sits low-left with a Silver paragraph. Then centered sections: a 64px weight-800 title, a 24px weight-300 subtitle, and a full-width color card below. A four-column benefit row with a centered button pair closes the plan pitch. Lots of empty black between every section.

## Agent prompt guide

- Text: `#ffffff` · Secondary text: `#b3b3b3` · Fine print: `#b3b3b3`
- Canvas: `#121212` · Nav: `#000000` · Chips: `#282828`
- Action: `#1ed760` (black label) · Outline border: `#7f7f7f`
- Card fills: `#576dd6`, `#0d72ea`, `#d64000`

Example prompts:

1. "Primary button: background #1ed760, black text, fully rounded pill, 48px tall, 32px side padding, Figtree 700 16px, no shadow. Next to it an outline pill: transparent, white text, 1px #7f7f7f border."
2. "Hero on #121212: left-aligned headline at 128px, Archivo wdth 125 weight 900, white, line-height 1.2; below it a #282828 chip with 4px radius and 14px text 'Offer ends in 5 days', then the button pair and 12px #b3b3b3 fine print."
3. "Feature card: full-width, background #0d72ea, 24px radius, no shadow; art on the left, on the right a small 'Premium' eyebrow, a 20px weight-700 white title and a short white paragraph."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-spotify-green: #1ed760;
  --color-stage: #121212;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-silver: #b3b3b3;
  --color-fog: #d9dadc;
  --color-outline-gray: #7f7f7f;
  --color-chip: #282828;
  --color-periwinkle: #576dd6;
  --color-electric-blue: #0d72ea;
  --color-burnt-orange: #d64000;

  /* Fonts */
  --font-display: 'SpotifyMixUITitle (variable)', 'Archivo at wdth', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'SpotifyMixUI', 'Figtree', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 128px;
  --text-display--line-height: 1.2;
  --text-display--font-weight: 900;
  --text-heading-xl: 64px;
  --text-heading-xl--line-height: normal;
  --text-heading-xl--font-weight: 800;
  --text-heading-statement: 48px;
  --text-heading-statement--line-height: normal;
  --text-heading-statement--font-weight: 400;
  --text-heading: 32px;
  --text-heading--line-height: normal;
  --text-heading--font-weight: 700;
  --text-subheading: 24px;
  --text-subheading--line-height: normal;
  --text-subheading--font-weight: 300;
  --text-card-title: 20px;
  --text-card-title--line-height: normal;
  --text-card-title--font-weight: 700;
  --text-body: 16px;
  --text-body--line-height: normal;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 24px;
  --text-button--font-weight: 700;
  --text-small: 14px;
  --text-small--line-height: normal;
  --text-small--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 18px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 4px;
  --radius-cards: 24px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Layout */
  --container-page: 1120px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-spotify-green: #1ed760;
  --color-stage: #121212;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-silver: #b3b3b3;
  --color-fog: #d9dadc;
  --color-outline-gray: #7f7f7f;
  --color-chip: #282828;
  --color-periwinkle: #576dd6;
  --color-electric-blue: #0d72ea;
  --color-burnt-orange: #d64000;

  /* Fonts */
  --font-display: 'SpotifyMixUITitle (variable)', 'Archivo at wdth', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'SpotifyMixUI', 'Figtree', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 128px;
  --text-display--line-height: 1.2;
  --text-display--font-weight: 900;
  --text-heading-xl: 64px;
  --text-heading-xl--line-height: normal;
  --text-heading-xl--font-weight: 800;
  --text-heading-statement: 48px;
  --text-heading-statement--line-height: normal;
  --text-heading-statement--font-weight: 400;
  --text-heading: 32px;
  --text-heading--line-height: normal;
  --text-heading--font-weight: 700;
  --text-subheading: 24px;
  --text-subheading--line-height: normal;
  --text-subheading--font-weight: 300;
  --text-card-title: 20px;
  --text-card-title--line-height: normal;
  --text-card-title--font-weight: 700;
  --text-body: 16px;
  --text-body--line-height: normal;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 24px;
  --text-button--font-weight: 700;
  --text-small: 14px;
  --text-small--line-height: normal;
  --text-small--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 18px;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 4px;
  --radius-cards: 24px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Layout */
  --container-page: 1120px;
}
```

---

*Measured from https://www.spotify.com/us/premium/ on 2026-10-28 by Faundr. Inspired by Spotify; not its official design system and not affiliated with Spotify.*