Spotify Design System

---
name: Spotify
url: https://spotify.com
version: 1.9.0
tokens:
  colors:
    primary: "#1db954"
    primary-hover: "#1ed760"
    background: "#121212"
    surface: "#181818"
    surface-hover: "#282828"
    text-primary: "#ffffff"
    text-secondary: "#b3b3b3"
  typography:
    font-sans: "Circular, Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    scale:
      - { name: display, size: "96px", weight: 900, lineHeight: 1.0 }
      - { name: body, size: "16px", weight: 400, lineHeight: 1.5 }
  spacing:
    base: "8px"
    scale:
      space-2: "8px"
      space-4: "16px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    full: "50%"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
---

# Spotify — Design System Specification

## 1. Overview
Immersive music streaming visual architecture centered on high-contrast neon green (`#1db954`) playback controls against pure dark surfaces (`#121212`).

## 2. Color System
- Spotify Green: `#1db954`
- Dark Canvas: `#121212`
- Surface: `#181818`

## 3. Typography Scale
- Display: 96px / Weight 900 / Circular
- Body: 16px / Weight 400 / Circular

## 4. Button Variants
- Play Button: `background: #1db954`, `color: #000000`, `border-radius: 50%`

## 5. Card Examples
- Album Card: `background: #181818`, `border-radius: 8px`

## 6. Form Elements
- Search Bar: `background: #242424`, `border-radius: 500px`

## 7. Spacing Scale
- 4px, 8px, 16px, 24px, 32px, 48px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `full: 50%`

## 9. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`