Apple Music Design System

Apple Music's marketing page is the loudest surface in Apple's web property — the rare moment Apple lets chromatic gradient do the work its product photography usually carries. The hero is a radial wash of Music Red (#fa243c) bleeding into magenta (#ff4dc3) and aubergine (#591962), with SF Pro Display set at 128px / 600 and -0.256px tracking floating above it in pure white. Below the hero, the page reverts to Apple's house grammar — white parchment cards at 10px radius, near-black ink (#1d1d1f) for body, and Action Blue (#0066cc) for every pill CTA — then alternates into dark photographic tiles for "Listening Experience" and "Music Discovery", each anchored by another gradient panel. The system is restrained Apple chrome carrying a saturated music-product payload.

This page captures the system as a DESIGN.md file built on the Google Labs spec for machine-readable design tokens. Inside: 21 color tokens covering the gradient ramp (Music Red, Crimson #c00020, Magenta #ff4dc3, Aubergine #591962, plus three coral-orange supporting stops), Apple's structural blacks and parchments, and the Action Blue interactive accent; 11 typography tokens running on SF Pro Display for the 21–128px display ladder and SF Pro Text for the 12–17px body ladder; six radius tokens centered on the 10px / 980px binary; an 8.4-step spacing scale anchored on 9.6px (78 occurrences) and 24px (15 occurrences); and 21 component recipes covering the gradient hero, dark immersion tile, discovery panel, blue pill CTA, parchment plan card, and the persistent global nav.

Drop the file into Claude, Cursor, GitHub Copilot, or any tool that reads structured design tokens. The agent produces React components that match Apple Music's actual voice — gradient hero on radial wash, dark photographic immersion, parchment plan card, blue pill CTA — rather than a generic music-app template. Use it as a reference when you need a streaming product page that breaks its parent brand's chrome restraint without abandoning it, a teaching artifact for chromatic discipline within a single-accent system, or a starting point for any subscription product whose marketing wants to feel emotional rather than catalog-grade.