Spotify
Spotify's web interface is a dark, immersive music player wrapped in a near-black cocoon (#121212, #181818) where album art becomes the primary source of color. Spotify Green (#1ed760) as singular brand accent.
Homepage Example
Color Palette (11)
Typography (6)
Components (5)
Border Radius
Design Philosophy
Overview
Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (#121212, #181818, #1f1f1f) where album art and content become the primary source of color.
The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family. Buttons use uppercase with positive letter-spacing (1.4px–2px).
Key Characteristics
- Near-black immersive dark theme — UI disappears behind content
- Spotify Green (#1ed760) as singular brand accent
- Pill buttons (500px–9999px) and circular controls (50%)
- Uppercase button labels with wide letter-spacing
- Heavy shadows on elevated elements
Do's and Don'ts
Use near-black backgrounds. Apply Spotify Green only for play controls and active states. Use pill shape for all buttons. Apply uppercase + wide letter-spacing on button labels.
Design Insights
Accessibility Considerations
Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Accessibility Considerations
Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.
Related Design Systems
Explore similar design languages from the same category:
Frequently Asked Questions
Q. What are Spotify's brand colors?
The Spotify palette uses 11 colors, led by spotify-green (#1ed760), near-black (#121212), dark-surface (#181818), mid-dark (#1f1f1f), white (#ffffff). The primary brand color is spotify-green (#1ed760).
Q. What fonts does the Spotify design system use?
Display type is set in SpotifyMixUITitle at 24px / weight 700, while body and UI text uses SpotifyMixUI at 14px / weight 600.
Q. What kind of website is Spotify?
Spotify is a Media & Consumer Tech brand. Its design system documents 11 colors, 6 type styles and a 7-step border-radius scale.
Q. What border radius values does Spotify use?
The radius scale runs from 2 (2px) to 500 (500px): 2 (2px), 4 (4px), 6 (6px), 8 (8px), 100 (100px), 500 (500px).
Q. Where can I see the Spotify design system?
This page shows Spotify's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.