iOS Design Spec

# An interface that disappears
so the music doesn't.

The Spotify iOS app, dissected. #121212 canvas. One functional green. Pill-and-circle geometry. Album art is the only color in the room.

View Design Tokens Explore Surfaces
9:41
J Your Library
Playlists Artists Albums Podcasts
Liked Songs
Playlist · 1,247 songs
Discover Weekly
Playlist · Made for You
Tame Impala
Artist
After Hours
Album · The Weeknd
Midnight Drive
Playlist · 42 songs
Coding Mode
Playlist · 86 songs
Blinding Lights
The Weeknd
Home
Search
Library
Your Library
9:41
Playing from albumAfter Hours
Blinding Lights
The Weeknd
1:14-2:18
iPhone · AirPods Pro
Now Playing
9:41
All Music Podcasts
Liked Songs
Discover Weekly
After Hours
Midnight Drive
Daily Mix 1
Coding Mode
Made for Jiang Shu
Discover Weekly
Your week. Your music.
Daily Mix 1
Tame Impala, Mac Demarco
Release Radar
Catch all the latest.
Recently Played
After Hours
The Weeknd
Currents
Tame Impala
Home
Search
Library
Home
iOS Surface Anatomy

## Three surfaces. One unmistakable green.

Every Spotify screen earns its position on an iPhone through the same rules — black canvas, soft surface ladders, pill-shaped controls, and exactly one accent that means "this is interactive."

### Home

2x3 quick-access tiles above horizontal carousels. Top gradient fades from `#283d2b` into `#121212` — a soft hand-off, no border. Chips at the top filter the feed; the active chip flips to `#1ed760`.

### Now Playing

The album art's dominant color becomes the screen's gradient — extracted at runtime, capped at 80% saturation. White play button sits 60×60 at the optical center. Heart turns `#1ed760` when saved.

### Your Library

Vertical list, 52px artwork, double-line meta. Filter pills become solid white when active (inverse of Home). Mini-player floats persistent above the tab bar at `#3a3a3a`.

Dynamic Island

### Live Activity that breathes with the track.

While Spotify plays, the island carries the album art on the left and a 7-bar waveform animation on the right — pulsing at the song's BPM. Long-press expands to scrubber + skip controls without leaving the host app.

Waveform color follows the extracted gradient. Default fallback: `#1ed760`.

`compact: 96 × 28` `expanded: 359 × 160` `radius: 999px` `blur: 20px`
Compact state · BPM-synced
Play / Pause
UIImpactFeedbackGenerator · light
Skip / Previous
UIImpactFeedbackGenerator · medium
Like (toggle on)
UINotificationFeedback · success
Scrubber landing
UISelectionFeedback · click
Haptics

### Every tap has a weight.

Spotify pairs visual state changes with Apple's haptic vocabulary — light for play/pause, medium for skip, success for liking a track, selection for landing a scrubber on a beat marker.

Haptics fire even on the lock screen widget. The system honors the user's iOS "Reduce Motion" preference and falls back gracefully when System Haptics are disabled.

`light` `medium` `success` `selection`
Lock Screen · Control Center

### Now Playing, anywhere iOS will host it.

The MPNowPlayingInfoCenter contract: album art, title, artist, scrubber, transport. Spotify pushes a translucent widget that adopts the system glass backdrop — no Spotify chrome at all, just metadata and white iconography.

AirPlay routing surface inherits the green accent for the selected device row only.

`UIBlurEffect: systemMaterialDark` `corner: 14px` `accent: #1ed760`
9:41
Tuesday, May 20
Blinding Lights
The Weeknd
2:01-1:39
Design System Reference

## The whole vocabulary, in one place.

Every token Spotify's iOS app reaches for — surface ladder, type ramp, radius scale, components. Use it as a paste-grade reference; the green is the only color you don't get to negotiate.

View Source ↗

### Color

Near-black surfaces stacked in five shades. Spotify Green appears only on functional surfaces — play controls, active states, primary CTAs, the heart. Album art provides every other color in the room.

Primary Brand
Spotify Green
#1ed760
Green Border
#1db954
Near Black
#121212
Dark Surface
#181818
Mid Dark
#1f1f1f
Text
White
#ffffff
Bright
#fdfdfd
Soft
#cbcbcb
Silver
#b3b3b3
Dim
#7c7c7c
Surface & Border
Card
#252525
Card Alt
#272727
Mini-player
#3a3a3a
Border Gray
#4d4d4d
True Black
#000000
Semantic
Negative
#f3727f
Warning
#ffa42b
Announcement
#539df5
Active Gradient
extracted
Now Playing Bg
art-derived

### Typography

CircularSp family — substituted here with Inter. Bold/regular binary hierarchy. Buttons stay uppercase with 1.4–2px tracking. Numbers in scrubbers and durations use tabular figures so they don't jitter.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--title-screen | Good evening | 28 / 1.75rem | 800 | -0.5px
--title-section | Made for Jiang Shu | 22 / 1.38rem | 800 | -0.4px
--now-playing-title | Blinding Lights | 20 / 1.25rem | 800 | -0.4px
--body-bold | Discover Weekly | 16 / 1.00rem | 700 | normal
--body | Your week. Your music. | 14 / 0.88rem | 400 | normal
--button-upper | Play Now | 14 / 0.88rem | 700 | 1.4–2px
--tab-active | Home | 11 / 0.69rem | 600 | normal
--scrubber-time | 1:14 / 3:32 | 11 / 0.69rem | 500 (tnum) | normal
--badge | Explicit | 10.5 / 0.66rem | 700 | 0.4px

### Radius

Pill-and-circle geometry. Buttons land at 500px / 9999px; play controls at 50%; cards stay subtle at 4–8px. The mini-player at the bottom uses only 6px — the corners want to be felt, not seen.

Minimal
2px
Tile
4px
Cover
6px
Card
8px
Widget
14px
Screen
38px
Pill
500px
Play
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar height
83pt
Including the 34pt home indicator safe area.
Mini-player height
56pt
Sits 0pt above the tab bar, persistent across screens.
Now Playing play
60×60pt
White circle, black glyph. The only white circle on the screen.
Album art radius
6pt
Drops to 4pt on tiles, 50% on artist circles.
Scrubber height
3pt
Expands to 6pt during drag with haptic landing.
Side padding
16pt
14pt on Home tile-grid, 24pt on Now Playing.
Card shadow
y8 b24
rgba(0,0,0,0.5). Album art and modal sheets only.
Animation curve
easeOut
.25s default. .35s for sheet presentations.

### Components

Pills, circles, and inset inputs — the tactile vocabulary of a music device translated to the screen.

##### Buttons

Get Premium Follow Following Open App

##### Inputs

Explicit New Podcast

##### Cards

Discover Weekly
Your week. Your music.
Midnight Drive
Neon Carousel
View source ↗