Design System Inspired by Spotify

A design token catalog generated from DESIGN.md. Every color, font, and component — visualized in the dark.

Get Spotify Free Learn More
01 / Colors

Color Palette

Brand
Spotify Green
#1ed760
Brand accent
Near Black
#121212
Page background
Surface
#181818
Cards, containers
Mid Dark
#1f1f1f
Buttons, inputs
Text & Semantic
White
#ffffff
Primary text
Silver
#b3b3b3
Secondary text
Negative
#f3727f
Error states
Warning
#ffa42b
Warning states
Announcement
#539df5
Info states
02 / Typography

Typography Scale

Section Title — Your Playlists
Title — 24px / 700 / SpotifyMixUITitle
Feature Heading
Feature — 18px / 600 / 1.30
Body Bold — Liked Songs
Body Bold — 16px / 700
Caption — 3 min 42 sec
Caption — 14px / 400
SHUFFLE PLAY
Button Uppercase — 14px / 700 / uppercase / +1.4px
Small Bold — 1,234 songs
Small Bold — 12px / 700
Badge
Badge — 10.5px / 600 / capitalize
03 / Buttons

Button Variants

Shuffle Play
Green Pill
Browse
Dark Pill
Follow
Outlined
▶
Play Circle
04 / Cards

Card Examples

Discover Weekly

Your personal playlist, updated every Monday.

Release Radar

New releases from artists you follow. Elevated shadow.

Daily Mix 1

Made for you based on your listening.

Liked Songs

Your saved songs collection.

05 / Forms

Form Elements

Default (inset border)
Focus (green ring)
Error (red ring)
06 / Spacing

Spacing Scale

4
8
12
16
20
07 / Radius

Border Radius

2px
6px
8px
500px
50%
08 / Elevation

Depth

Base
#121212 background
Surface
#1f1f1f
Elevated
0.3 opacity 8px
Dialog
0.5 opacity 24px