---
version: alpha
name: "Apple Music"
description: "Apple Music's web is **album-art-forward streaming** dressed in Apple's signature pink-red `#fa233b` brand color and rendered on a soft-near-black canvas (`#000000` deep, `#1d1d1f` panel). The hero is a dynamic album-art mosaic — six to twelve covers tiled into a kinesthetic grid that auto-scrolls; the gradient `linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)` washes wordmarks and CTAs. SF Pro Display carries every headline at the brand's standard tight optical tracking, SF Pro Text handles body, and the system reaches for **glassy material depth** — every card is a `12px` radius surface with backdrop-blur `40px`, every chip a full-pill, every elevation a layered translucent overlay. Where Spotify commits to brand-green-on-near-black, Apple Music commits to pink-red gradient + monochrome album-grid kinesthetics: the album cover is the brand."
colors:
  bg: "#000000"
  bg-panel: "#1d1d1f"
  bg-elev: "#2a2a2c"
  bg-soft: "#1a1a1c"
  bg-page: "#000000"
  surface: "#1d1d1f"
  surface-glass: "rgba(29,29,31,0.72)"
  surface-glass-light: "rgba(255,255,255,0.08)"
  surface-elev: "#2a2a2c"
  brand: "#fa233b"
  brand-hover: "#e51e34"
  brand-active: "#c8172c"
  brand-soft: "rgba(250,35,59,0.16)"
  brand-glow: "rgba(250,35,59,0.40)"
  brand-deep: "#cc1729"
  brand-gradient-start: "#fa233b"
  brand-gradient-end: "#ff7b00"
  brand-gradient-radial-end: "#ff007a"
  text: "#ffffff"
  text-strong: "#ffffff"
  text-soft: "rgba(255,255,255,0.78)"
  text-faint: "rgba(255,255,255,0.56)"
  text-disabled: "rgba(255,255,255,0.32)"
  text-on-brand: "#ffffff"
  on-brand: "#ffffff"
  border: "rgba(255,255,255,0.10)"
  border-soft: "rgba(255,255,255,0.06)"
  border-strong: "rgba(255,255,255,0.18)"
  link: "#fa233b"
  link-hover: "#ff4d63"
  selected: "rgba(250,35,59,0.16)"
  scrim: "rgba(0,0,0,0.72)"
  scrim-light: "rgba(0,0,0,0.40)"
  shadow-card: "rgba(0,0,0,0.40)"
  shadow-elev: "rgba(0,0,0,0.60)"
  shadow-modal: "rgba(0,0,0,0.80)"
  shadow-album: "rgba(0,0,0,0.50)"
  success: "#3aaa50"
  warning: "#ff9f0a"
  danger: "#ff453a"
  info: "#0a84ff"
  vibrancy-overlay: "rgba(255,255,255,0.04)"
typography:
  display:
    fontFamily: "SF Pro"
    fontSize: "80px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "SF Pro"
    fontSize: "17px"
    lineHeight: 1.5
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
---

## Overview

## Overview

Apple Music's web is **album-art-forward streaming** dressed in pink-red brand gradient and rendered on a soft-near-black canvas. This is not a generic "music streaming dark mode" — it's a deliberate Apple media-property aesthetic: pure black `#000000` canvas, raised panels at `#1d1d1f` (the same soft-charcoal used across Apple TV+ and the Apple TV app), and `#fa233b` brand pink-red carrying every CTA, eyebrow, and link moment. The hero on apple.com/apple-music is a dynamic **album-art mosaic** — six to twelve album covers tiled into a kinesthetic 4×3 grid that auto-scrolls vertically at half-speed, with a `linear-gradient(180deg, transparent 0%, #000 80%)` overlay fading the bottom into pure black so headline copy sits crisp against neutral ground. The album cover is the brand. Every album cover is a brand surface.

Color carries the moment. The signature `#fa233b` reads as **pink-red** (not pure red, not coral) — the same Apple has used for Apple Music since the 2015 launch, calibrated to feel emotionally distinct from the system red `#ff453a` used for destructive actions. A radial-gradient hero variant uses `radial-gradient(circle at top, #ff007a 0%, #fa233b 50%, transparent 100%)` for genre-specific landing pages (e.g., Hip-Hop, Electronic), and the linear `135deg, #fa233b 0%, #ff7b00 100%` gradient washes wordmarks ("Listen now") and primary CTAs on the marketing surface. The gradient is the brand's emotional voice; the solid pink-red is its everyday voice.

