Millions of songs and podcasts. No credit card required. Try Premium free for a month and listen to an ad-free world that learns what you love.
A daily refresh of mixes, throwbacks, and discoveries — built from your listening, your skips, and the rooms you keep coming back to.
Podcasts, audiobooks, live sessions, and DJ — every kind of listening, gathered into a single ad-free experience.
A radio-style stream of music picked for you, with smart commentary on artists you love — and ones you'd love if you only met them.
From overnight obsessions to longform investigations — exclusive originals and millions of episodes, in one place that remembers where you left off.
All Premium plans include ad-free music, offline listening, and unlimited skips. Cancel anytime.
No commitments. Cancel anytime. Premium recommends what you love next.
Spotify's UI is a study in restraint — five shades of charcoal, one functional green, and a strict geometry of pills and circles. Below: the tokens behind the cocoon.
Near-black surfaces stacked by shade. Spotify Green appears only on functional surfaces — play controls, active states, primary CTAs. Album art provides every other color in the room.
CircularSp family (SpotifyMixUI / SpotifyMixUITitle) — substituted here with Inter. Bold/regular binary hierarchy. Buttons stay uppercase with 1.4–2px tracking.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --title-section | Section Title | 24 / 1.50rem | 700 | normal |
| --heading-feature | Feature Heading | 18 / 1.13rem | 600 | normal |
| --body-bold | Emphasized body | 16 / 1.00rem | 700 | normal |
| --body | Standard body | 16 / 1.00rem | 400 | normal |
| --button-upper | Play Now | 14 / 0.88rem | 700 | 1.4–2px |
| --nav-active | Home | 14 / 0.88rem | 700 | normal |
| --nav-inactive | Search | 14 / 0.88rem | 400 | normal |
| --caption | 3:42 · 2.1M plays | 14 / 0.88rem | 400 | normal |
| --small-bold | EXPLICIT | 12 / 0.75rem | 700 | normal |
| --badge | New | 10.5 / 0.66rem | 600 | normal |
Pill-and-circle geometry. Buttons land at 500px / 9999px; play controls at 50%; cards stay subtle at 6–8px.
Pills, circles, and inset inputs — the tactile vocabulary of a music device translated to the screen.