# 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

Search
Default (inset border)
Playlist Name
Focus (green ring)
Email
Error (red ring)
Description

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