Apple Music — design system & UI screens

Consumer · 1 screen · 13 sections · apple.com

The hero is a saturated red-to-orange-to-violet radial gradient panel with oversized white serif-adjacent headline "For the love of music." and a dark "Try it free" pill CTA. Below, the page is a vertical stack of full-bleed, rounded image cards — each a near-black or photographic scene (concert seating, album mosaic, acoustic session, classical silhouettes, Shazam disc) with large overlaid white headlines — which is the signature treatment. It closes with a device-icon grid, a three-column pricing comparison, and a long single-column accordion FAQ over white.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/apple-music.

Decoded design system

Apple Music's decoded design system: background #FFFFFF, text #333336, accent #FA243C, link #FA243C, primary #FA243C; type scale h1 34px / h2 28px / body 17px; 4px spacing base; 0px base radius. The single interactive/action color is #FA243C — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F2F2F2`
border	`#E0E0E0`
text	`#333336`
text_muted	`#808082`
primary	`#FA243C`
accent	`#FA243C`
link	`#FA243C`
secondary	`#2997FF`
button_bg	`#FA243C`
button_text	`#FFFFFF`

Using these colors

Action color #FA243C — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #FA243C — one role, not several (the action color).
accent #FA243C — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
secondary #2997FF — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: SF Pro Display
Body: SF Pro Text
h1: 34px
h2: 28px
body: 17px

Spacing

base unit: 4px
scale: 8px, 9px, 10px, 11px, 14px, 15px, 18px, 19px, 21px, 40px

Radii

base: 0px
button: 980px

Shadows (elevation)

overlay: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

Motion

Micro-interactions run at 400ms (dominant) with cubic-bezier(0.4, 0, 0.6, 1).

durations: 400ms · 240ms · 320ms
easings: cubic-bezier(0.4, 0, 0.6, 1) · ease
animated properties: opacity, color, width, background-color

Native design tokens

Token	Value
`--r-globalnav-background-opened`	`#fafafc`
`--r-globalnav-background-opened-dark`	`#161617`
`--sk-focus-color`	`#0071e3`
`--sk-focus-color-alt`	`#000000`
`--sk-body-text-color`	`#1D1D1F`
`--sk-headline-text-color`	`#1D1D1F`
`--sk-body-background-color`	`#FFFFFF`
`--sk-body-link-color`	`#0066CC`
`--sk-glyph`	`#000000`
`--sk-glyph-gray`	`#1D1D1F`

…and 75 more measured on the page.

Button states (measured)

primary hover: background #0076DF
primary focus: outline 2px solid rgb(0, 113, 227)

Layout (measured)

container max-width: 980px
nav: 44px fixed, backdrop saturate(1.8) blur(20px)
common grid: 2 columns

Motion choreography (measured)

Load order: a.media-gallery-dotnav-lin×5 → a.media-gallery-dotnav-lin×3 → div.media-gallery-bottom-con×4 → a.media-gallery-dotnav-lin → h2.globalnav-searchresults- → li.globalnav-searchresults-×5

Stagger: li ×5 — 20ms apart.

Responsive (measured)

breakpoints: 734px · 833px · 1023px · 1068px · 1440px
mobile (390px): hero 34px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Apple Music landing with vivid gradient hero and stacked full-bleed content showcase cards