The Spotify iOS app, dissected. #121212 canvas. One functional green. Pill-and-circle geometry. Album art is the only color in the room.
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."
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.
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.
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.
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
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.
lightmediumsuccessselection
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
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.
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.
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 |
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.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Pills, circles, and inset inputs — the tactile vocabulary of a music device translated to the screen.