DESIGN.md — Spotify

Overview

Spotify's design system is built for immersive media consumption. The signature green is used sparingly — primarily for CTAs and the shuffle/play icon — while a near-black foundation lets album art become the visual hero. Circular, Spotify's custom typeface, gives all text a distinctive rounded warmth.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#1DB954	CTAs, play button, active states
color-bg	#191414	App background
color-text	#FFFFFF	Primary text
color-text-sub	#B3B3B3	Subdued text, metadata
color-surface	#282828	Cards, elevated surfaces

Neutral Palette

Token	Hex	Usage
color-base	#191414	App background
color-elevated	#282828	Cards
color-highlight	#3E3E3E	Hover states
color-subdued	#535353	Player track
color-text-subdued	#B3B3B3	Secondary text

Semantic Colors

Token	Hex	Usage
color-positive	#1DB954	Active, playing state
color-negative	#E91429	Remove from library
color-warning	#FFA42B	Warning, alerts

Typography

Role	Family	Size	Weight	Line Height
Display	Circular	64px	900	1.1
Heading	Circular	32px	700	1.2
Body	Circular	16px	400	1.5
Caption	Circular	12px	400	1.4
Track Title	Circular	14px	700	1.3

Spacing

Token	Value	Usage
space-1	4px	Track meta gaps
space-2	8px	Card inner spacing
space-4	16px	Grid gap
space-6	24px	Section padding
space-8	32px	Header spacing

Border Radius

Token	Value	Usage
radius-sm	4px	Album art corners
radius-md	8px	Cards
radius-full	9999px	Avatars, progress bar

Elevation

Level	Value	Usage
shadow-card	0 4px 16px rgba(0,0,0,0.5)	Hovered cards
shadow-overlay	0 8px 24px rgba(0,0,0,0.7)	Now playing panel

Components

Album Card

• Square album art (varies by grid), title + artist below
• Hover reveals green play button overlay
• Rounded 8px corners on artwork

Now Playing Bar

• Fixed bottom bar, 90px height
• Track info left, controls center, volume right
• Progress bar: green on dark gray track

Playlist Header

• Gradient background sampled from cover art
• Large cover, title, creator, duration stats
• Play and shuffle buttons

Do's and Don'ts

Do

• Let album art drive the visual palette per screen
• Use green only for primary interactive elements
• Use Circular at Black (900) weight for hero moments

Don't

• Don't use green for backgrounds or large surfaces
• Don't crop album art into non-square shapes
• Don't use system fonts — Circular is core to the brand