A pure-black stage built around one enormous typographic gesture: a 128px variable display at weight 900, left-aligned across three lines, with a single word flipped to the oblique cut; the face is worked across its whole range so deliberately light 300 sub-headings sit against those 900 headlines, panels carry no borders at all, and the brand green (now #1ED760, not the retired #1DB954) is confined to the filled pill CTA while pinks, lilacs and blues stay on plan cards and imagery.
Browse Spotify in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: spotify.com/us/premium (live DOM, computed styles), 2026-07-19. No CSS custom properties are published — every value is read from computed styles. Coverage: Premium marketing landing.spotify.comredirects to theopen.spotify.comweb player, so the marketing surface was captured at the Premium path. The web player (a distinct dark app shell) is not captured here. Note: the brand green is#1ED760, not the older#1DB954— the queue hint was out of date.
Spotify's marketing surface is a pure-black stage for one enormous typographic gesture. The hero headline runs at 128px in a variable display face at weight 900, and one word of it flips to an oblique cut — a mixed roman/italic headline is the brand's most recognisable typographic move. Everything else gets out of the way: white text, a #b3b3b3 muted grey, near-black #121212/#242424 panels, and no borders. Spotify Green #1ED760 appears in exactly one role — the filled pill CTA — while the wider brand palette (pinks, lilacs, blues, olives) is reserved for plan cards and editorial imagery. Weight is used as an expressive axis across the whole range, from 900 headlines down to 300 sub-headings, which is unusual and gives the page its editorial-poster feel. Feels: bold, black-stage, editorial, music-loud.
| Token | Hex | Role / usage |
|---|---|---|
green | #1ED760 | THE accent — the filled pill CTA, and only that |
black | #000000 | Page canvas and nav |
near-black | #121212 | Deep panel / text on green |
surface | #242424 | Card fill (most common panel) |
surface-2 | #222326 | Circular icon button |
white | #FFFFFF | Primary text |
| Token | Hex | Role / usage |
|---|---|---|
text | #FFFFFF | Headlines and body |
muted | #B3B3B3 | Fine print, legal copy |
muted-2 | #A7A7A7 | Secondary meta |
muted-3 | #919496 | Tertiary meta |
faint | #D9DADC | Near-white secondary |
on-green | #121212 / #000000 | Text on the green pill |
| Token | Value | Role / usage |
|---|---|---|
border-outline | #7F7F7F | The 1px outline-button border |
overlay-white-10 | rgba(255,255,255,.10) | Glass chip fill |
scrim | linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75)) | Media legibility scrim |
pink #FFD2D7 · lilac #C4B1D4 · periwinkle #576DD6 · blue #0D72EA · olive #5F8008 · violet #7358FF · amber #FFC862 · mauve #A16387 · magenta #E4078B · oxblood #701818
Rules. Green is the CTA fill and nothing else — not a link colour, not a heading colour, not a background. Panels are flat #242424 with no border. The plan/editorial hues colour plan cards and imagery only, never chrome.
SpotifyMixUITitleVariable, CircularSp-Arab — a variable face used across an unusually wide weight rangeSpotifyMixUI, CircularSp-Arab| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Hero h1 | SpotifyMixUITitleVariable | 128/normal | 900 | normal |
| Section h2 | SpotifyMixUITitleVariable | 64/normal | 800 | normal |
| Editorial h2 | SpotifyMixUITitleVariable | 48/normal | 400 | normal |
| Lead paragraph | SpotifyMixUITitleVariable | 32/normal | 300 | normal |
| Sub-heading h3 | SpotifyMixUITitleVariable | 24/normal | 300 | normal |
| Sub-heading h3 (alt) | SpotifyMixUITitleVariable | 24/normal | 400 | normal |
| Body | SpotifyMixUI | 16/normal | 400 | normal |
| Fine print | SpotifyMixUI | 12/normal | 400 | normal (#B3B3B3) |
| Button label | SpotifyMixUI | 16 | 700 | normal |
Patterns: the display face spans 300 to 900 — the full variable range is in active use, and light weights (300) are deliberately paired against the 900 hero rather than a mid-weight. Line-height is left at normal throughout and tracking is normal at every size, including 128px. The signature detail is a mixed roman/oblique headline: one word of the hero is set in the italic cut for emphasis. Sentence case; no uppercase eyebrows.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.