139 lines
6.4 KiB
Markdown
139 lines
6.4 KiB
Markdown
# 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.
|