Typography is **SF Pro Display** for headlines and **SF Pro Text** for body — Apple's standard duo, with display sizes opting into tighter optical metrics. Headlines run at the brand's signature tight tracking (`-0.025em` at 80px), body sits at 17px (Apple's standard, never 16px) with a 1.5 line-height. Track titles in playlist rows use SF Pro Text 16/500; track durations are SF Pro Text 14/500 with `tabular-nums` (`tnum`) opted in so the duration column aligns vertically. Code (the rare API-doc moment) uses SF Mono.

Surfaces breathe through **glassy material depth**. The signature elevation move is the **vibrancy panel** — a `rgba(29,29,31,0.72)` surface with `backdrop-filter: blur(40px) saturate(180%)`, which on browsers that support it produces the iOS/macOS frosted-glass effect of background colors bleeding subtly through. The global nav uses this same effect at `rgba(0,0,0,0.72) + blur(40px)` — albums and gradients above can be dimly seen through it as they scroll. Cards use `12px` radius standard, `16px` for featured, `8px` for album-art thumbnails, `24px` for hero cards — radii scale up with surface importance. Buttons are **full-pill** (`9999px`), reflecting Apple's broader system convention.

Page rhythm runs **album-mosaic hero → editorial album-grid section → glassy feature card section → editorial album-grid section → CTA hero with gradient → footer**. The editorial album-grid is the system's beating heart: 6-up on desktop, 4-up on tablet, 2-up on mobile, with each tile a play-on-hover album cover. The Now Playing bar is the persistent companion — fixed at bottom-0, glass-translucent, `80px` tall, present on every page once playback starts. The whole system feels like a streaming app that knows it's also a marketing site.

**Key Characteristics:**
- Signature pink-red brand `#fa233b` calibrated as Apple Music's emotional voice — distinct from system red
- Two-stop brand gradient `linear-gradient(135deg, #fa233b → #ff7b00)` for hero wordmarks and primary CTAs
- Pure-black `#000000` canvas with raised `#1d1d1f` panels — Apple media-property convention
- Hero **album-art mosaic** — 4×3 grid of covers auto-scrolling at half-speed, black-faded overlay at bottom
- SF Pro Display + SF Pro Text monolithic — body always at 17px, never 16
- Glassy material depth: `backdrop-filter: blur(40px) saturate(180%)` on nav, panels, modals
- Full-pill CTAs (9999px radius) reflect Apple system convention
- Album-art thumbnails at `8px` radius, scale `1.02` on hover with play-button overlay
- Track rows with tabular-num durations for column-aligned time
- Persistent Now Playing bar at bottom of viewport — `80px` glass surface
- "DOLBY ATMOS" / "LOSSLESS" / "SPATIAL AUDIO" badge typography in pink-red micro-uppercase
- Apple's signature `cubic-bezier(0.32, 0.72, 0, 1)` smooth-out easing for hover transitions

## Colors

### Primary
- **Black** (`#000000`): The default page canvas. Pure black, never tinted. Apple media-property convention.
- **Charcoal Panel** (`#1d1d1f`): Raised card surface — the same soft-charcoal used across Apple TV+ and macOS dark mode. Reads as black on first glance but provides visible card-from-canvas separation.
- **White** (`#ffffff`): Primary text on black, also the on-brand text color over pink-red.
- **Brand Pink-Red** (`#fa233b`): The signature Apple Music color. Used on filled CTAs, eyebrows, links, "Apple Music Exclusive" badges, and the play-button fill. Never paired with a competing accent hue.

### Brand & Dark
- **Brand Pink-Red** (`#fa233b`): Primary brand action color.
- **Brand Hover** (`#e51e34`): Pink-red darkened ~10% for hover/active states on filled CTAs.
- **Brand Active** (`#c8172c`): Pressed state — darker still.
- **Brand Deep** (`#cc1729`): Used for emphasis text where AAA contrast is needed on light surfaces (rare on Apple Music — most surfaces are dark).
- **Brand Glow** (`rgba(250,35,59,0.40)`): Focus ring + selected state glow.
- **Brand Soft** (`rgba(250,35,59,0.16)`): Selected state background, badge-pill background.

### Accent — The Brand Gradient
- **Brand Gradient (linear)** `linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)` — pink-red to warm-orange. Used on hero wordmarks, primary CTAs, and the Apple Music wordmark on marketing pages.
- **Brand Gradient (radial)** `radial-gradient(circle at top, #ff007a 0%, #fa233b 50%, transparent 100%)` — used as a hero background for genre-specific landing pages (Hip-Hop, Electronic).
- The gradient stops are not interchangeable. `#ff7b00` (warm orange) appears only as the second gradient stop — never as a standalone accent.

### Interactive
- **Link** (`#fa233b`): Inline link == brand pink-red.
- **Link Hover** (`#ff4d63`): Lighter pink for visibility on dark canvas.
- **Selected** (`rgba(250,35,59,0.16)` background + `#fa233b` text): Selected playlist row, selected nav item.
- **Play Button**: pink-red `#fa233b` filled circle with white play-fill icon, springy press animation.
- **Disabled**: text `rgba(255,255,255,0.32)` + bg `rgba(255,255,255,0.04)`.

### Neutral Scale
- **Text** (`#ffffff`): Primary body and headings on dark.
- **Text Soft** (`rgba(255,255,255,0.78)`): Secondary metadata, artist names below album titles.
- **Text Faint** (`rgba(255,255,255,0.56)`): Captions, hint text, placeholder.
- **Text Disabled** (`rgba(255,255,255,0.32)`): Disabled state.
- **Border** (`rgba(255,255,255,0.10)`): Default hairline on cards, panels, nav.
- **Border Soft** (`rgba(255,255,255,0.06)`): Track-row separator, lightest divider.
- **Border Strong** (`rgba(255,255,255,0.18)`): Form-input emphasized border.

### Surface & Borders
- **Surface** (`#1d1d1f`): Default card surface. Matches Apple TV+ panel.
- **Surface Glass** (`rgba(29,29,31,0.72)` + `backdrop-filter: blur(40px) saturate(180%)`): The signature material — a translucent panel that lets album-art and gradients above show through subtly. Used on global nav, modal backgrounds, glassy feature cards.
- **Surface Glass Light** (`rgba(255,255,255,0.08)` + `backdrop-filter: blur(20px)`): A lighter glass for play-button overlays on album art.
- **Surface Elevated** (`#2a2a2c`): Elevated card on a panel — popovers, tooltips, dropdowns.

### Shadow Colors
Apple Music shadows are **pure-black** (no tint), reflecting the pure-black canvas. The system reaches for **deep, atmospheric shadows** rather than crisp drop shadows — albums float on `0 8px 24px rgba(0,0,0,0.50)`, modals descend from `0 24px 56px rgba(0,0,0,0.80)`. Shadows are darker and more emphatic than light-mode design systems require — necessary for visible elevation against an already-black canvas.
- **Album** `rgba(0,0,0,0.50)` — 24px Y8 spread for album-art tiles
- **Album Hover** `rgba(0,0,0,0.60)` — 40px Y16 spread on hover
- **Card** `rgba(0,0,0,0.40)` — 16px Y4 spread for content cards
- **Elevated** `rgba(0,0,0,0.60)` — 32px Y12 for popovers, dropdowns
- **Modal** `rgba(0,0,0,0.80)` — 56px Y24 for full dialogs
- **Glow Pink** `rgba(250,35,59,0.40)` — 32px halo on selected/focused brand surfaces

### Semantic
Apple Music inherits SF system semantic colors with dark-mode adjusted values:
- **Success Green** (`#3aaa50`) — confirmation, "Added to library"
- **Warning Amber** (`#ff9f0a`) — caution
- **Danger Red** (`#ff453a`) — error, "Remove" destructive (deliberately distinct from brand pink-red)
- **Info Blue** (`#0a84ff`) — informational, system-blue convention

## Typography

### Font Family

- **Primary (Display)**: `"SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif` — Apple's flagship display family, used for headlines 20px+.
- **Primary (Text)**: `"SF Pro Text", "SF Pro", -apple-system, ...` — Apple's body family, used below 20px. The optical metrics differ from SF Pro Display: tighter spacing on display, more open spacing on text.
- **Mono**: `"SF Mono", Menlo, Consolas, monospace` — for inline code in support docs (rare on the marketing surface).
- **Open-source substitute**: SF Pro is Apple-licensed. Reasonable substitutes: **Inter Display + Inter** (closest free analog with optical sizes), **Geist + Geist Sans**, **Söhne**. If substituting, verify tabular-num support (`font-variant-numeric: tabular-nums`) for track durations.
- **OpenType features**: `kern` always on; `liga` on for body, off for tabular contexts; `tnum` on for track durations and pricing; `ss01` (alt 6/9) and `cv11` (alt zero with slash) optional, used in editorial moments where typographic discipline reads.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | SF Pro Display | 80 | 700 | 1.05 | -0.025em | kern | Flagship marketing hero — "Listen now" |
| display-large | SF Pro Display | 56 | 700 | 1.07 | -0.022em | kern | Genre / playlist hero |
| h1 | SF Pro Display | 40 | 700 | 1.1 | -0.02em | kern | Article-level |
| h2 | SF Pro Display | 32 | 700 | 1.15 | -0.015em | kern | Major section |
| h3 | SF Pro Display | 24 | 600 | 1.2 | -0.01em | kern | Subsection |
| h4 | SF Pro Display | 20 | 600 | 1.25 | -0.005em | kern | Card title |
| h5 | SF Pro Text | 17 | 600 | 1.3 | 0 | kern | Minor heading — uses Text not Display |
| body-large | SF Pro Text | 19 | 400 | 1.5 | 0 | kern, liga | Hero intro paragraph |
| body-md | SF Pro Text | 17 | 400 | 1.5 | 0 | kern, liga | Default body — Apple convention (never 16) |
| body-strong | SF Pro Text | 17 | 600 | 1.5 | 0 | kern, liga | Emphasized body |
| body-sm | SF Pro Text | 14 | 400 | 1.45 | 0 | kern, liga | Metadata, secondary |
| label | SF Pro Text | 13 | 600 | 1.3 | 0 | kern | Form labels |
| eyebrow | SF Pro Text | 12 | 700 | 1.3 | 0.06em | kern, uppercase | Category eyebrow — often gradient-text |
| button | SF Pro Text | 17 | 600 | 1.2 | -0.005em | kern | All CTA labels — 17px Apple convention |
| button-sm | SF Pro Text | 14 | 600 | 1.2 | 0 | kern | Compact buttons |
| track-title | SF Pro Text | 16 | 500 | 1.3 | 0 | kern | Track row in playlist |
| track-artist | SF Pro Text | 14 | 400 | 1.3 | 0 | kern | Track artist below title |
| duration | SF Pro Text | 14 | 500 | 1.3 | 0 | tnum | Tabular numerals for track durations |
| caption | SF Pro Text | 12 | 400 | 1.4 | 0 | kern, liga | Captions, footnotes |
| legal | SF Pro Text | 11 | 400 | 1.4 | 0 | kern | Legal fine print |

### Principles

- **17px is body. Never 16.** Apple's convention since 2015 — body text on Apple media properties always renders at 17/1.5. This is the strongest typographic signal of "an Apple product".
- **SF Pro Display vs SF Pro Text is size-driven.** Above 20px, display. Below 20px, text. The optical metrics differ — display has tighter spacing, text has more open spacing. Never use Display at 14px or below; never use Text at 32px or above.
- **Negative tracking on display sizes** — hero runs `-0.025em`, dropping toward `0em` at body. Buttons get a slight `-0.005em` for compactness.
- **Eyebrows use brand-gradient text.** The 12px uppercase eyebrow over hero headlines uses `background: linear-gradient(135deg, #fa233b, #ff7b00); -webkit-background-clip: text; color: transparent;` — the gradient is the eyebrow's signature.
- **Tabular numerals for durations.** Track durations and any time-based numerical column must opt into `font-variant-numeric: tabular-nums` so the column aligns vertically.
- **Body white at full opacity.** `#ffffff` for primary text. `rgba(255,255,255,0.78)` for secondary metadata (artist names below track titles). Don't dim primary text — Apple's dark-mode discipline relies on full-white for headers/body.
- **Track-title at 16/500.** Slightly smaller than body (17) and slightly heavier (500 vs 400) — the typographic signature of an Apple Music playlist row.

## Layout

### Spacing System
Base unit: 4px. Scale: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160`. Components use 16/24/32; sections use 80/120/160. Album grids use a `24px` gap between tiles.

### Grid & Container
Max page width: `1280px` with `40px` outer gutters on desktop, `24px` tablet, `16px` mobile. Hero sections break the container with `100vw` album-mosaic backgrounds. Editorial album grids run 6-up on desktop (`minmax(200px, 1fr)`), 4-up tablet, 2-up mobile.

### Whitespace Philosophy
Apple Music is **album-art-density-tolerant** — the album-grid sections pack 6×3 = 18 covers per visible viewport, but each cover is a brand surface in itself. The whitespace philosophy is "let the art carry the visual weight; let the chrome be quiet". Section spacing is 80–120px between editorial bands.

### Section Cadence
Page rhythm runs **album-mosaic hero → editorial album-grid (Top Hits) → glassy feature card section (Spatial Audio / Lossless explainer) → editorial album-grid (Genre — Hip-Hop / Pop / etc) → CTA gradient hero ("Start your free trial") → footer**. The two-album-grid sandwich around a feature-card explainer is the signature marketing flow.

### Breakpoints
| Name | Min Width | Notes |
|------|-----------|-------|
| mobile | 0 | 2-up album grid, hamburger menu |
| tablet | 600 | 4-up album grid |
| desktop | 900 | 6-up album grid, full nav visible |
| wide | 1280 | Max content width |
| ultra | 1440 | Larger gutter, hero `100vw` |

### Touch Targets
Minimum 44×44px. Play buttons in track rows are 44×44 hit-area even when icon is 24×24 visual. Album-art tiles minimum 160×160 on mobile to support tap.

### Collapsing Strategy
- **Global nav**: collapses to hamburger menu below 900px. Search becomes a magnifying-glass icon that expands inline.
- **Album grid**: 6-up → 4-up → 2-up (never 1-up — Apple Music maintains 2-column even on smallest mobile).
- **Hero mosaic**: 4×3 grid → 3×3 → 2×3 grid, scroll speed reduces proportionally.
- **Now Playing bar**: collapses to 56px height on mobile, controls compress to play-pause + skip-forward only.
- **Track row**: album column hidden below 900px; only title/artist + duration visible.
- **Feature card**: 50/50 art-and-copy split → stacked on mobile.
- **Footer**: multi-column → accordion below 600px.

### Image Behavior
- Album art: `aspect-ratio: 1` (always square), `object-fit: cover`, native `loading="lazy"` except hero
- High-DPI: `srcset` with `1x / 2x / 3x` (Apple Music API serves up to 3000×3000 art)
- Mosaic tiles: same square aspect, lower resolution variants (300×300 sufficient for 200px display)
- All decorative gradients via CSS, never images

### Container Queries
Used on **album-card** to switch title size from 16/500 → 14/500 when card is narrower than 180px (e.g., when nested inside a 8-up grid on a wide carousel).

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | `box-shadow: none`, hairline `1px solid rgba(255,255,255,0.10)` | Default panels, track rows |
| 1 | `0 4px 16px rgba(0,0,0,0.40)` | Content card, dropdown |
| 2 | `0 8px 24px rgba(0,0,0,0.50)` | Album-art tile (default state) |
| 3 | `0 12px 32px rgba(0,0,0,0.60)` | Now Playing card, elevated card |
| 4 | `0 16px 40px rgba(0,0,0,0.60)` | Album-art tile hover |
| 5 | `0 24px 56px rgba(0,0,0,0.80)` | Modal, full dialog |
| Glass | `backdrop-filter: blur(40px) saturate(180%)` + `1px solid rgba(255,255,255,0.08)` border | Vibrancy panels — not a shadow but a material depth substitute |

### Shadow Philosophy

Apple Music shadows are **deep-and-pure-black**, reflecting the pure-black canvas. Against a black background, traditional drop shadows are invisible — so the system reaches for *deeper alphas* (0.40 → 0.80) and *wider spreads* (16–56px Y) to produce visible elevation. Album-art tiles in particular cast emphatic shadows because the album cover is the primary visual content and the shadow signals "this is a real, physical-feeling object".

The signature elevation move is **vibrancy via backdrop-filter** — translucent panels that let album-art and gradients above show through with a subtle blur and saturation boost. This is Apple's iOS/macOS material design language, and Apple Music's web faithfully reproduces it where browsers support `backdrop-filter`. On unsupported browsers, the fallback is solid `#1d1d1f` with no transparency.

## Shapes

- **Micro 2px** — internal divider chips (rare)
- **Sm 6px** — secondary buttons (when not full-pill)
- **Standard 8px** — inputs, album-art thumbnails, track rows
- **Card 12px** — default cards, Now Playing card, panels
- **Featured 16px** — feature cards, glass panels, modals
- **Hero 24px** — hero cards with album mosaic
- **Pill 9999px** — primary CTAs, secondary CTAs, search input, chips, play buttons

Apple Music heavily favors **full-pill (9999px)** for actions and **moderate radii (8–16px)** for surfaces. The system rarely uses sharp corners — even the smallest UI elements (`badge-spatial` at 4px) have soft corners.

## Components

### Buttons

**`button-primary` — "Try it free"**
- Background `#fa233b`, text `#ffffff`, border none, radius `9999` (full-pill), padding `14px 28px`, font 17/600. Hover: `bg #e51e34`. Active: `transform: scale(0.96)`. Transition: `all 200ms cubic-bezier(0.32, 0.72, 0, 1)` (Apple's signature smooth-out).

**`button-primary-gradient` — "Start your free trial"**
- Background `linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)`, text `#ffffff`. Hover: shadow `0 0 32px rgba(250,35,59,0.40)` glow. Same radius, padding, press animation.

**`button-secondary` — "Learn more"**
- Background `rgba(255,255,255,0.12)`, text `#ffffff`. Hover: `bg rgba(255,255,255,0.20)`. Glass-translucent button — works over both solid panels and album-art backgrounds.

**`button-tertiary` — Inline CTA**
- Background transparent, text `#fa233b`, no border, padding `14px 12px`. Trailing chevron `›` translates `4px` right on hover.

**`button-play` — Circular Play Button**
- Background `#fa233b`, icon white play-fill 24px, border none, radius `9999`, size `56`. Springy press animation: `scale(1) → scale(0.92) over 100ms → scale(1.05) over 200ms → scale(1)` over 100ms. Used in hero, Now Playing bar, and on album-card hover overlays.

**`button-play-on-art` — Glass Play Overlay**
- Background `rgba(0,0,0,0.6)`, icon white play-fill 20px, radius `9999`, size `48`, `backdrop-filter: blur(20px)`. Appears centered over album art on hover-state, fades in from opacity 0 over 200ms.

### Cards

**`card-album` — Album/Playlist Tile**
- Background transparent (pure album art), radius `12` (outer), art-radius `8`, art-shadow `0 8px 24px rgba(0,0,0,0.50)`. Title below art at 16/500 white, artist at 14/400 text-soft. Hover: `scale(1.02)` + play-button-overlay fades in over 200ms. The system's most-used component.

**`card-feature` — Marketing Feature Card**
- Background `#1d1d1f`, radius `16`, padding `32px`, border `1px solid rgba(255,255,255,0.06)`. Used on the Apple Music marketing surface for "Spatial Audio" / "Lossless" / "Apple Music Live" explainer cards.

**`card-glass` — Glassy Vibrancy Panel**
- Background `rgba(29,29,31,0.72)`, radius `16`, padding `32px`, `backdrop-filter: blur(40px) saturate(180%)`, border `1px solid rgba(255,255,255,0.08)`. Used over album-art mosaic backgrounds — material vibrancy effect, the signature Apple iOS depth move.

**`card-now-playing` — Now Playing Card**
- Background `#1d1d1f`, radius `12`, padding `20px`. Album art at `88px` size, `8px` radius, shadow `0 12px 32px rgba(0,0,0,0.60)`. Track title above artist; scrubber + play/pause/skip controls below.

**`card-track-row` — Playlist Track Row**
- Background transparent (default), `rgba(255,255,255,0.06)` on hover, radius `8`, padding `8px 12px`. Layout: `[index 24px] [art 40px] [title/artist column flex] [album column 200px] [duration column 60px tabular] [more-menu 24px]`. The system's densest information surface.

### Badges & Pills

**`badge-pill` — "Apple Music Exclusive"**
- Background `rgba(250,35,59,0.16)`, color `#fa233b`, radius `9999`, padding `4px 12px`, font 12/600. Pink-on-soft-pink chip.

**`badge-spatial` — "DOLBY ATMOS"**
- Background transparent, color `#fa233b`, border `1px solid #fa233b`, radius `4`, padding `2px 6px`, font 10/700 uppercase. The Apple Music quality-badge signature — uppercase 10px bordered pink-red micro-pill on track rows.

**`badge-lossless` — "LOSSLESS"**
- Same shell as spatial-badge but in white border + white text on dark surfaces. Quality-tier signaling.

### Inputs

**`input-search` — Top-bar Global Search**
- Background `rgba(255,255,255,0.08)`, border none, radius `9999` (full-pill), padding `10px 16px 10px 40px`. Magnifying-glass icon 16px, white-soft. Placeholder `rgba(255,255,255,0.56)`. Focus: `bg rgba(255,255,255,0.12)` + 3px pink-red glow ring.

**`input-text` — Form Input**
- Background `rgba(255,255,255,0.08)`, border `1px solid rgba(255,255,255,0.10)`, radius `8`, padding `12px 16px`. Focus: border `1px solid #fa233b` + 3px pink-red glow ring.

### Navigation

**`global-nav` — Glass Top Bar**
- Background `rgba(0,0,0,0.72)`, `backdrop-filter: blur(40px) saturate(180%)`, height `64`, border-bottom `1px solid rgba(255,255,255,0.06)`, sticky on scroll. Items: Apple Music wordmark left (with brand-gradient), nav (Listen Now / Browse / Radio / Library / Search) center, utility (Try Free pill CTA / Sign in) right.

**`hero-mosaic` — Album-Art Hero Background**
- CSS grid `4-col x 3-row` mosaic of album-art tiles, each tile `aspect-ratio: 1`. Auto-scrolls vertically at `0.4px/frame` (60s full cycle), paused on hover. Overlay gradient `linear-gradient(180deg, transparent 0%, #000 80%)` fades the bottom into pure black for headline legibility.

**`now-playing-bar` — Persistent Player**
- Background `rgba(29,29,31,0.92)`, `backdrop-filter: blur(40px)`, fixed `bottom 0 left 0 right 0`, height `80`, border-top `1px solid rgba(255,255,255,0.06)`. Layout: `[art 56px + title/artist] left | [skip-back / play / skip-forward / scrubber-track] center | [volume / queue / device] right`. Visible only when playback active.

**`footer` — Charcoal Footer**
- Background `#000000`, color `#ffffff`, padding `64px 0 32px`. Multi-column site index + Apple corporate footer. Tiny — Apple footers are deliberately quiet.

### Easing Curves
- `ease-standard: cubic-bezier(0.4, 0, 0.2, 1)` — universal default
- `ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1)` — **Apple's signature smooth-out curve**, used on hover transitions, modal opens, and most interactive feedback
- `ease-spring: cubic-bezier(0.5, 1.35, 0.6, 1)` — springy overshoot for play-button press

### Duration Buckets
- `duration-fast: 100ms` — focus rings, micro-state shifts, play-button press first phase
- `duration-standard: 200ms` — button hovers, card hover scales, play-button second phase
- `duration-slow: 300ms` — modal opens, panel expansions
- `duration-page: 500ms` — page fade-ins
- `duration-album-scroll: 60s` — full mosaic auto-scroll cycle

### Per-Component Micro-States
- **Album card hover**: `scale(1) → scale(1.02)` over 200ms ease-emphasized + play-button-overlay fades in (`opacity 0 → 1` + `scale(0.8 → 1)`) over 200ms.
- **Play button press**: springy three-phase animation — `scale(1) → scale(0.92)` over 100ms → `scale(1.05)` over 200ms → `scale(1)` over 100ms. The signature "tap responds" feedback.
- **Button hover**: bg shifts to brand-hover (`#e51e34`) over 200ms ease-emphasized. Active: `scale(0.96)` press.
- **Track row hover**: bg shifts from transparent to `rgba(255,255,255,0.06)` over 200ms. Hover also fades-in a play-icon overlay over the track index number.
- **Scrubber drag**: thumb `scale(1) → scale(1.5)` on grab, follows pointer.
- **Hero mosaic auto-scroll**: tile grid translates Y at `0.4px/frame` (~24px/sec at 60fps), 60s cycle, paused on hover. CSS keyframes loop indefinitely.
- **Modal open**: scrim fades `0 → 0.72` over 300ms; modal scales `0.94 → 1` + opacity `0 → 1` over 300ms ease-emphasized.
- **Glass-panel reveal**: `backdrop-filter: blur(0px) → blur(40px)` over 200ms when panel mounts.

### Reduced Motion Strategy
Respects `prefers-reduced-motion: reduce`:
- Hero mosaic auto-scroll halted — tiles stay static
- Album-card scale-on-hover degrades to opacity dim (`0.95 → 1`)
- Play-button springy press compresses to 100ms linear ease
- Modal scale-in disabled — modal appears at scale-1 with opacity fade only
- Page fades preserved (essential for FOUT masking)

### Contrast Pairs (WCAG)
- Text white `#ffffff` on bg `#000000` — **21.0:1 (AAA)**
- Text white on panel `#1d1d1f` — **17.5:1 (AAA)**
- Text-soft `rgba(255,255,255,0.78)` on bg `#000000` — **13.6:1 (AAA)**
- Text-faint `rgba(255,255,255,0.56)` on bg `#000000` — **8.6:1 (AAA at body)**
- White `#ffffff` on brand pink-red `#fa233b` — **4.8:1 (AA at body)**
- Brand `#fa233b` on bg `#000000` — **5.8:1 (AA at body, AAA at large)**
- Text on glass surface (white on `rgba(29,29,31,0.72)` over black) — **~12.0:1 (AAA)**

### Focus Indicators
Universal: `3px solid rgba(250,35,59,0.40)` ring with `2px` offset — pink-red glow ring. On glass surfaces, the ring reads through the blur. Buttons add the glow ring; inputs use a solid 1px border replacement + 3px outer glow.

### ARIA Patterns
- Track rows: `role="row"` + `aria-rowindex`; the play-button column uses `aria-label="Play [Track Title] by [Artist]"`
- Scrubber: `role="slider"` + `aria-valuemin="0"` + `aria-valuemax="[duration in seconds]"` + `aria-valuenow="[current]"` + `aria-valuetext="2 minutes 13 seconds"`
- Now Playing bar: `role="region"` + `aria-label="Now Playing"`
- Album carousel: `role="region"` + `aria-roledescription="carousel"`
- Hero mosaic: `aria-hidden="true"` (decorative — content is the headline above it)

### Keyboard Navigation
Tab order: skip-link → wordmark → primary nav (Listen Now / Browse / Radio / Library / Search) → utility (Try Free CTA / Sign in) → main content → Now Playing bar (when active) → footer. Spacebar plays/pauses (universal media key); arrow keys scrub; J/K/L for skip-back/play-pause/skip-forward (keyboard shortcuts). Esc closes modals and dismisses search overlay.

### Screen Reader Hints
- Album-art images use `alt="[Album Title] by [Artist]"` — never empty alt
- Decorative gradients and the hero mosaic use `role="presentation"` + `aria-hidden="true"`
- Track durations include `aria-label="2 minutes 13 seconds"` alongside the visual `2:13`
- Brand-gradient eyebrow text uses standard text + the gradient via CSS `background-clip: text` — text is selectable and readable by SR

### Reduced Motion
Honored — see §8 for full degradation matrix. Critical: the hero mosaic auto-scroll *must* halt for vestibular-affected users.

### Tone
Apple Music's voice is **confident-cool-curated** — knowledgeable about music without being snobby, intimate without being chummy. The brand explicitly avoids "marketing speak" and gravitates toward editorial precision: every featured playlist has a hand-written editorial blurb; genre pages read like Pitchfork reviews, not like e-commerce category pages.

### Microcopy Patterns

**Button verbs:**
- Primary: "Try it free", "Listen now", "Start free trial", "Subscribe", "Open in Music"
- Secondary: "Learn more", "Open in Music app", "View all songs"
- Tertiary: "View all artists ›", "See all genres ›", "More from this artist ›"
- Play actions: "Play", "Pause", "Skip", "Add to Library", "Add to Playlist"

**Error message recipe:** Quiet and helpful. "Couldn't load this playlist. Check your connection and try again." Never alarmist.

**Success confirmation:** Brief and definitive. "Added to your Library." No exclamation points; the action speaks for itself.

### Empty States
Apple Music empty states are **editorial-helpful**. An empty Library says "Your Library is empty. Add a song or album from anywhere in Music." with a CTA "Browse" — informational, never illustrated mascot.

### CTA Verb Conventions
- "Try it free" — for non-subscribers
- "Open in Music" — for the deep-link to the macOS/iOS app from the web
- "Listen now" — the master CTA on the marketing hero
- "Start your free trial" — for subscription conversion moments
- "Get the app" — for download flows
- "View all" — for editorial expansion ("View all songs", "View all artists")

### Voice Anchors
- Use second person ("you'll discover").
- Lead with the **listening experience**, not the product feature. "Hear it the way the artist intended" not "Spatial Audio with Dolby Atmos".
- Reference real artists, songs, and albums. Apple Music's editorial voice is calibrated by featuring specific artists by name in marketing copy.
- Sentence-case for headlines (Apple convention) — "Listen now", not "Listen Now" or "LISTEN NOW".
- Short headlines, longer body. Hero displays land at 2–4 words ("Listen now", "Hear the difference", "100 million songs"); body intro is 1–2 sentences expanding the headline.

**Forced dark — no light variant offered on the marketing site.**

Apple Music's marketing surface (music.apple.com/us/browse, apple.com/apple-music) renders dark across both system light and dark modes. This is intentional: the brand's emotional register is built around **album art on a black canvas** — light mode would force the album-art tiles onto a white ground, which dramatically reduces the perceived saturation and depth of the artwork.

The Apple Music *application* (iOS, macOS, web app at music.apple.com once signed in) does respect `prefers-color-scheme` and offers a light-theme variant for users who prefer it. The marketing pages, however, are dark-locked.

**Light-mode token map (for the in-app surface, not used on marketing)**: bg `#ffffff`, panel `#f5f5f7`, text `#000000`, brand `#fa233b` (unchanged), border `rgba(0,0,0,0.10)`. Use only inside the application surface.

Apple Music's design language inherits from the **Apple media-property aesthetic** established by Apple TV+ and the iTunes Store — pure-black canvas, soft-charcoal raised panels, glass vibrancy, SF Pro everywhere. The pink-red `#fa233b` is the brand's distinguishing chromatic mark; everything else (typography, surfaces, motion) is shared Apple system DNA.

The album-art mosaic hero is borrowed conceptually from **iTunes' early visualizer aesthetics** and the **MTV-era "videos cube"** — kinesthetic backgrounds where the content (the album cover) carries the visual weight. The 4×3 auto-scrolling grid is Apple Music's signature take, and competitors have adopted it (Tidal, Spotify) but rarely as cleanly.

The **glass vibrancy** material (backdrop-filter: blur(40px) saturate(180%)) traces directly to iOS 7's design language (2013) and macOS Big Sur (2020) — Apple's commitment to translucent depth as a substitute for skeuomorphic shadows. The Apple Music web faithfully reproduces this in the browsers that support it.

What Apple Music rejects: gradient-as-surface (the brand uses gradients only for hero wordmarks and CTA fills, never as a section background — that's Spotify territory), illustrated heroes (Apple's media properties are art-led: album covers, movie posters, never illustrated mascots), and pastel decorative palettes (the system is monolithically pink-red on black).

**Named influences:**
- **Apple TV+** — soft-charcoal panel `#1d1d1f`, glass-translucent global nav, dark-only marketing
- **iOS 7 (Jony Ive era)** — vibrancy material, full-pill button radii, soft-springy press feedback
- **iTunes Store (mid-2010s)** — album-art-led editorial layouts, track-row density
- **Apple SF Pro family** — typographic system across all properties
- **Pitchfork** — editorial voice (intimate, knowledgeable, artist-first)

## Do's and Don'ts

**Do**
- Use the signature pink-red `#fa233b` for primary CTAs, eyebrows, links, and Apple Music Exclusive markers — never substitute red.
- Apply the brand gradient `linear-gradient(135deg, #fa233b → #ff7b00)` to hero wordmarks and primary CTAs only.
- Render on pure-black `#000000` canvas with `#1d1d1f` raised panels — match Apple TV+ surface convention.
- Lead heroes with album-art mosaics (4×3 grid auto-scrolling) — the album cover is the brand.
- Use SF Pro Display above 20px and SF Pro Text below; body text is always 17px.
- Apply `backdrop-filter: blur(40px) saturate(180%)` to global nav, modal backgrounds, and glassy feature cards.
- Lock primary CTAs and play buttons to full-pill (9999px) radius.
- Use SF Pro Text 16/500 for track titles and 14/500 with `tnum` for durations — the Apple Music playlist signature.
- Apply springy 3-phase press animation to play buttons (`scale(1) → 0.92 → 1.05 → 1`).
- Honor `prefers-reduced-motion` — halt the hero mosaic auto-scroll for vestibular-affected users.
- Use sentence-case for headlines ("Listen now", not "Listen Now").
- Reference specific artists, songs, and albums in marketing copy — editorial voice is brand voice.

**Don't**
- Don't introduce a second saturated accent color (orange beyond gradient stop, blue, green) — the system is monolithically pink-red.
- Don't substitute Inter, Geist, or any other sans-serif unless absolutely necessary; SF Pro is the brand's typographic signature.
- Don't render on any canvas other than black — Apple Music marketing is dark-only.
- Don't use illustrated mascots or stock-photo heroes — album art is the brand's photography.
- Don't body-text below 17px (Apple's convention) — even captions don't drop below 12px.
- Don't pure-red the brand color — `#ff453a` is the system destructive-action red, distinct from brand `#fa233b`.
- Don't drop body text opacity below `rgba(255,255,255,0.78)` — that's reserved for soft metadata only.
- Don't square-corner buttons or chips — the system is pill-or-rounded everywhere.
- Don't use the brand gradient as a section background — only for wordmarks and CTAs.
- Don't apply `backdrop-filter` without a fallback solid color — older browsers need `#1d1d1f` solid.
- Don't tab-order around the Now Playing bar — it must be focusable and keyboard-controllable.
- Don't auto-scroll the hero mosaic without honoring `prefers-reduced-motion: reduce`.

### Quick Color Reference
```
bg: #000000
panel: #1d1d1f
text: #ffffff
text-soft: rgba(255,255,255,0.78)
brand: #fa233b
brand-hover: #e51e34
brand-gradient: linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)
border: rgba(255,255,255,0.10)
glass: rgba(29,29,31,0.72) + backdrop-filter blur(40px)
```

### Example Component Prompts

1. *"Create a hero section in Apple Music style: pure-black `#000000` canvas, 4×3 grid of album-art tiles auto-scrolling vertically at 0.4px/frame as background, `linear-gradient(180deg, transparent 0%, #000 80%)` overlay fading the bottom, headline "Listen now" at 80px in SF Pro Display 700 with `-0.025em` tracking, brand-gradient eyebrow "100 MILLION SONGS" at 12/700 uppercase with 0.06em tracking using `linear-gradient(135deg, #fa233b → #ff7b00)` text, and a primary CTA "Try it free" filled in `#fa233b` full-pill (9999px radius)."*

2. *"Design an album-card grid in Apple Music style: 6-up grid on desktop (`minmax(200px, 1fr)`), 24px gap. Each tile: square album-art at 8px radius with shadow `0 8px 24px rgba(0,0,0,0.50)`, title below at SF Pro Text 16/500 white, artist below at 14/400 `rgba(255,255,255,0.78)`. Hover: `scale(1.02)` over 200ms ease-emphasized + glass play-button overlay (rgba(0,0,0,0.6) + blur(20px), 48px circle, white play-fill icon) fades in centered over the art."*

3. *"Build a glassy feature card in Apple Music style: `rgba(29,29,31,0.72)` background with `backdrop-filter: blur(40px) saturate(180%)`, 16px radius, 32px padding, 1px border `rgba(255,255,255,0.08)`. Title in SF Pro Display 32/700 white with `-0.015em` tracking, "DOLBY ATMOS" badge at 10/700 uppercase pink-red bordered, body in SF Pro Text 17/400 `rgba(255,255,255,0.78)`."*

4. *"Render a track row in Apple Music style: transparent background hovering to `rgba(255,255,255,0.06)`, 8px radius, 8px 12px padding, layout `[index 24px][art 40px square 4px radius][title-artist column flex][album column 200px][duration 60px tabular]`. Track title SF Pro Text 16/500 white, artist 14/400 text-soft, duration 14/500 with `font-variant-numeric: tabular-nums`. Add a "DOLBY ATMOS" badge inline before the duration when applicable."*

5. *"Create a Now Playing bar in Apple Music style: fixed bottom 0, full width, height 80px, `rgba(29,29,31,0.92)` background with `backdrop-filter: blur(40px)`, border-top `1px solid rgba(255,255,255,0.06)`. Layout: left = album art 56px + track title/artist; center = skip-back / play-button (pink `#fa233b` filled circle, 56px) / skip-forward + scrubber-track with `tabular-nums` time labels; right = volume + queue + device-cast icons."*

6. *"Design a primary CTA with brand gradient in Apple Music style: `linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)` background, white text in SF Pro Text 17/600 with `-0.005em` tracking, full-pill (9999px) radius, padding 14px 28px. Hover: `box-shadow: 0 0 32px rgba(250,35,59,0.40)` glow. Active: `transform: scale(0.96)` press."*

### Iteration Guide

1. **Start with the canvas.** Pure-black `#000000`, never tinted off-black. The single most-recognizable Apple media-property cue.

2. **Switch to SF Pro family.** Display above 20px, Text below. Set body to 17/1.5 — the Apple body convention. Substitutes: Inter Display + Inter, Geist + Geist Sans.

3. **Move from solid red to brand pink-red `#fa233b`.** Slightly pink-shifted from system red — calibrated as Apple Music's emotional voice.

4. **Pill-shape your CTAs.** Apple Music buttons are full-pill (9999px). If your design has 8px-radius rectangle buttons, you're echoing SAP — not Apple Music.

5. **Add glass vibrancy.** Apply `backdrop-filter: blur(40px) saturate(180%)` to global nav and feature panels over album-art mosaics. Provide a solid fallback (`#1d1d1f`) for unsupported browsers.

6. **Replace illustrated heroes with album-art mosaics.** A 4×3 grid of real album covers, auto-scrolling vertically at `0.4px/frame`, with a black-fade overlay at the bottom. The album cover is the brand.

7. **Add the springy play-button press.** Three-phase scale animation `1 → 0.92 → 1.05 → 1` over 400ms total — the signature Apple Music interaction feedback.

8. **Use brand-gradient eyebrows.** A 12/700 uppercase eyebrow over the hero headline with `linear-gradient(135deg, #fa233b → #ff7b00)` text via `background-clip: text` — the brand's most distinctive typographic signature.