# DESIGN.md — EmbyToolkit

Register: **product** (a self-hosted tool UI that serves the task, not a marketing surface).

Theme scene: a self-hoster glances at their Emby cover-art toolkit late evening in a
dim home office on a wide monitor, wanting it to feel like the polished *arr-suite
dashboards (Sonarr / Radarr / Tracearr) they keep open all day. → dark, near-black.

Design language is modeled on the **Tracearr** dashboard:

## Color
OKLCH-authored, cool-tinted neutrals, single vivid cyan accent (Restrained strategy,
accent ≤10% of surface). Never `#000`/`#fff`.

- Canvas: near-black, faint cyan top-glow, otherwise flat.
- Accent: vivid cyan `#36d6e0`. Used for the brand chip, active nav, focus rings, links.
- Status: green (success / connected / "watched"), amber ("sampled"), red ("abandoned").

Tokens live in `static/app-theme.css` (`:root:root` so they override each page's legacy
inline `:root`). Component names the pages already use (`--bg`, `--surface`, `--accent`,
`--text*`, `--border`, `--r`) are preserved so legacy `var()` calls recolor for free.

## Typography
Inter. Page titles 28px / 700 / -0.02em. Body 14px, muted, capped ~70ch. Numeric
fields use tabular-nums.

## Sidebar (signature)
Bright cyan rounded logo chip, brand name, an "Emby" connection status chip, flat nav
with a small inset cyan indicator pill on the active item (never a side-stripe border),
and a footer with social icons + version line.

## Components
Segmented date/filter pills, ghost dropdown buttons, rounded surface toolbars/panels,
clean tables (uppercase 11px headers, hover rows), status badges, trust pills, thin
progress bars, stat cards (icon chip + big number + label).

## Bans (house rules)
No side-stripe accent borders, no gradient text, no decorative glassmorphism, no fake
dead controls (no theme toggle on a dark-only app), no em dashes in UI copy.