W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Spotify
Spotify AB is the global audio-streaming service for music, podcasts, and audiobooks, headquartered in Stockholm. The brand is dark-first and high-energy: a solid black canvas with the saturated Spotify Green used as the principal accent on the wordmark, the play affordance, and primary CTAs. The voice is warm, expressive, and editorial — pairing the disciplined black- and-green corporate identity with vivid duotone photography and bold typographic moments in marketing.
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/spotify/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/spotify/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.
Spotify
Spotify AB is the global audio-streaming service for music, podcasts, and audiobooks, headquartered in Stockholm. The brand is dark-first and high-energy: a solid black canvas with the saturated Spotify Green used as the principal accent on the wordmark, the play affordance, and primary CTAs. The voice is warm, expressive, and editorial — pairing the disciplined black- and-green corporate identity with vivid duotone photography and bold typographic moments in marketing.
Tags: streaming, audio, music, podcasts, spotify, dark-first, consumer-tech
Atoms
Palette
Spotify · [email protected] · Proprietary — All Rights Reserved
Spotify corporate palette built around Spotify Green (#1DB954, with the brighter #1ED760 introduced as the refreshed primary in the 2015 brand update) and a deep-black canvas. The brand is dark-first: the consumer player, marketing, and the official Spotify logomark all live on black with green reading as the high-energy accent. The black-and-green pairing is the most recognizable element of the Spotify identity.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Spotify Circular ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Spotify Circular ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
spotify-green |
Spotify Green | #1ED760 |
spotify-green-legacy |
Spotify Green (Legacy) | #1DB954 |
spotify-green-pressed |
Spotify Green Pressed | #169C46 |
spotify-black |
Spotify Black | #000000 |
spotify-dark |
Spotify Dark | #121212 |
spotify-elevated |
Spotify Elevated | #181818 |
spotify-gray |
Spotify Gray | #535353 |
spotify-gray-light |
Spotify Gray Light | #B3B3B3 |
spotify-white |
Spotify White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
spotify-white |
#FFFFFF |
surface |
spotify-white |
#FFFFFF |
surface-elevated |
spotify-white |
#FFFFFF |
text-primary |
spotify-black |
#000000 |
text-secondary |
spotify-gray |
#535353 |
text-tertiary |
spotify-gray-light |
#B3B3B3 |
primary |
spotify-green |
#1ED760 |
primary-hover |
spotify-green-pressed |
#169C46 |
accent |
spotify-green |
#1ED760 |
accent-hover |
spotify-green-pressed |
#169C46 |
warning |
spotify-green-legacy |
#1DB954 |
warning-hover |
spotify-green-pressed |
#169C46 |
error |
spotify-gray |
#535353 |
success |
spotify-green |
#1ED760 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
spotify-black |
#000000 |
surface |
spotify-dark |
#121212 |
surface-elevated |
spotify-elevated |
#181818 |
text-primary |
spotify-white |
#FFFFFF |
text-secondary |
spotify-gray-light |
#B3B3B3 |
text-tertiary |
spotify-gray |
#535353 |
primary |
spotify-green |
#1ED760 |
primary-hover |
spotify-green-pressed |
#169C46 |
accent |
spotify-green |
#1ED760 |
accent-hover |
spotify-green-pressed |
#169C46 |
warning |
spotify-green-legacy |
#1DB954 |
warning-hover |
spotify-green-pressed |
#169C46 |
error |
spotify-gray-light |
#B3B3B3 |
success |
spotify-green |
#1ED760 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
spotify-black |
#000000 |
on-identity |
spotify-green |
#1ED760 |
background |
spotify-black |
#000000 |
surface |
spotify-dark |
#121212 |
surface-elevated |
spotify-elevated |
#181818 |
text-primary |
spotify-white |
#FFFFFF |
text-secondary |
spotify-gray-light |
#B3B3B3 |
text-tertiary |
spotify-gray |
#535353 |
primary |
spotify-green |
#1ED760 |
primary-hover |
spotify-green-pressed |
#169C46 |
accent |
spotify-green |
#1ED760 |
accent-hover |
spotify-green-pressed |
#169C46 |
mark |
spotify-green |
#1ED760 |
text-emphasis |
spotify-white |
#FFFFFF |
text-muted |
spotify-gray-light |
#B3B3B3 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: spotify-green, spotify-white, spotify-black
- forbidden: spotify-green-legacy, spotify-green-pressed, spotify-gray, spotify-gray-light
The Spotify wordmark renders only in Spotify Green, white, or black per the public brand assets. The legacy green is preserved for historical surfaces; the pressed green is an interactive-state value, not a wordmark fill.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, green-on-low-contrast-background
The Spotify wordmark and three-arc mark have strict clearspace and color rules in the Spotify brand system. Never render the green wordmark on a background where it falls below WCAG-AA-large contrast; use the white or black variant on those surfaces.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Spotify White on Spotify Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Spotify surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Spotify Green on Spotify Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of the play-action and primary CTAs the brand depends on.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, validation-failure
Spotify Green is reserved for the brand mark, the play affordance, and primary action. Using it for body text or for error/failure states conflicts with its established positive-action meaning.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast verification the default check on any new role pairing.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 700, 900
Spotify's editorial headlines use Spotify Circular Bold (700) or Black (900) for hero typography. Lighter cuts read as body or UI weight and compromise the editorial voice.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Spotify's hero and section headers run materially larger than the player UI's body text. A 1.5× floor preserves the display-to-prose hierarchy the editorial voice depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: roles.colors.background, roles.colors.text-primary
- doesNotPairWith: spotify-green-legacy
The signature green pairs cleanly with black canvas and white text. Combining the current green with the legacy green on the same surface creates a muddy two-green composition that reads as inconsistency.
Provenance
- Source: https://developer.spotify.com/documentation/design
- License:
Proprietary — All Rights Reserved - Attribution: Spotify AB — Spotify, the Spotify wordmark, and the three-arc "soundwave" mark are registered trademarks of Spotify AB. Spotify Circular is licensed from Lineto. This atom captures brand-atoms' read of Spotify's publicly available developer design documentation and brand assets; it is not an official Spotify brand-guidelines document.
- Imported:
2026-05-17 - Notes: Spotify's brand identity is anchored on the green-on-black pairing. The 2015 brand refresh introduced the brighter #1ED760 as the primary green while retaining #1DB954 for legacy surfaces. Both coexist; the brighter green dominates current product.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Spotify
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.
Spotify
A clear hierarchy in Spotify'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
Spotify
[email protected]font · heading
Spotify Circular
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Spotify Circular
[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
→ spotify-green #1ED760 accent-hover
→ spotify-green-pressed #169C46 background
→ spotify-black #000000 identity
→ spotify-black #000000 mark
→ spotify-green #1ED760 on-identity
→ spotify-green #1ED760 primary
→ spotify-green #1ED760 primary-hover
→ spotify-green-pressed #169C46 surface
→ spotify-dark #121212 surface-elevated
→ spotify-elevated #181818 text-emphasis
→ spotify-white #FFFFFF text-muted
→ spotify-gray-light #B3B3B3 text-primary
→ spotify-white #FFFFFF text-secondary
→ spotify-gray-light #B3B3B3 text-tertiary
→ spotify-gray #535353 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Spotify Circular prose
→ body Spotify Circular wordmark
→ heading Spotify Circular Palette mode mappings (from spotify)
Light mode (14 roles)
accent
→ spotify-green accent-hover
→ spotify-green-pressed background
→ spotify-white error
→ spotify-gray primary
→ spotify-green primary-hover
→ spotify-green-pressed success
→ spotify-green surface
→ spotify-white surface-elevated
→ spotify-white text-primary
→ spotify-black text-secondary
→ spotify-gray text-tertiary
→ spotify-gray-light warning
→ spotify-green-legacy warning-hover
→ spotify-green-pressed Dark mode (14 roles)
accent
→ spotify-green accent-hover
→ spotify-green-pressed background
→ spotify-black error
→ spotify-gray-light primary
→ spotify-green primary-hover
→ spotify-green-pressed success
→ spotify-green surface
→ spotify-dark surface-elevated
→ spotify-elevated text-primary
→ spotify-white text-secondary
→ spotify-gray-light text-tertiary
→ spotify-gray warning
→ spotify-green-legacy warning-hover
→ spotify-green-pressed Rules (9 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed spotify-green, spotify-white, spotify-black forbidden spotify-green-legacy, spotify-green-pressed, spotify-gray, spotify-gray-light The Spotify wordmark renders only in Spotify Green, white, or black per the public brand assets. The legacy green is preserved for historical surfaces; the pressed green is an interactive-state value, not a wordmark fill.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, green-on-low-contrast-background The Spotify wordmark and three-arc mark have strict clearspace and color rules in the Spotify brand system. Never render the green wordmark on a background where it falls below WCAG-AA-large contrast; use the white or black variant on those surfaces.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Spotify White on Spotify Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Spotify surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Spotify Green on Spotify Black must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) breaks the affordance of the play-action and primary CTAs the brand depends on.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, validation-failure Spotify Green is reserved for the brand mark, the play affordance, and primary action. Using it for body text or for error/failure states conflicts with its established positive-action meaning.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast verification the default check on any new role pairing.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 700, 900 Spotify's editorial headlines use Spotify Circular Bold (700) or Black (900) for hero typography. Lighter cuts read as body or UI weight and compromise the editorial voice.
fontPairing typography.heading requires body minSizeRatio 1.5 Spotify's hero and section headers run materially larger than the player UI's body text. A 1.5× floor preserves the display-to-prose hierarchy the editorial voice depends on.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith roles.colors.background, roles.colors.text-primary doesNotPairWith spotify-green-legacy The signature green pairs cleanly with black canvas and white text. Combining the current green with the legacy green on the same surface creates a muddy two-green composition that reads as inconsistency.
Provenance
- Source
- https://developer.spotify.com/documentation/design
- License
Proprietary — All Rights Reserved- Attribution
- Spotify AB — Spotify, the Spotify wordmark, and the three-arc "soundwave" mark are registered trademarks of Spotify AB. Spotify Circular is licensed from Lineto. This atom captures brand-atoms' read of Spotify's publicly available developer design documentation and brand assets; it is not an official Spotify brand-guidelines document.
- Imported
2026-05-17- Notes
- Spotify's brand identity is anchored on the green-on-black pairing. The 2015 brand refresh introduced the brighter #1ED760 as the primary green while retaining #1DB954 for legacy surfaces. Both coexist; the brighter green dominates current product.