Color tokens
Dark mode is default for LGL-OS apps. Violet is identity, not decoration. Status colors are reserved for live, pending, and failure — never decorative.
Dark
Surfaces
App stacks five surface layers from bg-deep at the bottom to bg-elevated at the top.
Surfaces
App base
#141418
Page background
Panel
#1E1E2A
Cards, sidebars
Raised
#282838
Borders, hover
Elevated
#323244
Dropdowns, modals
Text hierarchy
Primary
#EEEEF2
Headings, active
Secondary
#8E8E9F
Body copy
Muted
#555566
Timestamps
Identity & status
Violet
#8B5CF6
Identity, primary
Live
#10B981
Healthy, recording
Warning
#F59E0B
Pending, congested
Error
#EF4444
Failure, dropped
Light
Surfaces
Light mode keeps the same five-layer stack, inverted. Used for marketing, docs, daytime admin.
Surfaces
Cloud base
#FAFAFA
Page background
Panel white
#FFFFFF
Cards, surfaces
Divider
#E5E5EA
Borders, hover
Raised
#F1F1F4
Subtle fills
Text hierarchy
Primary
#141418
Headings, active
Secondary
#55556A
Body copy
Muted
#9898A8
Timestamps
Identity & status
Violet
#8B5CF6
Identity, primary
Live
#059669
Healthy, recording
Warning
#D97706
Pending, congested
Error
#DC2626
Failure, dropped
Typography scale
Inter for UI, JetBrains Mono for timecodes and technical values. Tabular numerals for anything that updates in place.
Dark
Inter — UI
Interface text: headings, body, labels.
Display
36 · 600 · -0.8
One timeline. Every source.
H1
24 · 600
Continuous recording
H2
18 · 600
Ingest sources
Body
13 · 400
Vault records continuously across active streams. If the stream is live, the file is growing.
Caps
10 · 500 · 1.2
Section label
JetBrains Mono — Technical
Timecodes, endpoints, channel numbers, log output.
Timecode
18 · 500
01:14:32:18
Readout
11 · 400
srt://ingest-01.lgl.live:9000 · 12.4 Mbps · 180ms
Caps
9 · 600 · 1.5
PROGRAM · PREVIEW · STANDBY
Light
Inter — UI
Interface text: headings, body, labels.
Display
36 · 600 · -0.8
One timeline. Every source.
H1
24 · 600
Continuous recording
H2
18 · 600
Ingest sources
Body
13 · 400
Vault records continuously across active streams. If the stream is live, the file is growing.
Caps
10 · 500 · 1.2
Section label
JetBrains Mono — Technical
Timecodes, endpoints, channel numbers, log output.
Timecode
18 · 500
01:14:32:18
Readout
11 · 400
srt://ingest-01.lgl.live:9000 · 12.4 Mbps · 180ms
Caps
9 · 600 · 1.5
PROGRAM · PREVIEW · STANDBY
Form inputs
Square corners, 1px borders, violet focus ring. Labels above inputs, helper text below. No placeholder-as-label.
Dark
Text fields
Source name
Visible in multiviewer tiles
Endpoint
srt://ingest-01.lgl.live:9000
Focused state
Bitrate
28.4 Mbps
Exceeds max (25 Mbps)
Disabled
—
Read-only
Toggle, check, radio
Auto-reconnect on drop
Encrypt stream
Record to Vault
3 of 9 selected
ProRes 422 HQ
H.264
Slider
Output bitrate · 8.0 Mbps
Audio level · −12 dB
Light
Text fields
Source name
Visible in multiviewer tiles
Endpoint
srt://ingest-01.lgl.live:9000
Focused state
Bitrate
28.4 Mbps
Exceeds max (25 Mbps)
Disabled
—
Read-only
Toggle, check, radio
Auto-reconnect on drop
Encrypt stream
Record to Vault
3 of 9 selected
ProRes 422 HQ
H.264
Slider
Output bitrate · 8.0 Mbps
Audio level · −12 dB
Tabs & segmented
Underline tabs for major views. Segmented for exclusive options. Pills for filters.
Dark
Underline tabs
Source
Audio
Output
Logs
Segmented
Live
Queue
Archive
1h
6h
24h
7d
Pills
All sources
Cameras
Graphics
Remote
Light
Underline tabs
Source
Audio
Output
Logs
Segmented
Live
Queue
Archive
1h
6h
24h
7d
Pills
All sources
Cameras
Graphics
Remote
Cards, tiles & rows
Three surface primitives, picked by content shape — not by looks. Square corners always; subsystem accent on the left border of a Card.
Selection rules
- Card — a single bordered section with its own heading. One per logical block (Firmware state, Update policy, Connectivity). If you're repeating it in a list, it's the wrong primitive.
- Tile — a repeating cell in a list or grid (per-node row, per-pair row, stat tile, metric card). Always borderless with
surface="raised"; separation comes from background brightness, not stacked borders. - Row — a dense list item inside a parent Card or Tile. Touch-friendly (≥44px, 56px on coarse pointers). Use when rows share a single outer frame; use Tile when each item is its own block.
Dark
Panel with header
INGEST
Panels have a left accent for subsystem color-coding. Header always includes a status readout.
List rows
CAM-01 Wide
CAM-02 Host
GFX-02 Insert
REMOTE-02
Tile grid — borderless repeating cells
CAM-01 Wide
12.4 Mbps
CAM-02 Host
12.1 Mbps
GFX-02
NDI
REMOTE-01
8.9 Mbps
REMOTE-02
retrying 2/5
REMOTE-03
not connected
Stat tiles — repeating KPIs, left-rule tone
Vault
284.2 GB
14m 22s · writing
Egress
44.2 Mbps
4 destinations
Warnings
1
REMOTE-01 bitrate
Light
Panel with header
INGEST
Panels have a left accent for subsystem color-coding. Header always includes a status readout.
List rows
CAM-01 Wide
CAM-02 Host
GFX-02 Insert
REMOTE-02
Tile grid — borderless repeating cells
CAM-01 Wide
12.4 Mbps
CAM-02 Host
12.1 Mbps
GFX-02
NDI
REMOTE-01
8.9 Mbps
REMOTE-02
retrying 2/5
REMOTE-03
not connected
Stat tiles — repeating KPIs, left-rule tone
Vault
284.2 GB
14m 22s · writing
Egress
44.2 Mbps
4 destinations
Warnings
1
REMOTE-01 bitrate
Timecode & readouts
Mono everywhere for anything that changes in place — timecodes, bitrates, protocol endpoints. Status colors are never decorative.
Dark
Timecode display
01:14:32:18
01:14:32:18
—:—:—:—
Readouts
PROTOSRT
ENDPOINTsrt://ingest-01.lgl.live:9000
RESOLUTION1920×1080
FRAMERATE29.97 fps
BITRATE12.4 Mbps
LATENCY180 ms
DROPS0
Status pills
Live
Recording
Stby
Retry 2/5
Down
Drop
Cued
Idle
Light
Timecode display
01:14:32:18
01:14:32:18
—:—:—:—
Readouts
PROTOSRT
ENDPOINTsrt://ingest-01.lgl.live:9000
RESOLUTION1920×1080
FRAMERATE29.97 fps
BITRATE12.4 Mbps
LATENCY180 ms
DROPS0
Status pills
Live
Recording
Stby
Retry 2/5
Down
Drop
Cued
Idle
Icon set
Line icons at 16px default, 1.4px stroke, rounded joins. Monochrome — color comes from context, never the icon.
Dark
Light
Modals, dropdowns & tooltips
Elevated surfaces use the lightest shade in the stack. Shadows reinforce depth in light mode; in dark mode, elevation comes from lightness.
Dark
Modal
Stop recording?
This will close the active Vault session. The file will remain. 00:14:22 captured, 284 GB written.
Dropdown & tooltip
CAM-01 Wide
SRT LATENCY
Round-trip to ingest-01Light
Modal
Stop recording?
This will close the active Vault session. The file will remain. 00:14:22 captured, 284 GB written.
Dropdown & tooltip
CAM-01 Wide
SRT LATENCY
Round-trip to ingest-01