디자인 시스템
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
다운로드9
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (4)

title
SpotifyMixUITitle, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
display
SpotifyMixUI, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
SpotifyMixUI, CircularSp, 'Circular Std', 'Helvetica Neue', Helvetica, Arial, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
SFMono-Regular, Menlo, Consolas, 'Liberation Mono', ui-monospace, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (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 소스

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 소스

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 소스
누락 상태: disabled

Badge

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

html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전