What is Spotify's primary brand color and how is it used?

Spotify Green is #1ed760 — a vivid functional green used scarcely. It only appears on play and pause controls, active navigation items, and primary CTAs. It is never decorative, never used as a background, and never paired with a secondary brand accent. The complete brand palette is green plus a stack of achromatic charcoals (#121212, #181818, #1f1f1f) — album artwork is expected to provide all other color on the page.

Does Spotify's design system have a light mode?

No — Spotify's web product is dark-first by design. The base canvas is #121212, cards step up to #181818, and interactive surfaces sit at #1f1f1f. A single light-pill component (#eeeeee fill, #181818 text) exists for marketing CTAs like cookie consent and rare light-mode banners, but the core listening experience is always near-black. Dark immersion is core to the identity; light backgrounds break it.

What typography does Spotify use, and what if SpotifyMixUI isn't available?

Spotify runs SpotifyMixUI and SpotifyMixUITitle, both proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) and licensed only to Spotify. The fallback stack walks CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, then Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, and MS Gothic. If you cannot license Circular, Inter is the closest open-source substitute — tighten letter-spacing on uppercase button labels to 1.4–2px to preserve the systematic label voice.

Why does Spotify use pill and circle shapes for every button?

Pill-and-circle geometry is the system's tactile signature. Primary buttons run 500–9999px radius (full pill), circular play controls use 50% radius, and search inputs render as 500px pills. The result feels like a premium audio device — rounded, touch-optimized, and clearly interactive. Square corners break the identity, which is why even outlined secondary buttons and navigation pills inherit the same pill shape rather than a softer 8px rounding.

Can I use this DESIGN.md to build a React music or media app?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or any tool that reads structured tokens and the agent will reproduce the dark immersion, pill geometry, and functional green-accent discipline rather than defaulting to a generic shadcn theme. You can also reference tokens directly: every color, type style, radius, shadow, and component recipe is a quoted value ready for Tailwind config, CSS variables, or your own component library. The 30 component recipes cover the full surface area of a listening app — buttons, cards, search, navigation, play controls.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section: motion and transition timings, the now-playing bar progress scrubber visual states, equalizer and waveform component styling, full hover-state color shifts (the system uses subtle background lightening that's hard to extract reliably), and the mobile-app bottom-bar navigation which lives in native shells rather than the web product. The spec captures roughly 95% of the public web listening interface.

Spotify Design System

Spotify's design system as a DESIGN.md file.

About Spotify DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source spotify.com

Music, Video & Streaming

Spotify's web interface is a near-black theater built around one principle: the UI disappears so the content can glow. Three charcoal surfaces stack the page in shade (#121212 base, #181818 cards, #1f1f1f interactive fills), and the only true color comes from album artwork plus Spotify Green (#1ed760), which is reserved exclusively for play buttons, active navigation, and primary CTAs. The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family with an extensive fallback stack covering Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK scripts to serve Spotify's 180+ markets.

This page packages the full system into a single DESIGN.md file built on the Google Labs spec. Inside: 19 color tokens grouped into brand, text, semantic, surface, and shadow roles; 14 type styles spanning a compact 10px–24px range; 9 corner radii from 2px badges through 9999px full pills; a 20-step spacing scale built on an 8px base unit; and 30 component recipes covering dark pills, outlined pills, circular play buttons, search pills with inset borders, dark cards, and the achromatic sidebar navigation.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes React components that match Spotify's voice — pill geometry, uppercase tracking, heavy dark-mode shadows — rather than a generic dashboard theme. Or reference the tokens directly: every hex, font-stack, radius, and shadow definition is quoted and ready to paste into Tailwind config or CSS variables. The system is worth studying for the discipline of letting one functional accent and a single typeface family carry an entire app — restraint as identity, not as compromise.

What makes it distinct

Near-black immersive canvasthree charcoal surfaces (#121212, #181818, #1f1f1f) let album art carry every drop of color
Single accent voltageSpotify Green (#1ed760) is functional only, reserved for play controls, active states, and CTAs
Pill-and-circle geometry500px to 9999px radii on buttons, 50% on play controls, no square interactive surface anywhere
Uppercase button labels with 1.4–2px trackinga systematic 'label voice' distinct from running content text
Heavy shadow language0.5 opacity at 24px blur for dialogs, an inset rgb(124,124,124) border for tactile input depth

Live at spotify.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

spotify.com

Explore Spotify

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Spotify design system FAQ

Common questions about Spotify's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Spotify in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→