1.8 KiB
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.