Apple Music DESIGN.md

1. Visual Theme & Atmosphere

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, .thinMaterial blurs throughout
• SF Symbols for all icons; native iOS haptics on all actions

2. Color Palette & Roles

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 (#FA2D48 at 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 .label token.
• Label Secondary (#3C3C43 at 60% opacity): Subtitles, artist names — iOS .secondaryLabel.
• Label Tertiary (#3C3C43 at 30% opacity): Timestamps, metadata — iOS .tertiaryLabel.
• Label Quaternary (#3C3C43 at 18% opacity): Disabled, very low emphasis.

Text (Dark Mode)

• Label Primary Dark (#FFFFFF): Main text on dark.
• Label Secondary Dark (#EBEBF5 at 60% opacity): Artist names on dark.
• Label Tertiary Dark (#EBEBF5 at 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)

3. Typography Rules

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

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 .system font, 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

4. Component Stylings

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.fill in #FFFFFF, 28pt on 64pt button, 20pt on 44pt button
• Pressed: scale 0.92, .impact(.soft) haptic
• Paused state: pause.fill icon
• 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 #007AFF for "Join Apple Music"
• Text: #FFFFFF SF Pro Text 17pt weight 600
• Leading SF Symbol: often play.fill 15pt
• 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: #F2F2F7 light / #2C2C2E dark (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 #FFFFFF with rgba(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 .selection haptic, 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 E in 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: .regularMaterial blur with rgba(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)

• Activated from the Now Playing lyrics button
• Vertical scrolling stream of lyric lines
• Background: album-art-derived gradient, heavier than Now Playing
• Current line: SF Pro Display 28pt weight 700 bright primary (scales up from 22pt as it becomes active)
• Upcoming lines: 22pt weight 600 at 60% opacity, scrolled from below
• Past lines: 22pt weight 600 at 30% opacity, faded above
• Word-by-word highlight: within the current line, each word brightens as it's being sung (feature introduced for Apple's time-synced lyrics)
• Auto-scroll follows the song; tap on a line to jump to that timestamp
• Tap outside lyrics to return to Now Playing

Station / Radio Card

• Unique rectangular card (not square) with 16pt radius
• Height: 180pt
• Background: the station's branded artwork, full-bleed
• Overlay: gradient + station name + description in white
• Examples: Apple Music 1, Apple Music Country, personal stations

Browse / Genre Grid

• 2-column grid of genre tiles
• Each tile: rectangular (1.4:1 aspect), 16pt radius, genre-specific gradient background
• Centered type: SF Pro Rounded 22pt bold white

Navigation

Top Nav (Standard)

• Height: 44pt + safe area (uses iOS large-title transition — 96pt when expanded at top, collapses to 44pt on scroll)
• Background: transparent at top, .regularMaterial with tint on scroll
• Large title (when expanded): SF Pro Display 34pt weight 700 primary
• Compact title (when scrolled): SF Pro Text 17pt weight 600 center
• Leading: settings / profile gear icon 28pt circle avatar
• Trailing: search icon or contextual action

Bottom Tab Bar

• Height: 49pt + safe area (standard iOS tab bar)
• Background: .regularMaterial over rgba(255,255,255,0.8) light / rgba(0,0,0,0.8) dark
• 5 tabs: Home (Listen Now) → New (Browse) → Radio → Library → Search
• Icon size: 25pt SF Symbol, 49pt hit area
• Active: #FA2D48 (Apple Music Red — interesting choice, since the tab indicator uses the brand red not system blue)
• Inactive: label secondary color
• Labels: SF Pro Text 10pt weight 500, shown always

Search Bar (Search Tab)

• Top of Search tab, large-title style
• Input: 36pt tall, corner radius 10pt, background #E5E5EA light / #1C1C1E dark
• Leading magnifyingglass SF Symbol 17pt label secondary
• Placeholder: "Artists, Songs, Lyrics, and More" SF Pro Text 17pt weight 400 label secondary

Library Folder / Category Row

• Icon-based list: each row has a leading 28pt SF Symbol (circle filled colored background)
• Examples: Playlists, Artists, Albums, Songs, Made for You, Downloaded
• 56pt row height, 8pt corner radius on the icon's colored square background
• Trailing: chevron chevron.right 15pt label secondary

Input Fields

Search Bar

• See Navigation above

Comment / Message (in Apple Music social features)

• Light fill, 10pt corner radius, SF Pro Text 17pt input type

Distinctive Components

Dolby Atmos Badge

• Small pill, background #D4A857 (gold) with a subtle gradient shine
• Text "Dolby Atmos" SF Pro Text 11pt weight 600 white
• Appears on track rows, album detail, and Now Playing for Atmos-supported tracks
• Padding: 4pt vertical, 8pt horizontal, 500pt corner radius (full pill)
• Optional glow: rgba(212,168,87,0.5) 0 0 8 around the badge on Now Playing

Lossless Badge

• Similar to Atmos but silver: #8E8E93 background, white text "Lossless" 11pt weight 600
• Shown alongside Atmos or solo

Time-Synced Lyrics View

• The signature Apple Music feature
• Covered in "Lyrics View" above
• Word-by-word highlight uses per-word timestamps from Apple's lyric provider; the implementation crossfades an overlay on the word being sung

Equalizer Animation

• Same 3-bar motif as Spotify but rendered in #FA2D48
• Appears on currently-playing track rows to the left of the album thumbnail
• Pauses when playback is paused

Now Playing Expanding Transition

• Mini-bar artwork shares geometry with Now Playing artwork using matched-geometry
• Now Playing scales up from bottom to fill screen over 0.35s spring
• Canvas fades from tab bar canvas to album-art gradient

Album-Art Color Extraction

• Apple uses a Core Image CIAreaAverage extraction plus a second-pass to identify a complementary color
• The Now Playing gradient uses both: primary color at top, complementary at bottom
• Extraction happens at track-change time and is cached per track

"Up Next" Queue Sheet

• From Now Playing, swipe up on the track title or tap the queue icon
• Opens a sheet showing the upcoming queue
• Each row: album art + title/artist + drag handle for reordering
• Swipe left on a row: "Delete" action
• "Add to Library" button below each track

5. Layout Principles

Spacing System

• Base unit: 4pt (iOS standard)
• Scale: 4, 8, 12, 16, 20, 24, 32, 44, 56, 72
• Standard margin: 16pt horizontal on content, 20pt on grouped list sections
• Row heights: 44pt (minimum touch), 56pt (track row), 64pt (mini-player), 80pt+ (editorial cards)
• Between horizontal tiles in a shelf: 16pt

Grid & Container

• Grid: full width with 16pt margins; content edges at 16pt inset
• Horizontal shelves: 16pt inset with last-tile peek
• Album/playlist tile grid: 2-column square grid, 16pt gap
• iPad: 3-column on portrait, 4-column on landscape

Whitespace Philosophy

• Generous in Library and Listen Now: The editorial experience — hero cards, section headers with room to breathe
• Tight in track lists: Playlist detail shows 56pt rows tightly packed
• Extra-generous on Now Playing: The centered artwork uses ~65% of viewport; breathing room everywhere else

Border Radius Scale

• Square (0pt): Not used — Apple Music always softens
• Signature (4pt): Rarely used; Apple Music prefers ≥ 8pt
• Standard (8pt): Small buttons, badges, small covers on track rows
• Pronounced (10pt): Search bar, cards
• Signature (12pt): Album / playlist tiles — THE Apple Music corner
• Hero (16pt): Listen Now editorial cards, Now Playing large art on expansion
• Full Pill (500pt): Dolby Atmos badge, filter chips
• Circle (50%): Play button, profile avatars, downloaded progress ring

6. Depth & Elevation

Shadow Philosophy: Apple Music uses shadows more generously than other media apps because the light mode canvas is pure #FFFFFF — tiles need shadow to read as raised cards. In dark mode, shadows disappear entirely; instead, surface-color steps (#000000 → #1C1C1E → #2C2C2E) carry the elevation. The Now Playing artwork carries the most prominent shadow in the app — a 40pt blur at 30% opacity that makes the art feel like it's floating in space. Materials (blurs) are used extensively for nav, tab bar, and mini-player, giving the app that signature iOS translucency feel.

Motion

• Play button tap: Scale 0.92 spring + .impact(.soft) haptic
• Track change on Now Playing: Artwork cross-fades with subtle scale (0.98 → 1.0) over 400ms
• Mini-player → Full Now Playing: Shared-element artwork scales from 44pt → 340pt, 0.35s spring damping 0.8
• Equalizer bars: Continuous animation on currently-playing row (same as Spotify but red)
• Lyrics scroll: Each new line scales from 22pt to 28pt and brightens from 60% to 100% over 300ms, synchronized with audio
• Like heart tap: Heart fills red, 1.0 → 1.2 → 1.0 bounce over 300ms with .success haptic
• Shuffle toggle: Icon color transitions from secondary to red with 200ms ease; .selection haptic
• Download progress: Circular arc sweeps around the download icon, fills as download progresses
• Large title to compact title: Standard iOS large-title scroll behavior — 34pt shrinks to 17pt as user scrolls up
• Long press on tile: Scale 0.96 + haptic, context menu springs in with blur dim
• Browse tab color swap: Tapping a genre tile animates a full-screen color wash transitioning to the genre's theme

7. Do's and Don'ts

Do

• 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
• 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: .soft on Play, .success on heart like, .selection on shuffle / tab
• Use iOS large-title navigation with scroll-collapse behavior
• Use system blue #007AFF for 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 #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
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Light canvas: #FFFFFF
• Dark canvas: #000000
• Surface 1 (light): #F2F2F7
• Surface 1 (dark): #1C1C1E
• Surface 2 (dark): #2C2C2E
• Divider (light): #C6C6C8
• Divider (dark): #38383A
• Label primary (light): #000000
• Label primary (dark): #FFFFFF
• Label secondary (light): #3C3C43 at 60% opacity
• Label secondary (dark): #EBEBF5 at 60% opacity
• Apple Music Red: #FA2D48
• Apple Music Coral: #FC3C44
• Red pressed: #D4213B
• Dolby Atmos gold: #D4A857
• Lossless silver: #8E8E93
• iOS system blue: #007AFF

Example Component Prompts

• "Create a SwiftUI Apple Music Play button: 64pt circular button, background #FA2D48. SF Symbol play.fill in white 28pt weight bold. Pressed: scale 0.92 with .impact(.soft) haptic. Used as the primary playback control on the Now Playing screen, flanked by 32pt skip-backward and skip-forward SF Symbols with 32pt spacing."
• "Build an Apple Music album tile: 1:1 square image with 12pt corner radius (Apple Music's signature softer corner, not Spotify's 6pt). Light mode shadow rgba(0,0,0,0.08) 0 4px 16px, no shadow in dark mode. Below the art: title in SF Pro Text 15pt weight 600 primary label (2-line clamp), subtitle artist in 13pt weight 400 secondary label (1-line). 16pt gap between tiles. Tap: scale 0.96 with .selection haptic."
• "Design the Apple Music mini-player: 64pt tall, positioned above the tab bar, full width. Background: .regularMaterial blur with rgba(255,255,255,0.8) tint in light mode / rgba(28,28,30,0.8) in dark. 44×44pt album art (8pt radius) leading with 12pt inset. Center: track title SF Pro Text 15pt weight 500 primary (1-line) + artist 13pt weight 400 secondary (1-line). Trailing: 22pt play.fill / pause.fill SF Symbol, then 22pt forward.fill SF Symbol, 16pt gap. Tap: opens Now Playing with shared-element artwork transition."
• "Build the Apple Music Now Playing full-screen: background is a vertical linear gradient extracted from the album art's dominant color at top transitioning to a darker complementary at bottom. 340×340pt album art centered with rgba(0,0,0,0.3) 0 20px 40px shadow. Below: track title SF Pro Display 18pt weight 600 primary, artist 15pt weight 400 at 70% opacity. Scrubber with 4pt track rgba(0,0,0,0.1), #FA2D48 fill, 16pt white circular thumb. Controls row: backward.fill 32pt + 64pt red Play button + forward.fill 32pt with 32pt gaps. Below controls: volume slider and row of secondary icons (AirPlay, lyrics, share)."
• "Create the Apple Music time-synced lyrics view: vertical stream of lyric lines over album-art gradient background. Current line: SF Pro Display 28pt weight 700 bright primary label (scales up from 22pt as it becomes active). Upcoming lines: 22pt weight 600 at 60% opacity. Past lines: 22pt weight 600 at 30% opacity. Within the current line, each word highlights from secondary to primary as it's sung (word-by-word time-synced). Auto-scroll follows the song; tap a line to jump to that timestamp."
• "Design a Dolby Atmos badge: small pill, background #D4A857 with a subtle internal gradient for shine, text 'Dolby Atmos' SF Pro Text 11pt weight 600 white. Padding 4pt vertical / 8pt horizontal, 500pt corner radius. On Now Playing, add a gentle rgba(212,168,87,0.5) 0 0 8 glow. Only show on tracks that support Dolby Atmos — this is a capability indicator, not a theme."
• "Build the Apple Music bottom tab bar: 49pt + safe area, .regularMaterial blur over rgba(255,255,255,0.8) tint light / rgba(0,0,0,0.8) dark. 5 tabs: Home (house), New (music.note.list), Radio (dot.radiowaves.left.and.right), Library (square.stack), Search (magnifyingglass). Icon size 25pt SF Symbol. Active tint: #FA2D48 (Apple Music Red — distinctive choice). Inactive: label secondary. Labels SF Pro Text 10pt weight 500 always shown."

Iteration Guide

1. SF Pro throughout — never add a custom font; use iOS text styles (Headline, Body, Subheadline, Footnote, Caption) where possible
2. Dark canvas is true black #000000, not #121212 — unique among media apps
3. Apple Music Red #FA2D48 is the primary accent — Play button, heart, shuffle active, scrubber fill, tab indicator
4. Album tiles use 12pt corner radius — signature softer-than-Spotify corner
5. Hero cards on Listen Now use 16pt radius and SF Pro Rounded type for editorial feel
6. Dolby Atmos badge is gold #D4A857, Lossless is silver #8E8E93 — capability indicators, not themes
7. Time-synced lyrics with word-by-word highlight is a defining feature — implement when lyric data is available
8. iOS system materials (.regularMaterial) for nav, tab bar, mini-player — lean into iOS translucency
9. Mini-player persists above tab bar during playback — matches iOS platform convention
10. Now Playing uses album-art-extracted gradient background — Core Image CIAreaAverage + complementary-color derivation
11. Haptics: .soft on Play, .success on heart like, .selection on shuffle / tab / chip, .light on button tap
12. Respect Dynamic Type from XS to AX5 — Apple Music is a best-in-class accessibility app
13. Large-title nav pattern is standard — 34pt shrinks to 17pt on scroll
14. Shadows are generous in light mode on tiles and cards; dark mode uses surface-color steps instead