dark · music · streaming · sans · pink · vibrant · gradient · album-art · glassy
Apple Music
Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas.
By webdesignhot · music.apple.com
$ npx design-md add apple-music
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- 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 AA · 5.4
#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 AAA · 21.0
#ffffff - text-strong
#ffffff - text-soft
rgba(255,255,255,0.78) - text-faint AA · 6.5
rgba(255,255,255,0.56) - text-disabled
rgba(255,255,255,0.32) - text-on-brand
#ffffff - on-brand
#ffffff - border — · 1.2
rgba(255,255,255,0.10) - border-soft
rgba(255,255,255,0.06) - border-strong — · 1.5
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)
Ship faster than ever.
display-hero "SF Pro Display" 80px w700 -0.025em
Ship faster than ever.
display-large "SF Pro Display" 56px w700 -0.022em
Ship faster than ever.
h1 "SF Pro Display" 40px w700 -0.02em
Built for teams that ship.
h2 "SF Pro Display" 32px w700 -0.015em
A complete kit
h3 "SF Pro Display" 24px w600 -0.01em
The quick brown fox jumps over the lazy dog.
h4 "SF Pro Display" 20px w600 -0.005em
The quick brown fox jumps over the lazy dog.
body-large "SF Pro Text" 19px w400 0
The quick brown fox jumps over the lazy dog.
h5 "SF Pro Display" 17px w600 0
The quick brown fox jumps over the lazy dog.
body-md "SF Pro Text" 17px w400 0
The quick brown fox jumps over the lazy dog.
body-strong "SF Pro Text" 17px w600 0
The quick brown fox jumps over the lazy dog.
button "SF Pro Text" 17px w600 -0.005em
The quick brown fox jumps over the lazy dog.
track-title "SF Pro Text" 16px w500 0
The quick brown fox jumps over the lazy dog.
body-sm "SF Pro Text" 14px w400 0
The quick brown fox jumps over the lazy dog.
button-sm "SF Pro Text" 14px w600 0
The quick brown fox jumps over the lazy dog.
track-artist "SF Pro Text" 14px w400 0
The quick brown fox jumps over the lazy dog.
duration "SF Pro Text" 14px w500 0
OUR DESIGN SYSTEM
label "SF Pro Text" 13px w600 0
The quick brown fox jumps over the lazy dog.
eyebrow "SF Pro Text" 12px w700 0.06em
OUR DESIGN SYSTEM
caption "SF Pro Text" 12px w400 0
The quick brown fox jumps over the lazy dog.
legal "SF Pro Text" 11px w400 0
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 20px
- step-5 24px
- step-6 32px
- step-7 40px
- step-8 48px
- step-9 64px
- step-10 80px
- step-11 96px
- step-12 128px
- step-13 160px
- micro
2px - sm
6px - md
8px - album-art
8px - lg
12px - album-art-large
12px - xl
16px - hero
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Apple Music
tagline: Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas.
author: webdesignhot
source_url: https://music.apple.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media]
tags: [dark, music, streaming, sans, pink, vibrant, gradient, album-art, glassy]
preview_swatch: ['#000000', '#fa233b', '#ffffff']
related: [apple, apple-tv, spotify]
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' # pure black canvas — Apple's standard for media properties
bg-panel: '#1d1d1f' # raised panel surface (matches Apple TV+ standard)
bg-elev: '#2a2a2c' # elevated card on panel
bg-soft: '#1a1a1c' # subtle alt-section
bg-page: '#000000' # default body
surface: '#1d1d1f' # default card surface
surface-glass: 'rgba(29,29,31,0.72)' # glassy panel with backdrop-blur(40px)
surface-glass-light: 'rgba(255,255,255,0.08)' # light glass over album art
surface-elev: '#2a2a2c' # elevated card
brand: '#fa233b' # Apple Music signature pink-red
brand-hover: '#e51e34' # darker hover
brand-active: '#c8172c' # pressed
brand-soft: 'rgba(250,35,59,0.16)' # soft pink-red wash
brand-glow: 'rgba(250,35,59,0.40)' # focus glow
brand-deep: '#cc1729' # deep emphasis
brand-gradient-start: '#fa233b' # gradient stop 1
brand-gradient-end: '#ff7b00' # gradient stop 2 — warm orange
brand-gradient-radial-end: '#ff007a' # radial gradient pink stop
text: '#ffffff' # primary text on black
text-strong: '#ffffff' # headings
text-soft: 'rgba(255,255,255,0.78)' # secondary metadata
text-faint: 'rgba(255,255,255,0.56)' # captions, hint
text-disabled: 'rgba(255,255,255,0.32)'
text-on-brand: '#ffffff'
on-brand: '#ffffff'
border: 'rgba(255,255,255,0.10)' # default hairline on dark
border-soft: 'rgba(255,255,255,0.06)'
border-strong: 'rgba(255,255,255,0.18)'
link: '#fa233b' # link == brand
link-hover: '#ff4d63' # lighter hover for visibility on dark
selected: 'rgba(250,35,59,0.16)'
scrim: 'rgba(0,0,0,0.72)' # modal backdrop
scrim-light: 'rgba(0,0,0,0.40)' # over-album-art scrim for legibility
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)' # album-art tile shadow for depth
success: '#3aaa50'
warning: '#ff9f0a'
danger: '#ff453a' # SF system red on dark
info: '#0a84ff' # SF system blue
vibrancy-overlay: 'rgba(255,255,255,0.04)' # subtle vibrancy on glass
typography:
display:
family: '"SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif'
weights: [300, 400, 500, 600, 700, 800, 900]
opentype-features: ['ss01: alt 6/9', 'ss02: alt 4', 'tnum on numeric', 'cv11: alt zero']
body:
family: '"SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif'
weights: [400, 500, 600, 700]
mono:
family: '"SF Mono", Menlo, Consolas, monospace'
weights: [400, 500, 600]
scale:
display-hero: { size: 80, weight: 700, lineHeight: 1.05, tracking: '-0.025em', family: display, notes: 'flagship marketing hero — "Listen now"' }
display-large: { size: 56, weight: 700, lineHeight: 1.07, tracking: '-0.022em', family: display, notes: 'genre / playlist hero' }
h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.02em', family: display }
h2: { size: 32, weight: 700, lineHeight: 1.15, tracking: '-0.015em', family: display }
h3: { size: 24, weight: 600, lineHeight: 1.2, tracking: '-0.01em', family: display }
h4: { size: 20, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
h5: { size: 17, weight: 600, lineHeight: 1.3, tracking: '0', family: display }
body-large: { size: 19, weight: 400, lineHeight: 1.5, tracking: '0', family: body, notes: 'hero intro paragraph' }
body-md: { size: 17, weight: 400, lineHeight: 1.5, tracking: '0', family: body, notes: 'default body — Apple convention' }
body-strong: { size: 17, weight: 600, lineHeight: 1.5, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body, notes: 'metadata, secondary' }
label: { size: 13, weight: 600, lineHeight: 1.3, tracking: '0', family: body }
eyebrow: { size: 12, weight: 700, lineHeight: 1.3, tracking: '0.06em', family: body, transform: uppercase, notes: 'category eyebrow with brand-gradient text' }
button: { size: 17, weight: 600, lineHeight: 1.2, tracking: '-0.005em', family: body }
button-sm: { size: 14, weight: 600, lineHeight: 1.2, tracking: '0', family: body }
track-title: { size: 16, weight: 500, lineHeight: 1.3, tracking: '0', family: body, notes: 'track row in playlist' }
track-artist: { size: 14, weight: 400, lineHeight: 1.3, tracking: '0', family: body }
duration: { size: 14, weight: 500, lineHeight: 1.3, tracking: '0', family: body, opentype: 'tnum', notes: 'track duration — tabular numerals' }
caption: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
legal: { size: 11, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
radius:
micro: 2
sm: 6 # buttons (pill-shape preferred but rectangle exists)
md: 8 # inputs
lg: 12 # default card / panel
xl: 16 # featured card
hero: 24 # hero card with album mosaic
album-art: 8 # album cover thumbnail
album-art-large: 12 # large album cover (Now Playing)
pill: 9999 # CTAs, chips, control buttons
spacing:
base: 4
scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
header-height: 64
outer-gutter-mobile: 16
outer-gutter-tablet: 24
outer-gutter-desktop: 40
hero-aspect: '21/9'
album-grid-mobile: 2
album-grid-tablet: 4
album-grid-desktop: 6
components:
button-primary:
bg: '#fa233b'
color: '#ffffff'
border: 'none'
radius: 9999
padding: '14px 28px'
font: button
use: 'Primary CTA — "Try it free", "Listen now", "Subscribe".'
button-primary-gradient:
bg: 'linear-gradient(135deg, #fa233b 0%, #ff7b00 100%)'
color: '#ffffff'
border: 'none'
radius: 9999
padding: '14px 28px'
use: 'Hero primary CTA with brand gradient — "Start your free trial".'
button-secondary:
bg: 'rgba(255,255,255,0.12)'
color: '#ffffff'
border: 'none'
radius: 9999
padding: '14px 28px'
use: 'Secondary glass-button on dark — "Learn more", "Open in Music app".'
button-tertiary:
bg: 'transparent'
color: '#fa233b'
border: 'none'
padding: '14px 12px'
icon: 'arrow-right after label'
use: 'Inline link CTA — "View all artists ›".'
button-play:
bg: '#fa233b'
color: '#ffffff'
border: 'none'
radius: 9999
size: 56
icon: 'play-fill 24px white'
use: 'Circular play button — appears on album-card hover, hero, Now Playing bar.'
button-play-on-art:
bg: 'rgba(0,0,0,0.6)'
color: '#ffffff'
border: 'none'
radius: 9999
size: 48
backdrop-filter: 'blur(20px)'
use: 'Glass play button overlay on hover — appears centered over album art.'
card-album:
bg: 'transparent'
radius: 12
padding: 0
art-radius: 8
art-shadow: '0 8px 24px rgba(0,0,0,0.50)'
title-mt: 12
title-style: '16/500 white'
artist-style: '14/400 text-soft'
hover: 'play button overlay fades in over 200ms + slight scale(1.02)'
use: 'Album/playlist tile in editorial grids — art on top, title below, artist below.'
card-feature:
bg: '#1d1d1f'
radius: 16
padding: '32px'
border: '1px solid rgba(255,255,255,0.06)'
use: 'Feature card on marketing surfaces — Spatial Audio explainer, exclusive content callout.'
card-glass:
bg: '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)'
use: 'Glassy panel over album-art mosaic — material vibrancy effect.'
card-now-playing:
bg: '#1d1d1f'
radius: 12
padding: '20px'
art-size: 88
art-radius: 8
art-shadow: '0 12px 32px rgba(0,0,0,0.60)'
use: 'Now Playing card with album art + track info + scrubber + controls.'
card-track-row:
bg: 'transparent'
hover-bg: 'rgba(255,255,255,0.06)'
radius: 8
padding: '8px 12px'
art-size: 40
art-radius: 4
use: 'Track row in playlist view — index, art, title/artist, album, duration.'
badge-pill:
bg: 'rgba(250,35,59,0.16)'
color: '#fa233b'
radius: 9999
padding: '4px 12px'
font: { size: 12, weight: 600 }
use: '"Apple Music Exclusive", "Spatial Audio", "Lossless" — categorical pill.'
badge-spatial:
bg: 'transparent'
color: '#fa233b'
border: '1px solid #fa233b'
radius: 4
padding: '2px 6px'
font: { size: 10, weight: 700 }
transform: uppercase
use: '"DOLBY ATMOS", "LOSSLESS" — quality badge on track rows.'
input-search:
bg: 'rgba(255,255,255,0.08)'
border: 'none'
radius: 9999
padding: '10px 16px 10px 40px'
icon: 'magnifying-glass 16px white-soft'
placeholder: 'rgba(255,255,255,0.56)'
use: 'Top-bar search — full-pill, glass-translucent.'
global-nav:
bg: '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: true
use: 'Fixed top bar with translucent black blur — Apple"s standard.'
album-grid:
grid: 'repeat(auto-fill, minmax(200px, 1fr))'
gap: '24px'
use: 'Editorial album grid — 6-up desktop, 4 tablet, 2 mobile.'
hero-mosaic:
layout: 'CSS grid 4-col x 3-row mosaic of album-art tiles'
animation: 'auto-scroll vertical at 0.4px/frame, paused on hover'
overlay: 'linear-gradient(180deg, transparent 0%, #000 80%)'
use: 'Hero background — 12 album-art covers tiled with motion.'
now-playing-bar:
bg: 'rgba(29,29,31,0.92)'
backdrop-filter: 'blur(40px)'
position: 'fixed bottom 0 left 0 right 0'
height: 80
border-top: '1px solid rgba(255,255,255,0.06)'
use: 'Persistent player bar — art + track info + transport + scrubber + volume.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.32, 0.72, 0, 1)' # Apple's signature smooth-out curve
ease-spring: 'cubic-bezier(0.5, 1.35, 0.6, 1)' # springy overshoot for play button
duration-fast: 100
duration-standard: 200
duration-slow: 300
duration-page: 500
duration-album-scroll: 60000 # 60s mosaic scroll cycle
card-hover: 'album card: scale(1) → scale(1.02) over 200ms ease-emphasized + play-button-overlay fades in'
play-button-press: 'scale(1) → scale(0.92) over 100ms then back to 1.05 over 200ms (springy)'
scrubber-drag: 'thumb scale(1) → scale(1.5) on grab, follows pointer'
reduced-motion: 'respects prefers-reduced-motion: reduce — mosaic auto-scroll halts; card hover scales degrade to opacity dim; springy play-button compresses to 100ms linear ease.'
breakpoints:
mobile: 600
tablet: 900
desktop: 1280
wide: 1440
shadows:
none: 'none'
album: '0 8px 24px rgba(0,0,0,0.50)'
album-hover: '0 16px 40px rgba(0,0,0,0.60)'
card: '0 4px 16px rgba(0,0,0,0.40)'
elevated: '0 12px 32px rgba(0,0,0,0.60)'
modal: '0 24px 56px rgba(0,0,0,0.80)'
ring: '0 0 0 3px rgba(250,35,59,0.40)'
glow-pink: '0 0 32px rgba(250,35,59,0.40)'
accessibility:
contrast-text-on-bg: 21.0 # white on black — AAA
contrast-soft-on-bg: 13.6 # white-78% on black — AAA
contrast-faint-on-bg: 8.6 # white-56% on black — AAA at body
contrast-text-on-brand: 4.8 # white on brand pink-red — AA at body
contrast-on-glass: 12.0 # white on glass surface — AAA (glass 72% over black)
focus-ring: '3px solid rgba(250,35,59,0.40) — pink-red glow ring'
reduced-motion-honored: true
touch-target-min: 44
keyboard-nav: 'Tab order — skip-link → wordmark → nav (Listen Now/Browse/Radio/Library/Search) → utility (sign in / try free) → main → now-playing-bar → footer.'
aria-patterns: 'Track rows use role="row" + aria-rowindex; play buttons use aria-label="Play [Track] by [Artist]"; scrubber uses role="slider" + aria-valuemin/max/now/text; carousel uses aria-roledescription="carousel".'
dark-mode: forced # Apple Music marketing is dark-only by brand design. No light variant offered. The Music app supports light/dark via system theme, but the marketing site (music.apple.com) renders dark across both system modes.
---
## 1. Visual Theme & Atmosphere
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
## 2. Color Palette & Roles
### 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
## 3. Typography Rules
### 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.
## 4. Component Stylings
### 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.
## 5. Layout Principles
### 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.
## 6. Shapes & Radius Scale
- **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.
## 7. Depth & Elevation
| 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.
## 8. Interaction & Motion
### 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)
## 9. Accessibility & A11y
### 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.
## 10. Responsive Behavior
### 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).
## 11. Content & Voice
### 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.
## 12. Dark Mode & Theming
**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.
## 13. Lineage & Influences
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)
## 14. 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`.
## 15. Agent Prompt Guide
### 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.
1. Visual Theme & Atmosphere
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
#fa233bcalibrated 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
#000000canvas with raised#1d1d1fpanels — 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
8pxradius, scale1.02on hover with play-button overlay - Track rows with tabular-num durations for column-aligned time
- Persistent Now Playing bar at bottom of viewport —
80pxglass 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
2. Color Palette & Roles
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 +#fa233btext): Selected playlist row, selected nav item. - Play Button: pink-red
#fa233bfilled circle with white play-fill icon, springy press animation. - Disabled: text
rgba(255,255,255,0.32)+ bgrgba(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
3. Typography Rules
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:
kernalways on;ligaon for body, off for tabular contexts;tnumon for track durations and pricing;ss01(alt 6/9) andcv11(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 toward0emat body. Buttons get a slight-0.005emfor 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-numsso the column aligns vertically. - Body white at full opacity.
#fffffffor 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.
4. Component Stylings
Buttons
button-primary — “Try it free”
- Background
#fa233b, text#ffffff, border none, radius9999(full-pill), padding14px 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: shadow0 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, padding14px 12px. Trailing chevron›translates4pxright on hover.
button-play — Circular Play Button
- Background
#fa233b, icon white play-fill 24px, border none, radius9999, size56. 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, radius9999, size48,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-radius8, art-shadow0 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, radius16, padding32px, border1px 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), radius16, padding32px,backdrop-filter: blur(40px) saturate(180%), border1px 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, radius12, padding20px. Album art at88pxsize,8pxradius, shadow0 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, radius8, padding8px 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, radius9999, padding4px 12px, font 12/600. Pink-on-soft-pink chip.
badge-spatial — “DOLBY ATMOS”
- Background transparent, color
#fa233b, border1px solid #fa233b, radius4, padding2px 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, radius9999(full-pill), padding10px 16px 10px 40px. Magnifying-glass icon 16px, white-soft. Placeholderrgba(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), border1px solid rgba(255,255,255,0.10), radius8, padding12px 16px. Focus: border1px 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%), height64, border-bottom1px 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-rowmosaic of album-art tiles, each tileaspect-ratio: 1. Auto-scrolls vertically at0.4px/frame(60s full cycle), paused on hover. Overlay gradientlinear-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), fixedbottom 0 left 0 right 0, height80, border-top1px 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, padding64px 0 32px. Multi-column site index + Apple corporate footer. Tiny — Apple footers are deliberately quiet.
5. Layout Principles
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.
6. Shapes & Radius Scale
- 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.
7. Depth & Elevation
| 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.
8. Interaction & Motion
Easing Curves
ease-standard: cubic-bezier(0.4, 0, 0.2, 1)— universal defaultease-emphasized: cubic-bezier(0.32, 0.72, 0, 1)— Apple’s signature smooth-out curve, used on hover transitions, modal opens, and most interactive feedbackease-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 phaseduration-standard: 200ms— button hovers, card hover scales, play-button second phaseduration-slow: 300ms— modal opens, panel expansionsduration-page: 500ms— page fade-insduration-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.72over 300ms; modal scales0.94 → 1+ opacity0 → 1over 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)
9. Accessibility & A11y
Contrast Pairs (WCAG)
- Text white
#ffffffon 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
#ffffffon brand pink-red#fa233b— 4.8:1 (AA at body) - Brand
#fa233bon 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 usesaria-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 visual2: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.
10. Responsive Behavior
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, nativeloading="lazy"except hero - High-DPI:
srcsetwith1x / 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).
11. Content & Voice
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.
12. Dark Mode & Theming
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.
13. Lineage & Influences
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)
14. Do’s and Don’ts
Do
- Use the signature pink-red
#fa233bfor 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
#000000canvas with#1d1d1fraised 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
tnumfor 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 —
#ff453ais 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-filterwithout a fallback solid color — older browsers need#1d1d1fsolid. - 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.
15. Agent Prompt Guide
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
-
“Create a hero section in Apple Music style: pure-black
#000000canvas, 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.025emtracking, brand-gradient eyebrow “100 MILLION SONGS” at 12/700 uppercase with 0.06em tracking usinglinear-gradient(135deg, #fa233b → #ff7b00)text, and a primary CTA “Try it free” filled in#fa233bfull-pill (9999px radius).” -
“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 shadow0 8px 24px rgba(0,0,0,0.50), title below at SF Pro Text 16/500 white, artist below at 14/400rgba(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.” -
“Build a glassy feature card in Apple Music style:
rgba(29,29,31,0.72)background withbackdrop-filter: blur(40px) saturate(180%), 16px radius, 32px padding, 1px borderrgba(255,255,255,0.08). Title in SF Pro Display 32/700 white with-0.015emtracking, “DOLBY ATMOS” badge at 10/700 uppercase pink-red bordered, body in SF Pro Text 17/400rgba(255,255,255,0.78).” -
“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 withfont-variant-numeric: tabular-nums. Add a “DOLBY ATMOS” badge inline before the duration when applicable.” -
“Create a Now Playing bar in Apple Music style: fixed bottom 0, full width, height 80px,
rgba(29,29,31,0.92)background withbackdrop-filter: blur(40px), border-top1px solid rgba(255,255,255,0.06). Layout: left = album art 56px + track title/artist; center = skip-back / play-button (pink#fa233bfilled circle, 56px) / skip-forward + scrubber-track withtabular-numstime labels; right = volume + queue + device-cast icons.” -
“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.005emtracking, 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
-
Start with the canvas. Pure-black
#000000, never tinted off-black. The single most-recognizable Apple media-property cue. -
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.
-
Move from solid red to brand pink-red
#fa233b. Slightly pink-shifted from system red — calibrated as Apple Music’s emotional voice. -
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.
-
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. -
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. -
Add the springy play-button press. Three-phase scale animation
1 → 0.92 → 1.05 → 1over 400ms total — the signature Apple Music interaction feedback. -
Use brand-gradient eyebrows. A 12/700 uppercase eyebrow over the hero headline with
linear-gradient(135deg, #fa233b → #ff7b00)text viabackground-clip: text— the brand’s most distinctive typographic signature.
Drop apple-music into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add apple-music 2 · ship landing page
npx agentkit init --design apple-music light minimal
Apple
White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent sy…
Docs
Install
Apple
webdesignhot
dark minimal
Apple TV+
Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only v…
Docs
Install
Apple TV+
webdesignhot
dark bold
Spotify
Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical stre…
Docs
Install
Spotify
webdesignhot