# Design System — "Bold & Vivid" The site's look and feel. Everything lives in one stylesheet: **`public/assets/css/app.css`**. Build new pages from these tokens and components rather than one-off inline styles, so the brand stays consistent. ## Tokens (CSS custom properties) **Color** | Token | Value | Use | |-------|-------|-----| | `--ink` | `#0C0A12` | page ground (violet-biased near-black) | | `--ink-2` | `#100D18` | alternating section background | | `--surface` | `#191322` | cards | | `--surface-2` | `#241B31` | raised / hover / inputs | | `--line` / `--line-2` | white @ 9% / 16% | hairline borders | | `--paper` | `#F6F4FA` | primary text | | `--muted` / `--faint` | `#A29CB4` / `#6E6880` | secondary / tertiary text | | `--hot` | `#FF3D6E` | **primary accent** — hot pink-red | | `--volt` | `#ECFF4C` | **secondary accent** — acid yellow | | `--grad` | hot → orange → volt | energy moments (hero word, waveforms) | | `--good` / `--warn` | `#37D98A` / `#FFB84D` | semantic only — never as brand accent | **Type** — three deliberate roles: - `--font-display` → **Archivo Black** (self-hosted, `assets/fonts/archivo-black.woff2`). Big, uppercase, tight tracking. Used via `.display`, `h2.big`, headings. - `--font-body` → system humanist sans. Readable copy. - `--font-mono` → system monospace. All "studio data": credit costs, timecodes, tags, labels, filenames. This is a signature of the identity — keep using it for anything numeric/technical. ## Core components - **Layout:** `.wrap` (max 1140px), `.section` (vertical rhythm), `.main-narrow` (auth), `.main-wide` (dashboards). - **Buttons:** `.btn` + `.btn--hot` (primary), `.btn--volt` (accent), `.btn--ghost`; modifiers `.btn--sm`, `.btn--block`. - **Forms:** wrap each control in `.field` (mono `