01
Visual Theme & Atmosphere
# Design System Inspired by Spotify
Live Visual Theme Representation:
Visual Theme Example
02
Color Palette & Roles
primary
#1ed760
canvas
#121212
surface-card
#181818
surface-soft
#1f1f1f
ink
#ffffff
body
#b3b3b3
muted
#7c7c7c
hairline
#4d4d4d
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
03
Typography Rules
Dynamic Preview:
display-xl
size: 24px | weight: 700 | height: 1.2 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Section Title
body-lg
size: 18px | weight: 600 | height: 1.3 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Feature Heading
body-md
size: 16px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Body
button
size: 14px | weight: 700 | height: 1 | spacing: 1.5px
The quick brown fox jumps over the lazy dog
Use: Button Uppercase
04
Layout Principles
Grid Layout Wireframe Mockup:
Layout Grid Example
05
Depth & Elevation
Elevation Level Showcase:
Elevation Level Example
Flat Surface (Level 0)
Used for background layers, sidebar headers, or baseline borders.
Low Elevation (Level 1 / Card)
Used for floating product elements, cards, and hover states.
High Elevation (Level 2 / Popover & Dropdown)
Used for modals, select menus, code editor tooltips, and overlay headers.
Border Radius & Shape Scale:
radius-sm
4px
radius-md
6px
radius-lg
8px
radius-pill
Pill / Tag
06
Component Stylings
Interactive Component Demonstrations:
Component Interactive Example
07
Do's and Don'ts
✅ Recommended / Do
❌ Discouraged / Don't
08
Responsive Behavior
Responsive Adaptation Note:
Responsive Behavior Example
09
Agent Prompt Guide
Copyable Agent Integration Prompt:
Prompt Guide Copy Box
10
Full System Design Tokens
The parsed design tokens extracted from the core stylesheet of this design system:
| Design Token | Hex Value | System Palette Role |
|---|---|---|
| --primary | #1ed760 | System color representation for primary |
| --canvas | #121212 | System color representation for canvas |
| --surface-card | #181818 | System color representation for surface-card |
| --surface-soft | #1f1f1f | System color representation for surface-soft |
| --ink | #ffffff | System color representation for ink |
| --body | #b3b3b3 | System color representation for body |
| --muted | #7c7c7c | System color representation for muted |
| --hairline | #4d4d4d | System color representation for hairline |
| --spotify-green | #1ed760 | System color representation for spotify-green |
| --near-black | #121212 | System color representation for near-black |
| --dark-surface | #181818 | System color representation for dark-surface |
| --mid-dark | #1f1f1f | System color representation for mid-dark |
| --white | #ffffff | System color representation for white |
| --silver | #b3b3b3 | System color representation for silver |
| --negative-red | #f3727f | System color representation for negative-red |
| --warning-orange | #ffa42b | System color representation for warning-orange |
| --announcement-blue | #539df5 | System color representation for announcement-blue |