40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
# 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.
|