A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
13type steps
4radius steps
4pxspacing base
Apple Music, in one page
Apple Music's iOS app is the flagship showcase of Apple's own design language — a first-party experience that leans heavily into SF Pro, SF Symbols, system materials (blurs and vibrancy), and haptics. It exists to do one thing: put album art front and center, wrap it in a light-and-air clean interface, and let you fall into an album. The canvas is pure white (#FFFFFF) in light mode and true black (#000000) in dark — unusually Apple uses the full-contrast black instead of the softer #121212 most other media apps favor, because the Now Playing screen's album-art-derived gradient needs the deepest canvas to pop.
The accent system centers on Apple Music Red (#FA2D48) — sometimes rendered as a slightly warmer brand coral (#FC3C44) depending on the surface. It's the color of the Play button on Now Playing, the Apple Music logomark, and the "Now Playing" indicator on the mini-player. Apple Music is more generous with its accent than Spotify or Netflix are — the red is also used for the scrubber fill, the heart like state, the "Shuffle" toggle when active, and the "Join Apple Music" CTA. The result is a more classically-iOS feel: the red is a first-party accent rather than a single sacred verb, and it plays nicely with the iOS system blue for links and the palette of Album-art-derived colors on the Now Playing screen.
Typography is 100% SF Pro — Apple's native font — at the full spectrum of sizes and weights the system offers. There's no custom typeface; Apple Music leans into SF Pro's built-in optical variants (SF Pro Display at 20pt+, SF Pro Text below). The hierarchy is wide: from giant 34pt large titles on "Listen Now" cards to 11pt tertiary metadata, all rendered in SF Pro weights from 400 to 700. The most expressive type moments are the hero cards on Listen Now (24–34pt bold over album-art hero imagery) and the time-synced lyrics view, where each line of lyrics scales larger as it becomes the current line being sung.
Key Characteristics:
- SF Pro throughout — no custom font — Apple Music leans fully into iOS system language
- Light canvas
#FFFFFF/ dark canvas#000000— full-contrast black, not warm#121212 - Apple Music Red (
#FA2D48) as primary accent — Play button, Now Playing indicator, Shuffle active, heart liked - Listen Now hero cards — large editorial cards with full-bleed album art, 24–34pt titles
- Larger album tiles with 12pt corner radius — signature softer-than-Spotify corner
- Dolby Atmos badge — golden glow indicator on supported tracks/albums
- Time-synced lyrics view with word-by-word highlight — a defining Apple Music feature
- Mini-player sits above the tab bar with artwork, title, and play/pause
- Now Playing expands to full-screen with album art as hero, album-art-derived gradient background
- Bottom tab bar: Home (Listen Now), New, Radio, Library, Search — 5 tabs
- System materials everywhere:
.regularMaterial,.thinMaterialblurs throughout - SF Symbols for all icons; native iOS haptics on all actions
Do's and don'ts
Do
- Use SF Pro exclusively — Apple Music is Apple's flagship first-party app; resist adding custom fonts
- Use
#000000as the dark canvas — full-contrast black, not#121212 - Use 12pt corner radius on album art tiles — larger than most media apps, Apple Music's signature
- Reserve Apple Music Red (
#FA2D48) for the Play button, Now Playing indicator, heart, shuffle active, and scrubber fill - Use iOS system materials (
.regularMaterial) for nav, tab bar, and mini-player backgrounds - Use SF Symbols for every icon — never ship a custom glyph that has an SF Symbol equivalent
- Respect Dynamic Type at all sizes — Apple Music is one of the best-behaved apps for AX5
- Extract album-art colors for Now Playing gradient using Core Image
- Implement time-synced lyrics with word-by-word highlight when lyric data is available
- Show Dolby Atmos and Lossless badges on supported tracks
- Use iOS haptics:
.softon Play,.successon heart like,.selectionon shuffle / tab - Use iOS large-title navigation with scroll-collapse behavior
- Use system blue
#007AFFfor inline links (artist names in descriptions), NOT Apple Music red
Don't
- Don't use a custom font — SF Pro covers every need in Apple Music
- Don't use
#121212or warmer dark canvases — Apple Music goes full#000000 - Don't use 6pt corner radius on album art — 12pt is signature, softer
- Don't use Apple Music Red for secondary actions, borders, or generic accents — use system blue, gray, or label colors
- Don't roll your own Play button when SF Symbol
play.fillexists - Don't disable Dynamic Type — Apple Music is a poster-child app for accessibility
- Don't flatten materials to opaque backgrounds — the translucency is part of the app's identity
- Don't hide the mini-player during active playback — it's persistent UX
- Don't use italic text — Apple Music never uses italic; emphasis comes from weight / color / size
- Don't animate aggressively — iOS motion is subtle, 250–400ms ranges, damping 0.7–0.85
- Don't show the Dolby Atmos badge on non-Atmos tracks — it's a capability indicator, not a theme
- Don't use red for the link-to-artist text globally — artist name on album detail IS red, but inline links in description should be system blue
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Apple Music design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Apple Music Red: #fa2d48
- Apple Music Coral: #fc3c44
- Red Pressed: #d4213b
- Red Dimmed: #fa2d48
- Canvas White: #ffffff
- Surface 1: #f2f2f7
- Surface 2: #ffffff
- Surface 3: #e5e5ea
- Divider: #c6c6c8
- Input Fill: #e5e5ea
Type:
- families: SF Pro, SF Pro Rounded, Fallback Stack, SF Pro Display
- scale: 10, 11, 12, 13, 15, 16, 17, 18, 20
- weights: 400, 500, 600, 700
Shape:
- radius: 8, 10, 22, 24
- elevation: Full-bleed editorial image with 16pt corner radius and a subtle shadow | Top: 240pt album artwork centered with `rgba(0,0,0,0.1)` 0 8 24 shadow | Large album art centered: 340pt × 340pt with `rgba(0,0,0,0.3)` 0 20 40 shadow
Spacing: 4, 10
Rules:
- Use SF Pro exclusively — Apple Music is Apple's flagship first-party app; resist adding custom fonts
- Use `#000000` as the dark canvas — full-contrast black, not `#121212`
- Use 12pt corner radius on album art tiles — larger than most media apps, Apple Music's signature
- Reserve Apple Music Red (`#FA2D48`) for the Play button, Now Playing indicator, heart, shuffle active, and scrubber fill
- Use iOS system materials (`.regularMaterial`) for nav, tab bar, and mini-player backgrounds
- Use SF Symbols for every icon — never ship a custom glyph that has an SF Symbol equivalent
Avoid:
- Don't use a custom font — SF Pro covers every need in Apple Music
- Don't use `#121212` or warmer dark canvases — Apple Music goes full `#000000`
- Don't use 6pt corner radius on album art — 12pt is signature, softer
- Don't use Apple Music Red for secondary actions, borders, or generic accents — use system blue, gray, or label colors
- Don't roll your own Play button when SF Symbol `play.fill` exists
- Don't disable Dynamic Type — Apple Music is a poster-child app for accessibility
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Apple Music Red (
#FA2D48): Primary brand accent — Play button, Now Playing indicator, Shuffle active state, heart liked icon, scrubber fill, section badges like "NEW", links in certain contexts. - Apple Music Coral (
#FC3C44): Slightly warmer variant — used in alternative marketing surfaces and in some templated album art. - Red Pressed (
#D4213B): Pressed / active-state variant for red CTAs. - Red Dimmed (
#FA2D48at 60% opacity): Inactive heart outline on some surfaces.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas — Home, Library, Search, Radio. - Surface 1 (
#F2F2F7): iOS system secondary background — grouped list backgrounds, section cards. - Surface 2 (
#FFFFFF): Card foreground on secondary background. - Surface 3 (
#E5E5EA): Tertiary surface — pressed rows, divider-adjacent areas. - Divider (
#C6C6C8): iOS system separator at 1/3 alpha; 1pt hairline between list rows. - Input Fill (
#E5E5EA): Search bar fill, text field backgrounds.
Canvas & Surfaces (Dark Mode)
- Canvas Black (
#000000): Primary dark canvas — full-contrast black, unusual for a media app. - Surface 1 Dark (
#1C1C1E): iOS system secondary dark background — card backgrounds, grouped list. - Surface 2 Dark (
#2C2C2E): Tertiary — raised cards, sheets. - Surface 3 Dark (
#3A3A3C): Elevated — context menus, selected row. - Divider Dark (
#38383A): Hairlines in dark mode. - Input Fill Dark (
#1C1C1E): Search bar dark fill.
Text (Light Mode)
- Label Primary (
#000000): Track titles, headlines — full iOS.labeltoken. - Label Secondary (
#3C3C43at 60% opacity): Subtitles, artist names — iOS.secondaryLabel. - Label Tertiary (
#3C3C43at 30% opacity): Timestamps, metadata — iOS.tertiaryLabel. - Label Quaternary (
#3C3C43at 18% opacity): Disabled, very low emphasis.
Text (Dark Mode)
- Label Primary Dark (
#FFFFFF): Main text on dark. - Label Secondary Dark (
#EBEBF5at 60% opacity): Artist names on dark. - Label Tertiary Dark (
#EBEBF5at 30% opacity): Metadata on dark.
Dynamic Album-Art Gradient
- Now Playing Extracted Gradient: The Now Playing screen background transitions from the dominant color of the album cover through a subtle gradient to a slightly darker variant over ~70% of the viewport
- Lyrics View Background: Similar extraction, using the album art's secondary color for contrast with the highlighted lyric line
- Mini-Player Hint: On the mini-player, a very subtle gradient tint pulls from the current track's album art, applied at low opacity
Semantic
- Dolby Atmos Gold (
#D4A857): The distinctive Atmos badge color — a rich metallic gold - Lossless Silver (
#8E8E93): The "Lossless" quality badge - iOS System Blue (
#007AFF): Links to artists, albums from inline text (e.g. in "About" section) - iOS System Green (
#34C759): Download complete indicator - Error Red (
#FF3B30): iOS system red for playback errors (not Apple Music red — these are separate)
Type scaleRead the full spec
Font Family
- Primary:
SF Pro— Apple's native font stack (SF Pro Display at 20pt+, SF Pro Text below) - Rounded variant:
SF Pro Rounded— used sparingly in Listen Now hero cards and certain editorial contexts - Fallback Stack: None needed — SF Pro is guaranteed on all iOS devices; system font stack applies automatically
- CJK / Non-Latin: Apple's system fonts — PingFang SC, Hiragino Sans, Apple SD Gothic Neo, Apple Color Emoji for emoji runs
- Apple Music uses Dynamic Type at almost every level — the app scales readably across Dynamic Type sizes from Extra Small to AX5
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | SF Pro Display | 34pt | 700 | 1.1 | 0.37 | "Listen Now", "Library" large navigation titles |
| Title 1 | SF Pro Display | 28pt | 700 | 1.15 | 0.36 | Secondary large headings |
| Listen Now Hero | SF Pro Display | 24pt | 700 | 1.2 | -0.2pt | Title on hero editorial cards |
| Title 2 | SF Pro Display | 22pt | 700 | 1.2 | -0.26 | Playlist / album hero titles |
| Title 3 | SF Pro Display | 20pt | 600 | 1.2 | -0.15 | Section headers "Recently Played" |
| Now Playing Title | SF Pro Display | 18pt | 600 | 1.25 | -0.1 | Current track title on Now Playing |
| Headline | SF Pro Text | 17pt | 600 | 1.25 | -0.43 | Track title in playlist list |
| Body | SF Pro Text | 17pt | 400 | 1.45 | -0.43 | Description, about |
| Callout | SF Pro Text | 16pt | 400 | 1.25 | -0.32 | Emphasized body text |
| Subheadline | SF Pro Text | 15pt | 400 | 1.3 | -0.24 | Artist names, secondary info |
| Footnote | SF Pro Text | 13pt | 400 | 1.3 | -0.08 | Timestamps, play counts |
| Caption 1 | SF Pro Text | 12pt | 400 | 1.3 | 0 | Badges, minor metadata |
| Caption 2 | SF Pro Text | 11pt | 400 | 1.2 | 0.07 | "Dolby Atmos" badge, "Lossless" label |
| Button | SF Pro Text | 17pt | 600 | 1.0 | -0.43 | Primary pill button labels |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | -0.24 | Bottom tab bar labels |
| Lyrics Current | SF Pro Display | 28pt | 700 | 1.2 | -0.3 | The currently-singing lyric line (scales up and fades in) |
| Lyrics Other | SF Pro Display | 22pt | 600 | 1.3 | -0.2 | Other visible lyric lines (non-current) |
Principles
- Respect Dynamic Type everywhere: Apple Music is one of the best-behaved apps for Dynamic Type — scale headlines, body, and metadata; keep Play button icon fixed, keep the mini-player fixed geometry
- Use iOS text styles when available: Headline, Body, Subheadline, Footnote, Caption 1/2 — these map 1:1 to iOS style tokens and respect accessibility automatically
- SF Pro Display vs. Text switchover at 20pt: Display for large, Text for small — the system handles this automatically if you use
.systemfont, but custom sizes need explicit specification - Rounded is a hero moment only: SF Pro Rounded appears on Listen Now editorial cards as a friendlier, more approachable vibe; the rest of the app stays on regular SF Pro
- Letter spacing follows iOS defaults: iOS ships pre-tuned tracking values for each style; don't override unless hero-sized (20pt+)
- No italic: Apple Music does not use italics anywhere — all emphasis comes from weight, color, or size
- Lyrics type scales dynamically: Current line is 28pt bold, adjacent lines are 22pt semibold, distant lines fade toward 18pt regular; this is driven by a scroll-sync that matches playback timing
Components and layoutRead the full spec
Buttons
Primary Play Button (The Red Circle)
- Shape: Circle, diameter 64pt on Now Playing, 44pt on inline contexts (track row, album hero)
- Background:
#FA2D48 - Icon: SF Symbol
play.fillin#FFFFFF, 28pt on 64pt button, 20pt on 44pt button - Pressed: scale 0.92,
.impact(.soft)haptic - Paused state:
pause.fillicon - Position on Now Playing: centered between prev/next, large 64pt size
Primary Pill ("Play", "Shuffle Play", "Join Apple Music")
- Background:
#FA2D48(brand red) for most CTAs; occasionally iOS system blue#007AFFfor "Join Apple Music" - Text:
#FFFFFFSF Pro Text 17pt weight 600 - Leading SF Symbol: often
play.fill15pt - Padding: 10pt vertical, 24pt horizontal
- Corner radius: 8pt (rounded rectangle, not full pill — iOS Music's signature)
- Pressed: scale 0.97 with
.impact(.light)haptic - Width: often full-width in a section, or content-fit
Secondary Button ("Shuffle", "Download", "Share")
- Background:
#F2F2F7light /#2C2C2Edark (system secondary) - Text: label primary color SF Pro Text 15pt weight 500
- Leading SF Symbol 15pt
- Corner radius: 8pt
- Padding: 10pt vertical, 16pt horizontal
- Pressed: darker tint with
.impact(.light)
Icon Button (Heart / Shuffle / Repeat / More)
- Size: 20-24pt SF Symbol glyph, 44pt hit area
- Default: label secondary color
- Active:
#FA2D48(heart liked, shuffle on, repeat on) - Pressed: scale 0.9 with
.impact(.soft)
Scrubber
- Track: 4pt tall,
rgba(0,0,0,0.1)light /rgba(255,255,255,0.2)dark - Fill:
#FA2D48(Apple Music Red) — left side of the scrubber from start to thumb - Thumb: 16pt circle
#FFFFFFwithrgba(0,0,0,0.2)shadow, scale 1.2× during drag - Time labels: 13pt weight 400 label secondary, "0:48" left, "-3:12" right
Cards & Containers
Album / Playlist Tile (Standard)
- Width: 160pt on most iPhones, 180pt on Pro Max
- Aspect: 1:1 square album art top, stacked text below
- Corner radius: 12pt on the art — Apple Music's signature softer corner (vs. Spotify's 6pt)
- Gap between tiles: 16pt
- Structure:
- Art with 12pt radius,
rgba(0,0,0,0.08)0 4 16 shadow (light only — dark mode has no shadow) - Title: SF Pro Text 15pt weight 600 primary label, 2-line clamp
- Subtitle (artist or description): SF Pro Text 13pt weight 400 secondary label, 1-line
- Tap: scale 0.96 with
.selectionhaptic, opens album / playlist detail
Hero Card (Listen Now)
- Width: full width − 32pt horizontal margin (hero is 358pt wide on 390pt iPhone)
- Height: 380-420pt depending on content
- Structure:
- Full-bleed editorial image with 16pt corner radius and a subtle shadow
- Overlay gradient if text needs contrast:
rgba(0,0,0,0.3)bottom 40% - Micro-label on top-left (uppercase caption 2 "NEW RELEASE" in white)
- Centered or bottom-aligned hero text: SF Pro Rounded 24-34pt bold
- Optional CTA pill at bottom
- Tap: opens editorial feature or album
Track Row
- Height: 56pt
- Layout: 44×44pt square album thumbnail (8pt corner radius) → stacked title/artist → trailing ellipsis
- Pressed: background
rgba(0,0,0,0.05)light /rgba(255,255,255,0.1)dark - Title: SF Pro Text 17pt weight 400 primary
- Artist: SF Pro Text 15pt weight 400 secondary
- Currently-playing track: title stays primary, but a 3-bar red equalizer animation appears to the left of the thumbnail (same motif as Spotify but Apple Music red)
- Explicit tag: small
Ein a gray 18pt rounded rectangle before the title if explicit - Dolby Atmos / Lossless badge: trailing right of the title on supported tracks
Album / Playlist Detail Hero
- Top: 240pt album artwork centered with
rgba(0,0,0,0.1)0 8 24 shadow - Title below: SF Pro Display 22pt weight 700 primary
- Artist: SF Pro Text 17pt weight 400
#FA2D48(red — this is the one place artist names go red, and it's an interactive link) - Metadata: "Album · 2024 · Apple Digital Master" 13pt weight 400 tertiary
- Action row:
- Large red Play button (44pt circle) with "Play" label SF Pro Text 17pt weight 600
- Shuffle Play secondary button (44pt, same treatment but gray background)
- Download / More icons trailing
- Below: track list scrolling down
Now Playing (Full Screen)
- Background: album-art-derived gradient (see Depth section)
- Large album art centered: 340pt × 340pt with
rgba(0,0,0,0.3)0 20 40 shadow - When track changes: artwork cross-fades with a subtle scale animation
- Below artwork:
- Track title SF Pro Display 18pt weight 600
- Artist name SF Pro Text 15pt weight 400 at 70% opacity on primary label
- Scrubber with timestamps
- Control row: previous, 64pt red Play button, next — 32pt gap between controls
- Below: Volume slider, then AirPlay button, Lyrics button, share
- Bottom: up-next queue sheet indicator
Mini-Player
- Position: floats above tab bar, full width, 64pt tall
- Background:
.regularMaterialblur withrgba(255,255,255,0.8)light /rgba(28,28,30,0.8)dark tint - 44×44pt album art (8pt radius) leading, 12pt inset
- Center: track title 15pt weight 500 primary (1-line), artist 13pt weight 400 secondary (1-line)
- Trailing: play/pause 22pt SF Symbol (
play.fill/pause.fill), then forward 22pt SF Symbol — 16pt gap between - Tap anywhere: opens full Now Playing screen with matched-geometry artwork transition
- Swipe down while Now Playing is open: dismisses back to mini-player
Lyrics View (The Signature Moment)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Tile width 150pt; large title shrinks to 28pt faster on scroll |
| iPhone 13/14/15 | 390pt | Standard tile 160pt; hero cards 358pt wide |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Tile 180pt; Now Playing art scales to 360pt |
| iPad portrait | 768pt | 3-column grid, hero cards 2-up, Now Playing sheet covers ~70% height |
| iPad landscape | 1024pt+ | 4-column grid, Now Playing overlay instead of full-screen |
Dynamic Type
- Full Dynamic Type support from XS to AX5: every text style except the Play button icon, scrubber thumb, and mini-player geometry scales with user preference
- Listen Now hero titles: scale up to ~40pt at AX5
- Track titles / artist: scale with headline / subheadline text styles
- Mini-player: has a fallback layout that shows only artwork + play when at AX5 (text becomes too large to fit)
- Lyrics: current-line text scales up to 36pt at AX5
Orientation
- Home / Search / Library / Radio: portrait-locked on iPhone
- Now Playing: rotates to landscape — album art centers, controls shift to the right side
- Lyrics view: portrait-locked (lyric rendering is vertical)
- Video content (Apple Music TV / music video): rotates to landscape
- iPad: supports all orientations with adaptive layouts
Touch Targets
- Play button (Now Playing): 64pt — way over minimum
- Play button (inline): 44pt (iOS minimum)
- Track rows: 56pt tall, full-width tappable
- Tab bar icons: 25pt SF Symbol, 49pt hit area
- Ellipsis / overflow: 44pt hit
Safe Area Handling
- Top: standard iOS large-title nav respects safe area / Dynamic Island
- Bottom: mini-player floats above tab bar; both respect home indicator
- Now Playing: artwork respects safe area top, controls respect bottom
- Lyrics view: top safe area for header, bottom safe area respected
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-apple-music {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #0070eb;
--link-hover-color: #0058b8;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #007aff;
--button-text-color: #000000;
--button-hover-bg: #0062cc;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/music/apple-music/DESIGN.md· 32.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.