Quick Answer

Spotify is a brand design system known for its distinctive visual language. The design uses signature brand colors as primary color. It is built on a clean dark canvas with strong typographic hierarchy. Full design tokens, color palette, and component library are documented on this page.

Spotify

Spotify's web interface is a dark, immersive music player wrapped in a near-black cocoon (#121212, #181818) where album art becomes the primary source of color. Spotify Green (#1ed760) as singular brand accent.

Homepage Example

Spotify
HomeSearchLibrary
Playlist 1
Playlist 2
Playlist 3
Play
© Spotify

Color Palette (11)

spotify-green#1ed760
near-black#121212
dark-surface#181818
mid-dark#1f1f1f
white#ffffff
silver#b3b3b3
negative-red#f3727f
warning-orange#ffa42b
announcement-blue#539df5
border-gray#4d4d4d
light-border#7c7c7c

Typography (6)

section-title
section-title24px · weight 700
feature-heading
feature-heading18px · weight 600
body
body16px · weight 400
button-uppercase
button-uppercase14px · weight 600
nav-link
nav-link14px · weight 700
caption
caption14px · weight 400

Components (5)

button-dark-pill
button-dark-pill
button-light-pill
button-light-pill
button-outlined-pill
button-outlined-pill
button-circular-play
button-circular-play
search-input
search-input

Border Radius

2 (2px)
4 (4px)
6 (6px)
8 (8px)
100 (100px)
500 (500px)
pill (9999px)

Design Philosophy

Overview

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 typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family. Buttons use uppercase with positive letter-spacing (1.4px–2px).

Key Characteristics

  • Near-black immersive dark theme — UI disappears behind content
  • Spotify Green (#1ed760) as singular brand accent
  • Pill buttons (500px–9999px) and circular controls (50%)
  • Uppercase button labels with wide letter-spacing
  • Heavy shadows on elevated elements

Do's and Don'ts

Use near-black backgrounds. Apply Spotify Green only for play controls and active states. Use pill shape for all buttons. Apply uppercase + wide letter-spacing on button labels.

개요

Spotify의 웹 인터페이스는 청취자를 검은색에 가까운 고치(#121212, #181818, #1f1f1f)로 감싸는 어둡고 몰입도 높은 음악 플레이어로, 앨범 아트와 콘텐츠가 주요 색상 소스가 됩니다.

서체는 CircularSp 제품군의 독점 글꼴인 SpotifyMixUI 및 SpotifyMixUITitle을 사용합니다. 버튼은 양수 간격(1.4px-2px)의 대문자를 사용합니다.

주요 특징

  • 검은색에 가까운 몰입형 어두운 테마 — UI가 콘텐츠 뒤에서 사라짐
  • 스포티파이 그린(#1ed760)을 독특한 브랜드 액센트로 사용
  • 알약 버튼(500px~9999px) 및 원형 컨트롤(50%)
  • 글자 간격이 넓은 대문자 버튼 라벨
  • 높은 요소의 무거운 그림자

해야 할 일과 하지 말아야 할 일

검은색에 가까운 배경을 사용하세요. 재생 컨트롤 및 활성 상태에만 Spotify Green을 적용합니다. 모든 버튼에 알약 모양을 사용합니다. 버튼 라벨에 대문자 + 넓은 문자 간격을 적용합니다.

概要

Spotify の Web インターフェイスは、アルバム アートとコンテンツが色の主なソースとなる、黒に近い繭 (#121212、__HEXCODE_2___、__HEXCODE_3___) でリスナーを包み込む、ダークで没入型の音楽プレーヤーです。

タイポグラフィには、CircularSp ファミリーの独自フォントである SpotifyMixUI と SpotifyMixUITitle が使用されています。ボタンは、正の文字間隔 (1.4px ～ 2px) で大文字を使用します。

主な特徴

  • 黒に近い没入型のダーク テーマ — UI がコンテンツの背後に隠れます
  • 特異なブランド アクセントとしての Spotify グリーン (#1ed760)
  • ピル ボタン (500px ～ 9999px) および円形コントロール (50%)
  • 文字間隔が広い大文字のボタン ラベル
  • 高い要素に濃い影

推奨事項と禁止事項

黒に近い背景を使用します。 Spotify Green は、再生コントロールとアクティブ状態にのみ適用されます。すべてのボタンに錠剤の形状を使用します。ボタンのラベルに大文字と広い文字間隔を適用します。

Design Insights

Accessibility Considerations

Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Spotify's color system, anchored by #121212, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

· About · Contact