darkmusic-focusedgreenimmersive
Spotify Colors & Fonts
What colors and fonts does Spotify use? Music streaming service. Green accents, dark theme, music-focused.
Spotify Color Palette
Primary: #1DB954
Primary
#1DB954Brand, play buttons
Background
#121212Main background
Surface
#181818Cards, player
Surface Light
#282828Hover states
Border
#282828Dividers
Text Primary
#FFFFFFTrack names
Text Secondary
#B3B3B3Artist names
What Font Does Spotify Use?
Spotify uses Circular and Circular
Headings
Circular
700custom
Body Text
Circular
400custom
Code
SF Mono
400system
Spacing & Radius
Spacing Scale
Base: 4px
48162432486496
Border Radius
Small
4pxMedium
8pxLarge
12pxSpotify Tailwind Config
Copy this config to your project
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': '#1DB954',
'background': '#121212',
'surface': '#181818',
'surface-light': '#282828',
'border': '#282828',
'text-primary': '#FFFFFF',
'text-secondary': '#B3B3B3',
},
fontFamily: {
'heading': ['Circular', 'sans-serif'],
'body': ['Circular', 'sans-serif'],
'mono': ['SF Mono', 'sans-serif'],
},
},
},
}Extract Spotify's Full Design
Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.
Get PromptUI — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15