# Spotify

> `spotify@1.0.0`

Spotify AB is the global audio-streaming service for music, podcasts, and audiobooks, headquartered in Stockholm. The brand is dark-first and high-energy: a solid black canvas with the saturated Spotify Green used as the principal accent on the wordmark, the play affordance, and primary CTAs. The voice is warm, expressive, and editorial — pairing the disciplined black- and-green corporate identity with vivid duotone photography and bold typographic moments in marketing.


**Tags:** `streaming`, `audio`, `music`, `podcasts`, `spotify`, `dark-first`, `consumer-tech`

## Atoms

### Palette

**Spotify** · `spotify@1.0.0` · Proprietary — All Rights Reserved

> Spotify corporate palette built around Spotify Green (#1DB954, with the brighter #1ED760 introduced as the refreshed primary in the 2015 brand update) and a deep-black canvas. The brand is dark-first: the consumer player, marketing, and the official Spotify logomark all live on black with green reading as the high-energy accent. The black-and-green pairing is the most recognizable element of the Spotify identity. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Spotify Circular** `(spotify-circular@1.0.0)` | Proprietary — All Rights Reserved | sans-serif |
| `body` | **Spotify Circular** `(spotify-circular@1.0.0)` | Proprietary — All Rights Reserved | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `spotify-green` | Spotify Green | `#1ED760` |
| `spotify-green-legacy` | Spotify Green (Legacy) | `#1DB954` |
| `spotify-green-pressed` | Spotify Green Pressed | `#169C46` |
| `spotify-black` | Spotify Black | `#000000` |
| `spotify-dark` | Spotify Dark | `#121212` |
| `spotify-elevated` | Spotify Elevated | `#181818` |
| `spotify-gray` | Spotify Gray | `#535353` |
| `spotify-gray-light` | Spotify Gray Light | `#B3B3B3` |
| `spotify-white` | Spotify White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `spotify-white` | `#FFFFFF` |
| `surface` | `spotify-white` | `#FFFFFF` |
| `surface-elevated` | `spotify-white` | `#FFFFFF` |
| `text-primary` | `spotify-black` | `#000000` |
| `text-secondary` | `spotify-gray` | `#535353` |
| `text-tertiary` | `spotify-gray-light` | `#B3B3B3` |
| `primary` | `spotify-green` | `#1ED760` |
| `primary-hover` | `spotify-green-pressed` | `#169C46` |
| `accent` | `spotify-green` | `#1ED760` |
| `accent-hover` | `spotify-green-pressed` | `#169C46` |
| `warning` | `spotify-green-legacy` | `#1DB954` |
| `warning-hover` | `spotify-green-pressed` | `#169C46` |
| `error` | `spotify-gray` | `#535353` |
| `success` | `spotify-green` | `#1ED760` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `spotify-black` | `#000000` |
| `surface` | `spotify-dark` | `#121212` |
| `surface-elevated` | `spotify-elevated` | `#181818` |
| `text-primary` | `spotify-white` | `#FFFFFF` |
| `text-secondary` | `spotify-gray-light` | `#B3B3B3` |
| `text-tertiary` | `spotify-gray` | `#535353` |
| `primary` | `spotify-green` | `#1ED760` |
| `primary-hover` | `spotify-green-pressed` | `#169C46` |
| `accent` | `spotify-green` | `#1ED760` |
| `accent-hover` | `spotify-green-pressed` | `#169C46` |
| `warning` | `spotify-green-legacy` | `#1DB954` |
| `warning-hover` | `spotify-green-pressed` | `#169C46` |
| `error` | `spotify-gray-light` | `#B3B3B3` |
| `success` | `spotify-green` | `#1ED760` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `spotify-black` | `#000000` |
| `on-identity` | `spotify-green` | `#1ED760` |
| `background` | `spotify-black` | `#000000` |
| `surface` | `spotify-dark` | `#121212` |
| `surface-elevated` | `spotify-elevated` | `#181818` |
| `text-primary` | `spotify-white` | `#FFFFFF` |
| `text-secondary` | `spotify-gray-light` | `#B3B3B3` |
| `text-tertiary` | `spotify-gray` | `#535353` |
| `primary` | `spotify-green` | `#1ED760` |
| `primary-hover` | `spotify-green-pressed` | `#169C46` |
| `accent` | `spotify-green` | `#1ED760` |
| `accent-hover` | `spotify-green-pressed` | `#169C46` |
| `mark` | `spotify-green` | `#1ED760` |
| `text-emphasis` | `spotify-white` | `#FFFFFF` |
| `text-muted` | `spotify-gray-light` | `#B3B3B3` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.wordmark.fill`

- **allowed:** spotify-green, spotify-white, spotify-black
- **forbidden:** spotify-green-legacy, spotify-green-pressed, spotify-gray, spotify-gray-light

> The Spotify wordmark renders only in Spotify Green, white, or black per the public brand assets. The legacy green is preserved for historical surfaces; the pressed green is an interactive-state value, not a wordmark fill. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, green-on-low-contrast-background

> The Spotify wordmark and three-arc mark have strict clearspace and color rules in the Spotify brand system. Never render the green wordmark on a background where it falls below WCAG-AA-large contrast; use the white or black variant on those surfaces. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Spotify White on Spotify Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Spotify surfaces. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Spotify Green on Spotify Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of the play-action and primary CTAs the brand depends on. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, secondary-link, validation-failure

> Spotify Green is reserved for the brand mark, the play affordance, and primary action. Using it for body text or for error/failure states conflicts with its established positive-action meaning. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast verification the default check on any new role pairing. 

### ⚠️ warning (2)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 700, 900

> Spotify's editorial headlines use Spotify Circular Bold (700) or Black (900) for hero typography. Lighter cuts read as body or UI weight and compromise the editorial voice. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> Spotify's hero and section headers run materially larger than the player UI's body text. A 1.5× floor preserves the display-to-prose hierarchy the editorial voice depends on. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** roles.colors.background, roles.colors.text-primary
- **doesNotPairWith:** spotify-green-legacy

> The signature green pairs cleanly with black canvas and white text. Combining the current green with the legacy green on the same surface creates a muddy two-green composition that reads as inconsistency. 

## Provenance

- **Source:** <https://developer.spotify.com/documentation/design>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Spotify AB — Spotify, the Spotify wordmark, and the three-arc "soundwave" mark are registered trademarks of Spotify AB. Spotify Circular is licensed from Lineto. This atom captures brand-atoms' read of Spotify's publicly available developer design documentation and brand assets; it is not an official Spotify brand-guidelines document. 
- **Imported:** `2026-05-17`
- **Notes:** Spotify's brand identity is anchored on the green-on-black pairing. The 2015 brand refresh introduced the brighter #1ED760 as the primary green while retaining #1DB954 for legacy surfaces. Both coexist; the brighter green dominates current product. 

---

*Generated by the brand-atoms converter. Source: `spotify@1.0.0` from the encyclopedia.*