# Spotify Dark

짙은 어둠 위에 시그니처 그린(#1DB954)이 빛나는 뮤직 스트리밍의 아이코닉 다크 UI — 카드 기반 레이아웃과 라운드 엘리먼트가 특징이다.

- taxonomy: cinematic-dark · dark-native, music-streaming, card-grid, pill-buttons, green-accent, media-player, content-browsing · complexity=medium
- page types: app, dashboard
- best for: 뮤직·미디어 스트리밍 앱, 콘텐츠 브라우징 대시보드, 다크 네이티브 엔터테인먼트 플랫폼, 카드 그리드 레이아웃
- avoid for: 밝고 가벼운 이커머스 사이트, 따뜻한 에디토리얼 매거진, 기업 공식 문서 사이트, 미니멀 포트폴리오
- provenance: website (Spotify – Web Player: Music for everyone) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, dark=computed-css, light=vision-inferred

## Design rules

# 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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Spotify Dark — theme.css (generated, do not edit) */
:root {
  --radius: 8px;
  --radius-selector: 4px;
  --radius-field: 500px;
  --font-sans: Circular, Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-mono: monospace;
  --spacing: 8px;
  --shadow: 0px 4px 8px 0px color-mix(in oklab, oklch(0 0 0) 30%, transparent);
  --ks-display-weight: 700;
  --ks-display-tracking: -0.02em;
  --background: oklch(0.985 0.000 0);
  --foreground: oklch(0.182 0.000 0);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.182 0.000 0);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.182 0.000 0);
  --primary: oklch(0.582 0.169 155.2);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.949 0.000 0);
  --secondary-foreground: oklch(0.321 0.000 0);
  --muted: oklch(0.949 0.000 0);
  --muted-foreground: oklch(0.569 0.005 17.3);
  --accent: oklch(0.582 0.169 155.2);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.900 0.000 0);
  --input: oklch(0.900 0.000 0);
  --ring: oklch(0.582 0.169 155.2);
}

.dark {
  --background: oklch(0.182 0.000 0);
  --foreground: oklch(1.000 0.000 0);
  --card: oklch(0.220 0.000 0);
  --card-foreground: oklch(1.000 0.000 0);
  --popover: oklch(0.250 0.000 0);
  --popover-foreground: oklch(1.000 0.000 0);
  --primary: oklch(0.582 0.169 155.2);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.321 0.000 0);
  --secondary-foreground: oklch(0.767 0.000 0);
  --muted: oklch(0.321 0.000 0);
  --muted-foreground: oklch(0.767 0.000 0);
  --accent: oklch(0.582 0.169 155.2);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.321 0.000 0);
  --input: oklch(0.321 0.000 0);
  --ring: oklch(0.582 0.169 155.2);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section class="hero" style="background: var(--background); color: var(--foreground); padding: 4rem 2rem; text-align: center;">
  <h1 style="font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 0.5rem;">Music for everyone</h1>
  <p style="color: var(--muted-foreground); font-size: 1rem; margin-bottom: 2rem;">Millions of songs. No credit card needed.</p>
  <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.875rem 2rem; border-radius: 500px; font-weight: 700; font-size: 1rem; text-decoration: none;">Get Spotify Free</a>
</section>

<section style="background: var(--background); padding: 2rem;">
  <h2 style="color: var(--foreground); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;">Trending now</h2>
  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem;">
    <div style="background: var(--card); border-radius: 8px; padding: 1rem; transition: background 0.2s;">
      <div style="width: 100%; aspect-ratio: 1; background: var(--muted); border-radius: 4px; margin-bottom: 0.75rem;"></div>
      <p style="color: var(--card-foreground); font-weight: 700; font-size: 0.875rem; margin: 0 0 0.25rem;">Today's Top Hits</p>
      <p style="color: var(--muted-foreground); font-size: 0.6875rem; margin: 0;">The biggest songs right now</p>
    </div>
    <div style="background: var(--card); border-radius: 8px; padding: 1rem; transition: background 0.2s;">
      <div style="width: 100%; aspect-ratio: 1; background: var(--accent); border-radius: 4px; margin-bottom: 0.75rem;"></div>
      <p style="color: var(--card-foreground); font-weight: 700; font-size: 0.875rem; margin: 0 0 0.25rem;">Discover Weekly</p>
      <p style="color: var(--muted-foreground); font-size: 0.6875rem; margin: 0;">Your weekly mixtape</p>
    </div>
    <div style="background: var(--card); border-radius: 8px; padding: 1rem; transition: background 0.2s;">
      <div style="width: 100%; aspect-ratio: 1; background: var(--secondary); border-radius: 4px; margin-bottom: 0.75rem;"></div>
      <p style="color: var(--card-foreground); font-weight: 700; font-size: 0.875rem; margin: 0 0 0.25rem;">Release Radar</p>
      <p style="color: var(--muted-foreground); font-size: 0.6875rem; margin: 0;">New music from artists you follow</p>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/spotify.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.