# Design System: spotify.com

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** light · vibrant · rounded · Light theme

**Design rhythm:** 4px grid · flat (no shadows)

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Primary  | `#0000EE` | CTAs, primary actions, links |
| Accent   | `#0000BE` | Highlights, success states, decorative |
| Surface  | `#FFFFFF` | Main page background |
| Elevated | `#A7A7A7` | Cards, raised containers |
| Text     | `#000000` | Body and heading text |
| Muted    | `#919496` | Secondary text, captions |
| Border   | `#7F7F7F` | Dividers, borders |

## 3. Typography

- **H1** — SpotifyMixUI 48px / weight 900, line-height 1, tracking -0.72px
- **H2** — SpotifyMixUI 16px / weight 400, line-height 1.38
- **H3** — SpotifyMixUI 24px / weight 400, line-height 1.25
- **Body** — SpotifyMixUI 12px / weight 400
- **Scale:** 48px / 32px / 16px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16,20,24,32
- **Border radius:** pill buttons, 50px inputs

## 6. Component Specs

### Button
- #0000EE bg
- #0000EE text
- 9999px radius
- 700 weight

### Card
- white bg
- 1px subtle border
- 12px radius
- 24px padding

### Input
- #FFFFFF bg
- 1px solid #707070
- 50px radius
- 6px 35px 6px 15px padding

### Link
- #D9DADC

## 7. Implementation Rules

**DO:**
- Use `#0000EE` for all primary CTAs and interactive accents
- Reserve `#0000BE` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16,20,24,32) — don't introduce arbitrary values
- Match the radius vocabulary: pill buttons, 50px inputs
- Pair SpotifyMixUI 700 headings with SpotifyMixUI 16px 400
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: spotify.com · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*