Design System

Music for
everyone,
everywhere.

A vibrant dark canvas with green accents, rounded corners, and bold typography. Built for rhythm and discovery.

17 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Dark neutrals with vibrant Spotify Green accent. 17 tokens across backgrounds, text hierarchy, and interactive elements.

Spotify Green
#1DB954
Primary brand, CTAs, active states
Spotify Green Light
#1ED760
Hover states, highlights
Background Base
#121212
Primary page background
Background Elevated
#181818
Cards, sidebars
Background Highlight
#282828
Hover states, active rows
Background Tinted
#333333
Borders, pressed states
Surface
#1A1A1A
Modals, dropdowns
Text Primary
#FFFFFF
Headings, body text, icons
Text Secondary
#B3B3B3
Subtitles, metadata
Text Subdued
#6A6A6A
Placeholders, disabled
Typography

Type Scale

Circular as primary typeface (Inter substitute). Geometric, clean, with bold weights for emphasis on dark backgrounds.

Display Music for everyone 48px / 1.0 / −0.02em
Heading-xl Your Library 32px / 1.2 / −0.02px
Heading Good evening 24px / 1.2 / −0.015px
Heading-sm Made for you 20px / 1.33 / −0.01px
Subheading Recently played 16px / 1.43 / 0
Body Default body text for track listings 14px / 1.5 / 0
Caption 3:45 · 1,234,567 plays 11px / 1.6 / 0.02px
Layout

Spacing & Shapes

Base unit 4px. Comfortable density. Pill-shaped buttons, rounded cards. 14-step spacing scale.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 2px
md 4px
cards 8px
pill 500px
Elevation

Surface System

Four distinct surface levels for depth hierarchy. No shadows — use background shifts.

Base #121212
Elevated #181818
Highlight #282828
Tinted #333333
Components

Interactive Elements

Pill-shaped CTAs, rounded cards with play overlays, track rows, and progress bars.

Green CTA Button
Primary call to action
.btn-primary
Spotify Green (#1DB954) background, pill shape (500px), white text. Hover brightens to #1ED760.
Album Card
Content discovery
.album-card
Discover Weekly
Your weekly mixtape
Chill Vibes
Spotify
Today's Top Hits
The hottest tracks
8px radius, #181818 background. Green play button appears on hover. Hover shifts background to #282828.
Track Row
Song listings
.track-row
1
Blinding LightsThe Weeknd
After Hours 3:20
2
LevitatingDua Lipa
Future Nostalgia 3:23
3
StayThe Kid LAROI, Justin Bieber
F*CK LOVE 3 2:21
Grid layout with number, title, artist, album, duration. Hover shows #282828 background. Playing track title in Spotify Green.
Progress Bar
Playback seek control
.progress-bar
1:23
3:20
4px track height, #4D4D4D track, #B3B3B3 fill (green on hover). Handle appears on hover.
Sidebar Navigation
Primary app navigation
.sidebar
Home
Search
Your Library
Active: #fff text, #282828 background. Inactive: #B3B3B3 text. Hover: #fff text.
Guidelines

Do's & Don'ts

Do — Embrace
  • #121212 as primary background — never pure black
  • Spotify Green exclusively for CTAs and active playback
  • Pill shapes (500px) for all buttons and chips
  • 8px radius for cards and containers
  • #B3B3B3 for secondary text, never primary
  • 16px minimum spacing between interactive elements
  • Let album art be the visual focal point
Don't — Avoid
  • Pure black (#000000) as background
  • Spotify Green for body text on dark backgrounds
  • Mixing pill buttons with sharp corners
  • Heavy drop shadows — use background shifts
  • More than 2 text colors in one view
  • Text on album art without overlays
  • Decorative borders — use #282828 shifts