rename Box to Card

ethos.md

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