# Spotify Dark — Design Specification

## Overview

Spotify's dark-native interface defines the modern music streaming aesthetic. Built on a near-black canvas (#121212), it uses subtle background-color stepping (#181818 → #282828) to create depth without borders. The signature Spotify Green (#1DB954) appears sparingly as a vibrant accent for CTAs and active states, while the text hierarchy relies on white (#FFFFFF) vs. mid-grey (#B3B3B3) contrast.

## Color Architecture

### Dark Mode (Canonical)
- **Canvas**: oklch(0.182 0 0) — near-black, not pure black, easier on eyes
- **Card surfaces**: oklch(0.220 0 0) → oklch(0.321 0 0) on hover — subtle brightness steps
- **Primary text**: white — high contrast for readability
- **Secondary text**: oklch(0.767 0 0) — grey for metadata, timestamps, subtitles
- **Accent**: oklch(0.582 0.169 155.2) — Spotify Green, used only for primary CTAs, progress bars, active states

### Light Mode (Synthesized)
Inverted palette maintaining the same green accent. White canvas with dark text, light grey card surfaces.

### Color Roles
| Role | Purpose |
|------|---------|
| Primary (green) | Play buttons, CTAs, active nav items, progress bars |
| Background steps | Layer depth without borders — base → card → popover |
| Destructive (red) | Error states only |

## Typography

Spotify uses **Circular** (proprietary). Fallback: **Inter** (Google Fonts).

### Type Scale
| Step | Size | Weight | Tracking |
|------|------|--------|----------|
| Hero | 3rem | 900 (Black) | -0.04em |
| H1 | 2rem | 700 | -0.02em |
| H2 | 1.5rem | 700 | — |
| Body | 0.875rem | 400 | — |
| Caption | 0.6875rem | 400 | — |

Bold, punchy headlines with negative tracking. Body is notably small (14px) to maximize content density.

## Spacing & Layout

- **Density**: Compact — optimized for content browsing
- **Grid**: Auto-fill CSS Grid, minimum 180px column width
- **Pattern**: Scrollable horizontal rows of cards, grouped by section headings
- **Sidebar**: Fixed left nav with icon+label items

## Radius

- **Cards**: 8px — smooth but not overly round
- **Buttons**: 500px (pill) — signature Spotify button shape
- **Inputs**: 500px (pill search bar)

## Borders & Shadows

Almost no visible borders. Hierarchy is built entirely through background color steps. Shadows appear only on hover (subtle 4px blur drop shadow).

## Motion

- Quick, responsive transitions (100–300ms)
- Card hover: subtle brightness increase
- Color transitions on interactive elements
- Ease: cubic-bezier(0.3, 0, 0, 1)

## Agent Prompt Guide

> Create a dark-native interface inspired by music streaming UIs. Use near-black (#121212) as the canvas with card surfaces stepping up in brightness on hover. Accent is vibrant green used sparingly. Pill-shaped buttons. Compact card grid with sidebar navigation. Bold headlines, small body text.

## Known Gaps

- Circular font is proprietary — substituted with Inter
- Light mode is fully synthesized (Spotify has no official light web player)
- Animation keyframes and custom gradients are approximated