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.

6.4 KiB Raw Blame History Unescape Escape