Design system
web
v1.0.0
90/100

Spotify Music Player UI

@dante · Media & Consumer

Music-streaming design system with near-black canvas, Spotify Green accents, pill-and-circle geometry, dense track rows, and oversized playlist headers anchored by gradient album art.

HTML/CSS
React
shadcn/ui
Tailwind
#consumer
#dark
#green
#media
#music
Spotify Music Player UI
Downloads9
Download package
DESIGN.mdSKILL.md

Overview

Spotify Music Player UI

Principles

  • Content-first darkness. The interface lives in a near-black cocoon (#121212, #181818, #1f1f1f) so that album art, podcast covers, and gradient artwork supply all of the saturation. Every chrome surface is achromatic by design.
  • Spotify Green is functional, not decorative. The signature #1ed760 only appears on play controls, the active-state indicator, currently-playing markers, and primary CTAs. Using green for badges, dividers, or backgrounds breaks the system.
  • Pill-and-circle geometry. Buttons use 500–9999px radius (full pill); play controls use 50% radius; album art and cards sit at 4–8px. Square buttons are forbidden.
  • Uppercase, wide-tracked button labels. All button text is uppercase with 1.4–2px letter-spacing — a systematic 'label voice' distinct from content text.
  • Compact, dense type. The scale runs 10–24px. The body weight binary is 700 (bold) vs 400 (regular); 600 is used sparingly for sub-heads. This is an app, not a magazine — content density beats breathing room.
  • Heavy shadows for elevation. On dark canvases, light shadows disappear. Spotify uses rgba(0,0,0,0.5) 0px 8px 24px for dialogs and album art glow, and rgba(0,0,0,0.3) 0px 8px 8px for hover lift.

Color Discipline

The full palette is near-black greys (#121212, #181818, #1f1f1f, #252525, #272727) plus white scale (#ffffff, #fdfdfd, #cbcbcb, #b3b3b3, #7c7c7c, #4d4d4d) plus Spotify Green (#1ed760 / hover #1db954). Semantic colors — negative red #f3727f, warning orange #ffa42b, announcement blue #539df5 — appear only inline in messaging. Album art gradients mix freely; the rest of the system stays grayscale.

Typography

SpotifyMixUI / SpotifyMixUITitle (the customized CircularSp family) with extensive global-script fallbacks. Section titles 24px/700, feature heads 18px/600 line-height 1.30, body 16px/400, buttons 14px/700 uppercase tracked 1.4–2px, captions 14px/400, badges 10.5px/600 capitalize. Use weight contrast — never size — to drive hierarchy.

Layout

Fixed left sidebar + scrolling main content + persistent now-playing bar. Album / playlist grids respond 5 → 3 → 2 → 1 columns. Spacing scale on a 8px base, with a finer 1–6px sub-scale for dense rows. Page heroes (artist, album, playlist) gradient-blend from the dominant artwork hue down into the base black, anchored by an oversized title (48–96px) and metadata strip.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (18)

spotifyGreen
#1ed760
spotifyGreenBorder
#1db954
nearBlack
#121212
darkSurface
#181818
midDark
#1f1f1f
darkCard
#252525
midCard
#272727
white
#ffffff
light
#fdfdfd
nearWhite
#cbcbcb
silver
#b3b3b3
borderGray
#4d4d4d
lightBorder
#7c7c7c
lightSurface
#eeeeee
negativeRed
#f3727f
warningOrange
#ffa42b
announcementBlue
#539df5
black
#000000

Typography (4)

title
SpotifyMixUITitle, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
display
SpotifyMixUI, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
SpotifyMixUI, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
SFMono-Regular, Menlo, Consolas, 'Liberation Mono', ui-monospace, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234

Components (15)

Button

Pill-shaped buttons in three flavors: green CTA, dark fill, and outlined. Uppercase labels with wide tracking.

html
Hand-tuned CSS
1 props · 6 states · 8 tags · 2 sources

Input

Pill-shaped search field with inset border-shadow combo and white text on dark fill.

html
Hand-tuned CSS
1 props · 5 states · 4 tags · 2 sources

Card

Dark elevated card surface with album-art slot and metadata. Slight hover lift.

html
Hand-tuned CSS
1 props · 3 states · 5 tags · 2 sources
Missing states: disabled

Badge

Small capitalized tag for content-type, explicit, premium, etc.

html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Heading

Three weight-tiered headings using SpotifyMixUITitle for display and SpotifyMixUI for sub-heads.

html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Link

Muted silver inline link that brightens on hover. Underline emerges only on hover.

html
Hand-tuned CSS
1 props · 4 states · 5 tags · 2 sources
Missing states: disabled

Hero

Now-playing hero with gradient album-art glow, oversized track title, and primary green play CTA.

html
Hand-tuned CSS
0 props · 1 states · 8 tags · 2 sources
Missing states: hover, focus-visible, disabled

Nav

Vertical sidebar navigation with green logo, active item bold, inactive silver.

html
Hand-tuned CSS
0 props · 3 states · 5 tags · 2 sources
Missing states: focus-visible, disabled

Footer

Dense legal/navigation footer in muted gray on near-black, columnized link lists.

html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

Stat

Listener / monthly-stream counter in dense numeric type with silver caption.

html
Hand-tuned CSS
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

TrackRow

Dense playlist row: index, art thumb, title + artist, album, duration. Hover reveals subtle bg.

html
Hand-tuned CSS
1 props · 3 states · 10 tags · 2 sources
Missing states: focus-visible, disabled

AlbumCard

Square gradient album art tile with title and artist beneath. Hover-reveals a green play button.

html
Hand-tuned CSS
0 props · 3 states · 6 tags · 2 sources
Missing states: disabled

PlayButton

Iconic round Spotify-green play control in three sizes. The signature affordance.

html
Hand-tuned CSS
1 props · 5 states · 8 tags · 2 sources
Missing states: loading

PlaylistHeaderHero

Oversized playlist header with cover art, type eyebrow, monumental title, and creator metadata.

html
Hand-tuned CSS
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

QueueItem

Now-playing queue row: drag handle, art, title, artist, currently-playing indicator.

html
Hand-tuned CSS
0 props · 2 states · 10 tags · 2 sources
Missing states: focus-visible, disabled

DESIGN.md

Spotify Music Player UI

Principles

  • Content-first darkness. The interface lives in a near-black cocoon (#121212, #181818, #1f1f1f) so that album art, podcast covers, and gradient artwork supply all of the saturation. Every chrome surface is achromatic by design.
  • Spotify Green is functional, not decorative. The signature #1ed760 only appears on play controls, the active-state indicator, currently-playing markers, and primary CTAs. Using green for badges, dividers, or backgrounds breaks the system.
  • Pill-and-circle geometry. Buttons use 500–9999px radius (full pill); play controls use 50% radius; album art and cards sit at 4–8px. Square buttons are forbidden.
  • Uppercase, wide-tracked button labels. All button text is uppercase with 1.4–2px letter-spacing — a systematic 'label voice' distinct from content text.
  • Compact, dense type. The scale runs 10–24px. The body weight binary is 700 (bold) vs 400 (regular); 600 is used sparingly for sub-heads. This is an app, not a magazine — content density beats breathing room.
  • Heavy shadows for elevation. On dark canvases, light shadows disappear. Spotify uses rgba(0,0,0,0.5) 0px 8px 24px for dialogs and album art glow, and rgba(0,0,0,0.3) 0px 8px 8px for hover lift.

Color Discipline

The full palette is near-black greys (#121212, #181818, #1f1f1f, #252525, #272727) plus white scale (#ffffff, #fdfdfd, #cbcbcb, #b3b3b3, #7c7c7c, #4d4d4d) plus Spotify Green (#1ed760 / hover #1db954). Semantic colors — negative red #f3727f, warning orange #ffa42b, announcement blue #539df5 — appear only inline in messaging. Album art gradients mix freely; the rest of the system stays grayscale.

Typography

SpotifyMixUI / SpotifyMixUITitle (the customized CircularSp family) with extensive global-script fallbacks. Section titles 24px/700, feature heads 18px/600 line-height 1.30, body 16px/400, buttons 14px/700 uppercase tracked 1.4–2px, captions 14px/400, badges 10.5px/600 capitalize. Use weight contrast — never size — to drive hierarchy.

Layout

Fixed left sidebar + scrolling main content + persistent now-playing bar. Album / playlist grids respond 5 → 3 → 2 → 1 columns. Spacing scale on a 8px base, with a finer 1–6px sub-scale for dense rows. Page heroes (artist, album, playlist) gradient-blend from the dominant artwork hue down into the base black, anchored by an oversized title (48–96px) and metadata strip.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions