iOS Design Spec

# The system app that sings in Dolby Atmos.

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.

View Design Tokens Explore Surfaces
9:41

# Library

Edit
Playlists
Artists
Albums
Songs
Music Videos
Downloaded
Recently Added
After Hours
The Weeknd
Currents
Tame Impala
Random Access
Daft Punk
Norman F***ing
Lana Del Rey
Blinding Lights
The Weeknd
Listen Now
Browse
Radio
Library
Search
Library
9:41
ATMOS
Blinding Lights
The Weeknd · After Hours
1:14-2:18
Now Playing
9:41
Good evening

# Jiang Shu

## Stations for YouSee All

Made for Jiang
Indie Station
Chill Mix
Discovery

## Recently Played

After Hours
The Weeknd
Currents
Tame Impala
Random Access
Daft Punk
In Rainbows
Radiohead
New Release

### Songs for the Drive Home

Curated by Apple Music
Listen Now
Browse
Radio
Library
Search
Listen Now
iOS Surface Anatomy

## White canvas. Pink mark. Album art does the rest.

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.

### Listen Now

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.

### Now Playing

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.

### Library

Standard iOS section list — Playlists / Artists / Albums / Songs / Music Videos / Downloaded — with the pink chevron, then a 2-column "Recently Added" grid.

Time-synced lyrics

### Karaoke that knows the beat.

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`
I been tryna call
I been on my own for long enough
Maybe you can show me how to love, maybe
I'm going through withdrawals
You don't even have to do too much
tap line to seek · syncs at song timestamps
Speakers & TVs
iPhone
AirPods Pro
HomePod (Living Room)
Apple TV (Bedroom)
AirPlay device picker

### One sheet, every speaker in the house.

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`
Spatial Audio

### Dolby Atmos lives at the top right.

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`
DOLBY ATMOS
Blinding Lights
After Hours · Dolby Atmos
Design System Reference

## The system aesthetic, signed in pink.

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.

View Source ↗

### Color

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.

Primary Brand
AM Pink
#FA233B
AM Pink Soft
#FB5C74
AM Gradient
FA→FB
Canvas
#FFFFFF
Ink
#000000
System Gray Ladder
Label
#1C1C1E
Label 2
#3A3A3C
Muted
#8E8E93
Tertiary
#AEAEB2
Chevron
#C7C7CC
Surface
Surface 1
#FAFAFA
Grouped
#F2F2F7
Border
#E5E5EA
Separator
#D1D1D6
Mini-player Bg
white/.85
Semantic (system)
Link Blue
#007AFF
Success
#34C759
Warning
#FF9500
Destructive
#FF3B30
Atmos Bg
1C→3A

### Typography

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

### Radius

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).

Pill
2px
Tag
4px
Album
6px
Tile
8px
Button
12px
Sheet
14px
Screen
38px
Play
50%

### iOS Spec Strip

The constants Listen Now, Now Playing, and Library agree on.

Tab bar height
83pt
5 tabs. Active tab tints to #FA233B.
Mini-player height
54pt
Material blur backdrop. 40pt album art.
Now Playing play
60×60pt
White circle. 6pt y-offset 18pt blur shadow.
Station disc
78pt
Circular. Inner black hole 14pt for "vinyl" feel.
Scrubber height
5pt
Expands to 8pt during drag.
Side padding
18pt
26pt on Now Playing for breathing room.
Atmos badge
8pt radius
4-bar EQ animation pulses at track BPM.
Animation curve
spring
.35 response · .85 damping for sheet present.

### Components

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.

##### Buttons

Try It Free Subscribe Add to Library Open App

##### Inputs

New DOLBY ATMOS E

##### Cards

Blinding Lights
The Weeknd · After Hours
New Release
Songs for the Drive Home
Curated by Apple Music
View source ↗