W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Apple Music
Apple Music is Apple's subscription music-streaming service, a product brand operated under the Apple corporate parent. Where the Apple corporate mark is strictly monochrome, Apple Music carries the warmest, most chromatic identity in Apple's service-tier portfolio: a signature pink-to-red gradient mark used across the iOS / macOS app icon, the marketing site, and the Apple Music wordmark lockup. The brand voice inherits Apple's HIG restraint — clarity, deference to content, generous whitespace — but is expressive and editorial in marketing: bold hero photography of artists, gradient typographic moments, and the dark canvas the app itself uses by default. This atom is the **product-brand** atom; the corporate Apple parent brand lives at `apple@1` and is documented separately. Apple Music inherits Apple's SF Pro typography, dark-first HIG surface model, and platform-wide accessibility floor — but overrides the corporate brand's monochrome posture with the pink/red gradient as its primary identity color.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/apple-music/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/apple-music/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Apple Music
Apple Music is Apple's subscription music-streaming service, a product brand operated under the Apple corporate parent. Where the Apple corporate mark is strictly monochrome, Apple Music carries the warmest, most chromatic identity in Apple's service-tier portfolio: a signature pink-to-red gradient mark used across the iOS / macOS app icon, the marketing site, and the Apple Music wordmark lockup. The brand voice inherits Apple's HIG restraint — clarity, deference to content, generous whitespace — but is expressive and editorial in marketing: bold hero photography of artists, gradient typographic moments, and the dark canvas the app itself uses by default.
This atom is the product-brand atom; the corporate Apple parent brand lives at apple@1 and is documented separately. Apple Music inherits Apple's SF Pro typography, dark-first HIG surface model, and platform-wide accessibility floor — but overrides the corporate brand's monochrome posture with the pink/red gradient as its primary identity color.
Tags: apple-music, music, streaming, apple, dark-first, consumer-tech, gradient
Atoms
Palette
Apple Music · [email protected] · Proprietary — All Rights Reserved
Apple Music's signature pink-to-red gradient palette. The product brand under the Apple parent identity uses a vivid pink-into-red warm gradient as its mark fill and hero accent, paired with the near-black canvas and pure white that Apple deploys across its HIG dark-mode surfaces. The Apple Music identity is the warmest, most chromatic of Apple's service-tier brands — distinct from the monochrome Apple corporate mark — and reads as energetic, expressive, and music-forward against the otherwise restrained Apple system.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
apple-music-pink |
Apple Music Pink | #FF4E6B |
apple-music-red |
Apple Music Red | #FF0436 |
apple-music-coral |
Apple Music Coral | #FA233B |
apple-music-white |
Apple Music White | #FFFFFF |
apple-music-black |
Apple Music Black | #000000 |
apple-music-surface |
Apple Music Surface | #1C1C1E |
apple-music-surface-elevated |
Apple Music Surface Elevated | #2C2C2E |
apple-music-gray |
Apple Music Gray | #8E8E93 |
apple-music-gray-light |
Apple Music Gray Light | #C7C7CC |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
apple-music-white |
#FFFFFF |
surface |
apple-music-white |
#FFFFFF |
surface-elevated |
apple-music-white |
#FFFFFF |
text-primary |
apple-music-black |
#000000 |
text-secondary |
apple-music-gray |
#8E8E93 |
text-tertiary |
apple-music-gray-light |
#C7C7CC |
primary |
apple-music-red |
#FF0436 |
primary-hover |
apple-music-coral |
#FA233B |
accent |
apple-music-pink |
#FF4E6B |
accent-hover |
apple-music-coral |
#FA233B |
error |
apple-music-red |
#FF0436 |
success |
apple-music-pink |
#FF4E6B |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
apple-music-black |
#000000 |
surface |
apple-music-surface |
#1C1C1E |
surface-elevated |
apple-music-surface-elevated |
#2C2C2E |
text-primary |
apple-music-white |
#FFFFFF |
text-secondary |
apple-music-gray-light |
#C7C7CC |
text-tertiary |
apple-music-gray |
#8E8E93 |
primary |
apple-music-pink |
#FF4E6B |
primary-hover |
apple-music-coral |
#FA233B |
accent |
apple-music-pink |
#FF4E6B |
accent-hover |
apple-music-red |
#FF0436 |
error |
apple-music-red |
#FF0436 |
success |
apple-music-pink |
#FF4E6B |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
apple-music-pink |
#FF4E6B |
on-identity |
apple-music-white |
#FFFFFF |
background |
apple-music-black |
#000000 |
surface |
apple-music-surface |
#1C1C1E |
surface-elevated |
apple-music-surface-elevated |
#2C2C2E |
text-primary |
apple-music-white |
#FFFFFF |
text-secondary |
apple-music-gray-light |
#C7C7CC |
text-tertiary |
apple-music-gray |
#8E8E93 |
primary |
apple-music-pink |
#FF4E6B |
primary-hover |
apple-music-coral |
#FA233B |
accent |
apple-music-pink |
#FF4E6B |
accent-hover |
apple-music-red |
#FF0436 |
mark |
apple-music-pink |
#FF4E6B |
error |
apple-music-red |
#FF0436 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark.fill
- allowed: apple-music-pink, apple-music-red, apple-music-coral, apple-music-white
- forbidden: apple-music-black, apple-music-gray, apple-music-gray-light
The Apple Music mark renders as the pink-to-red gradient or as a flat-white reversed variant on dark / chromatic surfaces. Filling the mark with the neutral grays or with black collapses the gradient identity into the parent Apple corporate monochrome posture, which is reserved for the Apple corporate mark at
apple@1.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, outlined, gradient-reversed
Apple Music inherits the Apple Identity Guidelines' prohibition on stretching, rotating, recoloring, or adding effects to the mark. The gradient direction is fixed (pink at one terminus, red at the other) — reversing the gradient inverts the brand's published treatment.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Apple Music White (#FFFFFF) on Apple Music Black (#000000) gives ~21:1 — well clear of WCAG 2.1 Level AA. This rule encodes the floor any new role pairing must clear on the dark canvas.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Apple Music Pink (#FF4E6B) on the dark canvas must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of primary CTAs and the play button the brand depends on.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, validation-failure
The pink gradient terminus is reserved for the mark, hero typographic moments, and the primary play / subscribe action. Reusing it for body text or validation-failure states conflicts with its established positive-action meaning and dilutes the gradient identity.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Apple Music inherits the Apple HIG Accessibility floor: 4.5:1 for body text, 3:1 for large text and interactive controls.
💡 recommendation (3)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Apple's HIG type ramp uses SF Pro Medium (500) and Semibold (600) for most heading sizes, with Bold (700) reserved for hero typography. Apple Music's marketing headlines lean into the heavier end of this ramp for editorial impact while staying within the HIG-approved weight set.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.3
Apple Music inherits Apple's HIG convention of using one family (SF Pro, substituted here by Inter) for both heading and body, distinguished by a meaningful size differential. A 1.3× floor preserves hierarchy when one family does both jobs.
compositionConstraint → roles.colors.primary
- pairsWith: apple-music-black, apple-music-surface, apple-music-white
- doesNotPairWith: apple-music-gray, apple-music-gray-light
The pink-to-red gradient reads cleanest against the deep black canvas or against pure white. Pairing the gradient against the mid-grays produces a muddy adjacency that fights the gradient's saturation rather than supporting it as a focal accent.
Provenance
- Source: https://brandcolorcode.com/apple-music
- License:
Proprietary — All Rights Reserved - Attribution: Apple, Apple Music, the Apple Music wordmark, and the pink-to-red gradient mark are trademarks of Apple Inc. This atom captures brand-atoms' read of Apple Music's publicly observable identity (the marketing site at apple.com/apple-music/ and the iOS / macOS app icon and wordmark) cross-referenced against third-party brand-color aggregators. It is not an official Apple brand-guidelines document.
- Imported:
2026-05-19 - Notes: Apple Music sits under the
apple@1parent brand. The parent atom MUST NOT be modified by this child; relationship is documented here in prose only. Apple does not publish explicit hex values for the Apple Music gradient — the pink (#FF4E6B) and red (#FF0436) values are the closest third-party-reported approximations per brandcolorcode.com. The proprietary SF Pro family is not openly distributed; this atom substitutesinter@1as the open-source rendering fallback for both heading and body roles, mirroring the convention used by other Apple-family atoms in this catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Apple Music
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Apple Music
A clear hierarchy in Apple Music's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Apple Music
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ apple-music-pink #FF4E6B accent-hover
→ apple-music-red #FF0436 background
→ apple-music-black #000000 error
→ apple-music-red #FF0436 identity
→ apple-music-pink #FF4E6B mark
→ apple-music-pink #FF4E6B on-identity
→ apple-music-white #FFFFFF primary
→ apple-music-pink #FF4E6B primary-hover
→ apple-music-coral #FA233B surface
→ apple-music-surface #1C1C1E surface-elevated
→ apple-music-surface-elevated #2C2C2E text-primary
→ apple-music-white #FFFFFF text-secondary
→ apple-music-gray-light #C7C7CC text-tertiary
→ apple-music-gray #8E8E93 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from apple-music)
Light mode (12 roles)
accent
→ apple-music-pink accent-hover
→ apple-music-coral background
→ apple-music-white error
→ apple-music-red primary
→ apple-music-red primary-hover
→ apple-music-coral success
→ apple-music-pink surface
→ apple-music-white surface-elevated
→ apple-music-white text-primary
→ apple-music-black text-secondary
→ apple-music-gray text-tertiary
→ apple-music-gray-light Dark mode (12 roles)
accent
→ apple-music-pink accent-hover
→ apple-music-red background
→ apple-music-black error
→ apple-music-red primary
→ apple-music-pink primary-hover
→ apple-music-coral success
→ apple-music-pink surface
→ apple-music-surface surface-elevated
→ apple-music-surface-elevated text-primary
→ apple-music-white text-secondary
→ apple-music-gray-light text-tertiary
→ apple-music-gray Rules (9 typed constraints)
error · 6 rules
colorChoice logo.mark.fill allowed apple-music-pink, apple-music-red, apple-music-coral, apple-music-white forbidden apple-music-black, apple-music-gray, apple-music-gray-light The Apple Music mark renders as the pink-to-red gradient or as a flat-white reversed variant on dark / chromatic surfaces. Filling the mark with the neutral grays or with black collapses the gradient identity into the parent Apple corporate monochrome posture, which is reserved for the Apple corporate mark at `apple@1`.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, outlined, gradient-reversed Apple Music inherits the Apple Identity Guidelines' prohibition on stretching, rotating, recoloring, or adding effects to the mark. The gradient direction is fixed (pink at one terminus, red at the other) — reversing the gradient inverts the brand's published treatment.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Apple Music White (#FFFFFF) on Apple Music Black (#000000) gives ~21:1 — well clear of WCAG 2.1 Level AA. This rule encodes the floor any new role pairing must clear on the dark canvas.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Apple Music Pink (#FF4E6B) on the dark canvas must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of primary CTAs and the play button the brand depends on.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, validation-failure The pink gradient terminus is reserved for the mark, hero typographic moments, and the primary play / subscribe action. Reusing it for body text or validation-failure states conflicts with its established positive-action meaning and dilutes the gradient identity.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Apple Music inherits the Apple HIG Accessibility floor: 4.5:1 for body text, 3:1 for large text and interactive controls.
recommendation · 3 rules
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Apple's HIG type ramp uses SF Pro Medium (500) and Semibold (600) for most heading sizes, with Bold (700) reserved for hero typography. Apple Music's marketing headlines lean into the heavier end of this ramp for editorial impact while staying within the HIG-approved weight set.
fontPairing typography.heading requires body minSizeRatio 1.3 Apple Music inherits Apple's HIG convention of using one family (SF Pro, substituted here by Inter) for both heading and body, distinguished by a meaningful size differential. A 1.3× floor preserves hierarchy when one family does both jobs.
compositionConstraint roles.colors.primary pairsWith apple-music-black, apple-music-surface, apple-music-white doesNotPairWith apple-music-gray, apple-music-gray-light The pink-to-red gradient reads cleanest against the deep black canvas or against pure white. Pairing the gradient against the mid-grays produces a muddy adjacency that fights the gradient's saturation rather than supporting it as a focal accent.
Provenance
- Source
- https://brandcolorcode.com/apple-music
- License
Proprietary — All Rights Reserved- Attribution
- Apple, Apple Music, the Apple Music wordmark, and the pink-to-red gradient mark are trademarks of Apple Inc. This atom captures brand-atoms' read of Apple Music's publicly observable identity (the marketing site at apple.com/apple-music/ and the iOS / macOS app icon and wordmark) cross-referenced against third-party brand-color aggregators. It is not an official Apple brand-guidelines document.
- Imported
2026-05-19- Notes
- Apple Music sits **under the `apple@1` parent brand**. The parent atom MUST NOT be modified by this child; relationship is documented here in prose only. Apple does not publish explicit hex values for the Apple Music gradient — the pink (#FF4E6B) and red (#FF0436) values are the closest third-party-reported approximations per brandcolorcode.com. The proprietary SF Pro family is not openly distributed; this atom substitutes `inter@1` as the open-source rendering fallback for both heading and body roles, mirroring the convention used by other Apple-family atoms in this catalog.