Spotify Design System

8 colors20 componentsSatoshi / CerealAug 2026

Verified Design Specv2.4.0

Design System Inspired by Spotify

1. Visual Theme & Atmosphere

Section 01

Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.

The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.

What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.

**Key Characteristics:**

Near-black immersive dark theme (`#121212`–`#1f1f1f`) — UI disappears behind content

Spotify Green (`#1ed760`) as singular brand accent — never decorative, always functional

SpotifyMixUI/CircularSp font family with global script support

Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized

Uppercase button labels with wide letter-spacing (1.4px–2px)

Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)

Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)

Album art as the primary color source — the UI is achromatic by design

2. Color Palette & Roles

Section 02

Primary Brand

Section 03

Spotify Green (`#1ed760`): Primary brand accent — play buttons, active states, CTAs

Near Black (`#121212`): Deepest background surface

Dark Surface (`#181818`): Cards, containers, elevated surfaces

Mid Dark (`#1f1f1f`): Button backgrounds, interactive surfaces

Text

Section 04

White (`#ffffff`): `--text-base`, primary text

Silver (`#b3b3b3`): Secondary text, muted labels, inactive nav

Near White (`#cbcbcb`): Slightly brighter secondary text

Light (`#fdfdfd`): Near-pure white for maximum emphasis

Semantic

Section 05

Negative Red (`#f3727f`): `--text-negative`, error states

Warning Orange (`#ffa42b`): `--text-warning`, warning states

Announcement Blue (`#539df5`): `--text-announcement`, info states

Surface & Border

Section 06

Dark Card (`#252525`): Elevated card surface

Mid Card (`#272727`): Alternate card surface

Border Gray (`#4d4d4d`): Button borders on dark

Light Border (`#7c7c7c`): Outlined button borders, muted links

Separator (`#b3b3b3`): Divider lines

Light Surface (`#eeeeee`): Light-mode buttons (rare)

Spotify Green Border (`#1db954`): Green accent border variant

Shadows

Section 07

Heavy (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels

Medium (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns

Inset Border (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo

3. Typography Rules

Section 08

Font Families

Section 09

Title: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`

UI / Body: `SpotifyMixUI`, same fallback stack

Hierarchy

Section 010

|------|------|------|--------|-------------|----------------|-------|

Principles

Section 011

Bold/regular binary: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.

Uppercase buttons as system: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.

Compact sizing: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.

Global script support: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.

4. Component Stylings

Section 012

Buttons

Section 013

**Dark Pill**

Background: `#1f1f1f`

Text: `#ffffff` or `#b3b3b3`

Padding: 8px 16px

Radius: 9999px (full pill)

Use: Navigation pills, secondary actions

**Dark Large Pill**

Background: `#181818`

Text: `#ffffff`

Padding: 0px 43px

Radius: 500px

Use: Primary app navigation buttons

**Light Pill**

Background: `#eeeeee`

Text: `#181818`

Radius: 500px

Use: Light-mode CTAs (cookie consent, marketing)

**Outlined Pill**

Background: transparent

Text: `#ffffff`

Border: `1px solid #7c7c7c`

Padding: 4px 16px 4px 36px (asymmetric for icon)

Radius: 9999px

Use: Follow buttons, secondary actions

**Circular Play**

Background: `#1f1f1f`

Text: `#ffffff`

Padding: 12px

Radius: 50% (circle)

Use: Play/pause controls

Cards & Containers

Section 014

Background: `#181818` or `#1f1f1f`

Radius: 6px–8px

No visible borders on most cards

Hover: slight background lightening

Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated

Inputs

Section 015

Search input: `#1f1f1f` background, `#ffffff` text

Radius: 500px (pill)

Padding: 12px 96px 12px 48px (icon-aware)

Focus: border becomes `#000000`, outline `1px solid`

Navigation

Section 016

Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive

`#b3b3b3` muted color for inactive items, `#ffffff` for active

Circular icon buttons (50% radius)

Spotify logo top-left in green

5. Layout Principles

Section 017

Spacing System

Section 018

Base unit: 8px

Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px

Grid & Container

Section 019

Sidebar (fixed) + main content area

Grid-based album/playlist cards

Full-width now-playing bar at bottom

Responsive content area fills remaining space

Whitespace Philosophy

Section 020

Dark compression: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.

Content density over breathing room: This is an app, not a marketing site. Every pixel serves the listening experience.

Border Radius Scale

Section 021

Minimal (2px): Badges, explicit tags

Subtle (4px): Inputs, small elements

Standard (6px): Album art containers, cards

Comfortable (8px): Sections, dialogs

Medium (10px–20px): Panels, overlay elements

Large (100px): Large pill buttons

Pill (500px): Primary buttons, search input

Full Pill (9999px): Navigation pills, search

Circle (50%): Play buttons, avatars, icons

6. Depth & Elevation

Section 022

| Level | Treatment | Use |

|-------|-----------|-----|

| Base (Level 0) | `#121212` background | Deepest layer, page background |

| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |

| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |

| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |

| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |

**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic "floating in darkness" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.

7. Do's and Don'ts

Section 023

Do

Section 024

Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation

Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs

Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls

Apply uppercase + wide letter-spacing (1.4px–2px) on button labels

Keep typography compact (10px–24px range) — this is an app, not a magazine

Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds

Let album art provide color — the UI itself is achromatic

Don't

Section 025

Don't use Spotify Green decoratively or on backgrounds — it's functional only

Don't use light backgrounds for primary surfaces — the dark immersion is core

Don't skip the pill/circle geometry on buttons — square buttons break the identity

Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible

Don't add additional brand colors — green + achromatic grays is the complete palette

Don't use relaxed line-heights — Spotify's typography is compact and dense

Don't expose raw gray borders — use shadow-based or inset borders instead

8. Responsive Behavior

Section 026

Breakpoints

Section 027

| Name | Width | Key Changes |

|------|-------|-------------|

| Mobile Small | <425px | Compact mobile layout |

| Mobile | 425–576px | Standard mobile |

| Tablet | 576–768px | 2-column grid |

| Tablet Large | 768–896px | Expanded layout |

| Desktop Small | 896–1024px | Sidebar visible |

| Desktop | 1024–1280px | Full desktop layout |

| Large Desktop | >1280px | Expanded grid |

Collapsing Strategy

Section 028

Sidebar: full → collapsed → hidden

Album grid: 5 columns → 3 → 2 → 1

Now-playing bar: maintained at all sizes

Search: pill input maintained, width adjusts

Navigation: sidebar → bottom bar on mobile

9. Agent Prompt Guide

Section 029

Quick Color Reference

Section 030

Background: Near Black (`#121212`)

Surface: Dark Card (`#181818`)

Text: White (`#ffffff`)

Secondary text: Silver (`#b3b3b3`)

Accent: Spotify Green (`#1ed760`)

Border: `#4d4d4d`

Error: Negative Red (`#f3727f`)

Example Component Prompts

Section 031

"Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."

"Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."

"Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."

"Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."

"Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."

Iteration Guide

Section 032

1. Start with #121212 — everything lives in near-black darkness

2. Spotify Green for functional highlights only (play, active, CTA)

3. Pill everything — 500px for large, 9999px for small, 50% for circular

4. Uppercase + wide tracking on buttons — the systematic label voice

5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark

6. Album art provides all the color — the UI stays achromatic

72,570+ DESIGN.md files generated