A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
18tokens
7type steps
0radius steps
4pxspacing base
Spotify, in one page
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 design philosophy is "content-first darkness" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (#1ed760) and the album artwork itself.
The typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.
What distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (rgba(0,0,0,0.5) 0px 8px 24px) on elevated elements and a unique inset border-shadow combo (rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.
Key Characteristics:
- Near-black immersive dark theme (
#121212–#1f1f1f) — UI disappears behind content - Spotify Green (
#1ed760) as singular brand accent — never decorative, always functional - SpotifyMixUI/CircularSp font family with global script support
- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized
- Uppercase button labels with wide letter-spacing (1.4px–2px)
- Heavy shadows on elevated elements (
rgba(0,0,0,0.5) 0px 8px 24px) - Semantic colors: negative red (
#f3727f), warning orange (#ffa42b), announcement blue (#539df5) - Album art as the primary color source — the UI is achromatic by design
Do's and don'ts
Do
- Use near-black backgrounds (
#121212–#1f1f1f) — depth through shade variation - Apply Spotify Green (
#1ed760) only for play controls, active states, and primary CTAs - Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
- Keep typography compact (10px–24px range) — this is an app, not a magazine
- Use heavy shadows (
0.3–0.5 opacity) for elevated elements on dark backgrounds - Let album art provide color — the UI itself is achromatic
Don't
- Don't use Spotify Green decoratively or on backgrounds — it's functional only
- Don't use light backgrounds for primary surfaces — the dark immersion is core
- Don't skip the pill/circle geometry on buttons — square buttons break the identity
- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
- Don't add additional brand colors — green + achromatic grays is the complete palette
- Don't use relaxed line-heights — Spotify's typography is compact and dense
- Don't expose raw gray borders — use shadow-based or inset borders instead
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Spotify design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Spotify Green: #1ed760
- Near Black: #121212
- Dark Surface: #181818
- Mid Dark: #1f1f1f
- White: #ffffff
- Silver: #b3b3b3
- Near White: #cbcbcb
- Light: #fdfdfd
- Negative Red: #f3727f
- Warning Orange: #ffa42b
Type:
- families: SpotifyMixUITitle, SpotifyMixUI, Navigation, Metadata
- scale: 10, 10.5, 12, 14, 16, 18, 24
- weights: 400, 600, 700
Shape:
- elevation: Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated | Don't expose raw gray borders — use shadow-based or inset borders instead
Spacing: 4, 8, 12
Rules:
- Use near-black backgrounds (`#121212`–`#1f1f1f`) — depth through shade variation
- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs
- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls
- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels
- Keep typography compact (10px–24px range) — this is an app, not a magazine
- Use heavy shadows (`0.3–0.5 opacity`) for elevated elements on dark backgrounds
Avoid:
- Don't use Spotify Green decoratively or on backgrounds — it's functional only
- Don't use light backgrounds for primary surfaces — the dark immersion is core
- Don't skip the pill/circle geometry on buttons — square buttons break the identity
- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible
- Don't add additional brand colors — green + achromatic grays is the complete palette
- Don't use relaxed line-heights — Spotify's typography is compact and dense
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary Brand
- Spotify Green (
#1ed760): Primary brand accent — play buttons, active states, CTAs - Near Black (
#121212): Deepest background surface - Dark Surface (
#181818): Cards, containers, elevated surfaces - Mid Dark (
#1f1f1f): Button backgrounds, interactive surfaces
Text
- White (
#ffffff):--text-base, primary text - Silver (
#b3b3b3): Secondary text, muted labels, inactive nav - Near White (
#cbcbcb): Slightly brighter secondary text - Light (
#fdfdfd): Near-pure white for maximum emphasis
Semantic
- Negative Red (
#f3727f):--text-negative, error states - Warning Orange (
#ffa42b):--text-warning, warning states - Announcement Blue (
#539df5):--text-announcement, info states
Surface & Border
- Dark Card (
#252525): Elevated card surface - Mid Card (
#272727): Alternate card surface - Border Gray (
#4d4d4d): Button borders on dark - Light Border (
#7c7c7c): Outlined button borders, muted links - Separator (
#b3b3b3): Divider lines - Light Surface (
#eeeeee): Light-mode buttons (rare) - Spotify Green Border (
#1db954): Green accent border variant
Shadows
- Heavy (
rgba(0,0,0,0.5) 0px 8px 24px): Dialogs, menus, elevated panels - Medium (
rgba(0,0,0,0.3) 0px 8px 8px): Cards, dropdowns - Inset Border (
rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset): Input border-shadow combo
Type scaleRead the full spec
Font Families
- Title:
SpotifyMixUITitle, fallbacks:CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic - UI / Body:
SpotifyMixUI, same fallback stack
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |
| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |
| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |
| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |
| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | text-transform: uppercase |
| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |
| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |
| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |
| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |
| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |
| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |
| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |
| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | text-transform: capitalize |
| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |
Principles
- Bold/regular binary: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.
- Uppercase buttons as system: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic "label" voice distinct from content text.
- Compact sizing: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.
- Global script support: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.
Components and layoutRead the full spec
Buttons
Dark Pill
- Background:
#1f1f1f - Text:
#ffffffor#b3b3b3 - Padding: 8px 16px
- Radius: 9999px (full pill)
- Use: Navigation pills, secondary actions
Dark Large Pill
- Background:
#181818 - Text:
#ffffff - Padding: 0px 43px
- Radius: 500px
- Use: Primary app navigation buttons
Light Pill
- Background:
#eeeeee - Text:
#181818 - Radius: 500px
- Use: Light-mode CTAs (cookie consent, marketing)
Outlined Pill
- Background: transparent
- Text:
#ffffff - Border:
1px solid #7c7c7c - Padding: 4px 16px 4px 36px (asymmetric for icon)
- Radius: 9999px
- Use: Follow buttons, secondary actions
Circular Play
- Background:
#1f1f1f - Text:
#ffffff - Padding: 12px
- Radius: 50% (circle)
- Use: Play/pause controls
Cards & Containers
- Background:
#181818or#1f1f1f - Radius: 6px–8px
- No visible borders on most cards
- Hover: slight background lightening
- Shadow:
rgba(0,0,0,0.3) 0px 8px 8pxon elevated
Inputs
- Search input:
#1f1f1fbackground,#fffffftext - Radius: 500px (pill)
- Padding: 12px 96px 12px 48px (icon-aware)
- Focus: border becomes
#000000, outline1px solid
Navigation
- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive
#b3b3b3muted color for inactive items,#fffffffor active- Circular icon buttons (50% radius)
- Spotify logo top-left in green
Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
Grid & Container
- Sidebar (fixed) + main content area
- Grid-based album/playlist cards
- Full-width now-playing bar at bottom
- Responsive content area fills remaining space
Whitespace Philosophy
- Dark compression: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.
- Content density over breathing room: This is an app, not a marketing site. Every pixel serves the listening experience.
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Compact mobile layout |
| Mobile | 425–576px | Standard mobile |
| Tablet | 576–768px | 2-column grid |
| Tablet Large | 768–896px | Expanded layout |
| Desktop Small | 896–1024px | Sidebar visible |
| Desktop | 1024–1280px | Full desktop layout |
| Large Desktop | >1280px | Expanded grid |
Collapsing Strategy
- Sidebar: full → collapsed → hidden
- Album grid: 5 columns → 3 → 2 → 1
- Now-playing bar: maintained at all sizes
- Search: pill input maintained, width adjusts
- Navigation: sidebar → bottom bar on mobile
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-spotify {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #9e5900;
--link-hover-color: #6b3c00;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #ffa42b;
--button-text-color: #000000;
--button-hover-bg: #f78d00;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/spotify/DESIGN.md· 12.5 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.