Apple Music on iOS, dissected. SF Pro Display at -0.5px tracking. A pink-red brand mark, white canvas, art-derived Now Playing gradient, and lyrics that glow at the beat.
Apple Music inherits its skeleton from iOS — large titles, grouped lists, SF Pro typography — and lets the dynamic Now Playing gradient be the only "designed" surface in the app.
iOS large title at 32pt/800. Horizontal Stations carousel with 78pt circular disks, then a 2×3 Recently Played grid, then a gradient hero card.
Modal sheet pulled up from the mini-player. Album-art-derived gradient backdrop, large square cover, white 60pt circular play, and the iconic time-synced lyrics scroll.
Standard iOS section list — Playlists / Artists / Albums / Songs / Music Videos / Downloaded — with the pink chevron, then a 2-column "Recently Added" grid.
Tap the lyric icon during Now Playing and the cover shrinks. Lyrics scroll past at the song's actual timestamps; the active line is 24pt/800 in full opacity, neighbors fade to 0.55, the line two-away dims to 0.35.
Tap any line to seek to its timestamp. The gradient backdrop comes from the album art's dominant hue, capped at 80% saturation.
active: 24pt/800
dim-1: opacity .55
dim-2: opacity .35
seek-on-tap: on
The standard iOS AirPlay sheet — translucent systemMaterialLight, 14pt corner, 50pt row height. Selected device gets the pink color treatment on its icon, name, and checkmark.
Headphones get a circle icon, HomePod gets a tonal disc, Apple TV gets the rectangular speaker glyph. Categories are uppercase 13pt at 0.6px tracking.
blur: systemMaterialLight
radius: 14pt
selected: #FA233B
When the playing track is mastered in Dolby Atmos, an ATMOS badge appears at the top-right of Now Playing — black gradient with a 4-bar animated equalizer that pulses with the music.
The badge becomes a button: tap it to surface the Spatial Audio settings sheet (Always On / Fixed / Off) without leaving Now Playing.
badge: 13pt/700
bg: #1C1C1E gradient
radius: 8pt
Apple Music's iOS token set inherits Apple's HIG — SF Pro Display, system gray ladder, large titles at -0.5px — and ships exactly one brand color on top.
A bright white canvas, Apple's system gray ladder for text, and one pink-red gradient that lives only on the brand mark, Now Playing accents, and active tab labels.
SF Pro Display in production — substituted with Inter. All large titles use -0.5px tracking. Numbers use tabular figures. Bold 700–800 for titles; body stays at 400.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --large-title | Library | 32 / 2.0rem | 800 | -0.8px |
| --screen-title | Good evening, Jiang | 26 / 1.63rem | 800 | -0.5px |
| --section-title | Recently Played | 18 / 1.13rem | 800 | -0.5px |
| --np-title | Blinding Lights | 18 / 1.13rem | 700 | -0.4px |
| --lyric-active | Maybe you can show me | 24 / 1.5rem | 800 | -0.4px |
| --list-row | Playlists | 15 / 0.94rem | 400 | normal |
| --meta-line | The Weeknd · After Hours | 11 / 0.69rem | 500 | normal |
| --tab-active | Listen Now | 9.5 / 0.59rem | 600 | normal |
| --scrubber-time | 1:14 / 3:32 | 10 / 0.63rem | 500 tnum | normal |
Soft Apple-system corners — 6pt on album art, 10pt on the mini-player surface, 14pt on modal sheets. Buttons at 12pt. Brand mark at 7pt (the famous rounded squircle).
The constants Listen Now, Now Playing, and Library agree on.
System-style components signed in pink. Pills are softer (12pt vs 4pt), text is heavier, and the play circle is the iconic Apple Music moment.