rename Box to Card

2026-07-29 22:21:45 +01:00
parent 3c50d6aaf4
commit beff49a3ef
14 changed files with 210 additions and 66 deletions
--- a/ethos.md
+++ b/ethos.md
@@ -0,0 +1,138 @@
+# The VoD System — Frontend Design Reference
+
+Warm, editorial, low-key. Soft shadows instead of borders, cream surfaces, one terracotta and one olive accent. No dark-dashboard chrome.
+
+---
+
+## 1. Typography
+
+| Role | Family | Usage |
+| --- | --- | --- |
+| Display / headings | **Newsreader** (serif, weight 400) | Page titles, card headings, item titles, greeting, logo wordmark. Always regular weight — never bold. |
+| UI / body | **IBM Plex Sans** (400, 500) | Nav, labels, buttons, body copy, table cells. 500 only for the active nav item. |
+| Data / mono | **IBM Plex Mono** (400, 500) | Timecodes, stream key, ingest URL, durations, bitrates, file facts, kickers, job stages. |
+
+Fallbacks: `system-ui, sans-serif` for Plex Sans; `serif` for Newsreader; `monospace` for Plex Mono.
+
+### Type scale
+
+| Element | Size | Family | Notes |
+| --- | --- | --- | --- |
+| Greeting (dashboard h1) | 40px | Newsreader | `letter-spacing: -0.015em` |
+| Page h1 | 36px | Newsreader | -0.015em |
+| Detail title | 31px | Newsreader | -0.015em |
+| Drop-zone headline | 25px | Newsreader | |
+| Section h2 | 23px | Newsreader | |
+| Logo wordmark | 22px | Newsreader | -0.01em |
+| Card heading (in-panel) | 20–22px | Newsreader | |
+| Status headline | 27px | Newsreader | line-height 1.25 |
+| VOD tile title | 17.5–18px | Newsreader | line-height 1.3 |
+| Big metric | 21px | Plex Mono | elapsed, marker count, bitrate |
+| Range length | 15px | Plex Mono | |
+| Body paragraph | 14.5px | Plex Sans | line-height 1.65, `text-wrap: pretty`, max 62ch |
+| Primary button | 13.5–14px | Plex Sans | |
+| Field value | 13.5–14px | Plex Sans / Mono | mono for timecodes and sizes |
+| Table cell | 13.5px | Plex Sans | mono for numeric columns |
+| Clip tile title | 13.5px | Plex Sans | |
+| Meta line | 12–13px | Plex Sans | muted ink |
+| Field label | 11.5px | Plex Sans | muted ink |
+| Kicker / eyebrow | 10.5–11px | Plex Mono | `letter-spacing: 0.10–0.14em`, uppercase |
+| Ruler / tick caption | 10–10.5px | Plex Mono | |
+
+---
+
+## 2. Colour
+
+### Surfaces
+| Token | Hex | Where |
+| --- | --- | --- |
+| Canvas | `#F7F4EE` | Page background |
+| Sidebar | `#F2EEE6` | Nav column and collapsed rail |
+| Card | `#FDFBF7` | Cards, library tiles, active nav pill |
+| Field well | `#F4F0E8` | Inputs, credential wells, timeline track |
+| Muted panel | `#F1ECE3` / `#F1EDE4` | Secondary buttons, "how it works", clip-cutter panel |
+| Drop zone (idle) | `#F9F6EF` | Upload empty state |
+| Armed / selected | `#F6EFE6` | Selected marker row, filled range card |
+| Live card | `#F0EBE1` | Dashboard status block when live |
+| Player body | `#2B2620` | Video chrome, also the dark button |
+| Player stripes | `#3A342C` / `#332E27` | Placeholder frame texture |
+
+### Ink
+| Token | Hex | Where |
+| --- | --- | --- |
+| Primary | `#2B2620` | Headings, metrics |
+| Strong | `#35302A` | Field values, tile titles |
+| Body | `#554D44` | Paragraph copy |
+| Control label | `#4A423A` | Secondary button text |
+| Secondary | `#6E6559` | Supporting copy |
+| Table value | `#7A7166` | History rows |
+| Muted | `#9A9084` | Labels, meta, kickers |
+| Faint | `#A79C8E` | Mono captions, ruler ticks, hints |
+| On dark | `#FBF8F2` | Text on player / dark button |
+| On accent | `#FDFBF7` | Text on terracotta / olive |
+
+### Accents
+| Token | Hex | Where |
+| --- | --- | --- |
+| Terracotta | `#A85A38` | Logo mark, primary CTA, links, marker timecodes, playheads |
+| Terracotta hover | `#94492A` | Primary button hover |
+| Terracotta light | `#C87A52` | Progress bars, scrubber fill, selected marker ring |
+| Terracotta disabled | `#C9AE9C` | "Waiting for a file" button |
+| Olive | `#6E7A50` | Clip actions, trim in/out handles |
+| Olive hover | `#5D6843` | |
+| Olive light | `#8A9668` | Completed job bar |
+| Live red | `#B5432E` | Live dot and "LIVE NOW" label |
+
+### Lines, chips, placeholders
+| Token | Hex | Where |
+| --- | --- | --- |
+| Hairline | `#F0EBE2` | Row dividers (1px) |
+| Chip fill | `#EAE3D7`, `#EFE9DE`, `#E4DDD0` | Progress track, toggles, nav-hide button |
+| Chip hover | `#E7E0D2`, `#DAD1C0`, `#EAE4D9` | |
+| Drop-zone ring | `#E2DACB` | `inset 0 0 0 1.5px` |
+| Inactive marks | `#DED7CA`, `#C4BAA9` | Unchecked boxes, unselected ticks |
+| Zoom window outline | `#8E8577` | Overview strip frame |
+| VOD thumbnail | `#E3DACB` / `#DAD0BF` | 135° stripes, 9px |
+| Clip thumbnail | `#DFE0D2` / `#D6D8C7` | 135° stripes, 9px |
+| Avatar | `#D9C9AE` on `#5C4A32` | Google account chip |
+
+---
+
+## 3. Elevation & shape
+
+- **Card**: `0 1px 2px rgba(60,48,32,.05), 0 10px 26px -18px rgba(60,48,32,.35)`
+- **Card hover**: `0 2px 4px rgba(60,48,32,.07), 0 18px 34px -18px rgba(60,48,32,.45)`
+- **Panel (heavier)**: `0 1px 2px rgba(60,48,32,.05), 0 16px 36px -22px rgba(60,48,32,.3)`
+- **Player**: `0 1px 2px rgba(60,48,32,.08), 0 22px 46px -26px rgba(60,48,32,.5)`
+- **Terracotta button**: `0 1px 2px rgba(90,40,20,.2), 0 12px 22px -14px rgba(90,40,20,.55)`
+- **Olive button**: `0 1px 2px rgba(50,60,30,.18), 0 10px 20px -14px rgba(50,60,30,.55)`
+- **Inset ring** (used instead of borders): `inset 0 0 0 1px rgba(60,48,32,.08)`
+
+Radii: 16px hero/status blocks · 15px panels · 13px tiles · 12px thumbnails/player · 10px inputs & dark buttons · 9px buttons, nav pills, logo mark · 8px chips and fields · 5–6px overlay badges · 50% avatars and play button.
+
+Media ratios: 16/9 VOD thumbnails and player · 4/3 clip thumbnails · 16/7 upload drop zone.
+
+---
+
+## 4. Layout
+
+- Shell: `252px` sidebar + fluid main; collapsed rail is `62px`.
+- Main padding `40px 52px 72px`, content max-width `1060–1180px`.
+- Library grids: 3 columns for VODs (gap 22px), 4 for clips (gap 18–20px).
+- Detail and stream pages: content column + `330–340px` sticky side panel, gap 26px.
+- Spacing rhythm: 26–34px between sections, 14–20px inside cards, 6–10px label-to-field. Always flex/grid with `gap`.
+
+---
+
+## 5. Motion & state
+
+- `livePulse` — 2.2s ease-in-out infinite opacity/scale pulse, live dot only. Nothing else animates decoratively.
+- Hover: background shifts one step darker within the same family; cards deepen their shadow. No transforms.
+- Selection: `#F6EFE6` fill plus a `1.5px` terracotta inset ring.
+- Progress is always a bar with a stage word and remaining time (`queued → reading source → encoding → writing file → complete`) — never a spinner.
+
+---
+
+## 6. Copy tone
+
+Lowercase mono for machine facts, sentence case for everything else. Personal and specific ("Cat walks across the patch bay"), never marketing voice. Durations as `h:mm:ss`, timecodes as `hh:mm:ss`, sizes in MB/GB.