Homelabtoolkit v1

DESIGN.md

@@ -0,0 +1,39 @@
+# 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.