styles
← 갤러리

Spotify Dark

짙은 어둠 위에 시그니처 그린(#1DB954)이 빛나는 뮤직 스트리밍의 아이코닉 다크 UI — 카드 기반 레이아웃과 라운드 엘리먼트가 특징이다.

cinematic-dark dark-nativemusic-streamingcard-gridpill-buttonsgreen-accentmedia-playercontent-browsing
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

스포티파이 웹 플레이어에서 추출한 다크 네이티브 미디어 인터페이스. 거의 검정(#121212)을 기반으로 카드(#181818·#282828)가 계층을 만들고, 시그니처 그린(#1DB954)이 CTA와 활성 상태를 담당한다. 본문은 #FFFFFF와 #B3B3B3의 2단 밝기 위계. 라운드한 반경(pill 버튼, 8px 카드)과 세밀한 호버 밝기 변화가 콘텐츠 탐색에 최적화되어 있다. 라이트 모드는 같은 그린을 유지한 화이트 카운터파트를 합성했다.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

Circular is Spotify's proprietary typeface. Google Fonts fallback: Inter. Tight tracking on headlines.

골든 예제 (exemplar)

Music for everyone

Millions of songs. No credit card needed.

Get Spotify Free

Trending now

Today's Top Hits

The biggest songs right now

Discover Weekly

Your weekly mixtape

Release Radar

New music from artists you follow

Do

  • Use near-black (#121212) as base, build hierarchy with slightly lighter dark surfaces
  • Keep the signature green for primary actions only — don't overuse
  • Use pill-shaped buttons for CTAs
  • Implement card hover effects with subtle brightness increase
  • Use a sidebar navigation pattern

Don't

  • Don't use green for background areas — keep it for accent touches
  • Don't use visible borders between cards — use space and bg color steps
  • Don't use thin/light font weights for headings — keep bold and punchy
  • Don't forget the 2-level text hierarchy (white for primary, grey for secondary)

컴포넌트 노트

button
Pill-shaped (border-radius: 500px), bold weight, green primary or white outline. Hover brightens.
card
Rounded rectangle (8px), dark surface (#181818), subtle hover lift/brighten to #282828. Cover art is square with slight radius.
input
Rounded search bar, light placeholder on dark bg, pill-shaped.
nav
Left sidebar with icon+label list items. Active = white text, inactive = #B3B3B3.