RESTRICTED · VIGILIA DESIGN SYSTEM · REV 0.2
VIGILIADS · REV 0.2
Theme
Colour vision
Density
00 / Common operational picture

An instrument, not a dashboard.

Tokens, components and symbology for operators who watch thousands of tracks for hours, at night, with no network. Built to the constraints of a defence operator console. The interface stays quiet until it has a reason not to.

Principle 01
Calm until it matters
Principle 02
Shape, word, then colour
Principle 03
Every figure mono, with a unit
Principle 04
Hairlines, never shadows
F01 · Foundations

Colour

Three layers. primitive holds raw values and is never referenced by components. semantic names intent and is the only layer a theme overrides. component binds semantics to parts. One accent, steel, reserved for selection, focus, the primary action and LIVE.

Primitive ramps · color.<ramp>.<step>
Neutral
neutral.50
neutral.100
neutral.200
neutral.300
neutral.400
neutral.500
neutral.600
neutral.700
neutral.750
neutral.800
neutral.850
neutral.900
neutral.925
neutral.950
Dim · NVG
dim.100
dim.200
dim.300
dim.500
dim.600
dim.700
dim.750
dim.800
dim.850
dim.900
dim.925
dim.950
Steel
steel.50
steel.200
steel.300
steel.350
steel.400
steel.500
steel.600
steel.700
steel.750
steel.800
steel.900
steel.950
Blue
blue.50
blue.300
blue.400
blue.500
blue.600
blue.800
blue.900
blue.dim
Amber
amber.50
amber.300
amber.400
amber.600
amber.800
amber.900
amber.950
amber.dim
Red
red.50
red.300
red.400
red.500
red.600
red.800
red.900
red.950
red.dim
Green
green.50
green.300
green.400
green.600
green.800
green.900
green.dim
Cat
cat.1
cat.2
cat.3
cat.4
cat.5
cat.6
cat.7
cat.8
Contrast matrix · WCAG 2.2 · live
sunkenbaseraisedoverlayhoverselected
primary——————
secondary——————
muted——————
accent——————
info——————
warning——————
critical——————
ok——————

Computed from the rendered tokens: switch the theme above to re-measure. Primary data is held to 7:1 (AAA) on every surface, all other text to 4.5:1 (AA). text.disabled is exempt and never carries information alone. The same rule runs as a unit test on the token files.

F02 · Foundations

Typography

Three faces, two jobs each. Barlow Condensed, a DIN-lineage signage face, for headings, panel titles and tabs, always set in capitals. Barlow for interface text and prose. B612 Mono, drawn with Airbus for cockpit displays, for every figure, identifier, time and micro-label. All SIL OFL, bundled as woff2.

text.displayBaltic Central · 4,812 tracks36/40 · +2% · 600 · Cond
text.headingAIS signal lost inside Z-0422/28 · +4% · 600 · Cond
text.titleFilters · Track · Evidence13/16 · +8% · 600 · Cond
text.bodyDismissing removes this alert from every operator's queue. The action is logged.13/20 · 0 · 400 · Barlow
text.smallCeilings for a 5,000-track picture on one fanless workstation.12/16 · 0 · 400 · Barlow
text.microLast seen · signal state · 02 / 0310/12 · +12% · Mono · CAPS
text.data34V DE 61264 31847 · 3.1 kt · 248° · 011402Z NOV 2612/16 · 0 · 400 · Mono
text.data-lgFL340 · 412 kt · 06:3520/24 · 0 · 400 · Mono
Time · DTG011402Z NOV 26Date-time group in headers and logs; clock as 14:02:37Z.
Position57°07.20′N 020°10.80′EDegrees and decimal minutes, WGS84, with MGRS beneath.
Units412 kt · FL340 · 20 NMUnit always present, in text.muted.
IdentityTN 40001 · MMSI 273451920Track number first, then source identifier.
F04 · Foundations

Iconography and symbology

16 px grid, 1.5 px stroke, square caps, mitre joins, currentColor. Rendered at 10, 12, 16 or 20 px. Generated into React from the handoff's vigilia-icons.js; nothing is fetched.

search
filter
layers
target
play
pause
step-back
step-fwd
to-live
eye
eye-off
bell
check
x
chevron-down
chevron-up
chevron-right
chevron-left
plus
minus
sliders
clock
ruler
polygon
pin
offline
cpu
memory
frame
panel-left
panel-right
panel-bottom
more
arrow-up
arrow-down
sort
radar
export
lock
history
command
gauge
spinner
trk-air
trk-sea
trk-unk
trk-gnd
Severity · shape + word + colour
infocircle · i
warningtriangle · !
criticaloctagon · !
oksquare · ✓
staledashed ring
lostring · slash
C01–C05 · Components

Controls

C01

Button

Variant
= { primary, secondary, ghost, danger, icon }
Size
= { sm 24, md 28, lg 32 }
State
= { default, hover, focus, active, disabled, loading }
Use · One primary per surface: the action the operator came to take.Avoid · Danger for routine closes. Icon-only without its label, which is the tooltip.Keys · Tab focus · Enter/Space activate · shortcut chip inline.
LiveDisabledLoading
primary
secondary
ghost
danger
iconFollow (F)Draw zone (Z)Follow (F)Follow (F)
C02

Toggle · Segmented · Check · Radio

Checked
= { off, on, mixed }
State
= { default, hover, focus, disabled }
Seg.tone
= { neutral, replay }
Use · Toggle for instant layer switches; checkbox for filter sets; segmented for 2–5 exclusive modes; radio in forms.Keys · Space toggles · arrows move inside segmented and radio (one tab stop).
Toggle · live
Checkbox · radio
Map orientation
Segmented · live
Signal state
Replay speed
tone=replay: the speed control takes the replay colour.
C03

Range slider

Mode
= { single, range }
State
= { default, hover, focus, dragging, disabled }
Use · Altitude, speed, age. The value and its unit are always in view.Keys · ←→ step · Shift ×10 · Home/End · Tab between thumbs.
Altitude · drag0 – 41,000 ft
SFCFL225FL450
Speed · typed0 – 600 kt
Speed · disabled— kt
No selected source reports speed.
Slider
←→↑↓One step
ShiftPageUpPageDownTen steps (with an arrow, or alone)
HomeEndThe minimum, the maximum
TabTo the other thumb; they never cross
↵In a typed field: take the value, snapped (also on leaving it)
C04

Input · Search · Select · Date-time

State
= { default, hover, focus, filled, error, disabled, readonly }
Token
= { key:value, removable }
TZ
= { UTC }
Use · Search takes free text and key:value tokens. Date-time is UTC only; there is no local-time mode.Keys · / focuses search · Backspace removes the last token · ↑↓ list · Enter select · Esc close.
NM
Max 120 NM per zone
type:vesselzone:Z-04/
picked: —
Date-time · UTC
NOV 2026Previous monthNext month
MOTUWETHFRSASU
::Z
Search
/Focus the search, from anywhere
↵key:value becomes a token; else pick the suggestion
TabFree text becomes a name filter
⌫In an empty field, remove the last token
↑↓EscMove through, close the suggestions
Date-time
←→↑↓A day, a week
PageUpPageDownA month
HomeEndMonday, Sunday
↵SpacePick the day; the time is kept
↑↓0–9In HH, MM, SS: step, or type over
C05

Keyboard hint

Tone
= { neutral, on-solid }
Use · Next to every action that has a shortcut, in tooltips and in the palette.
⌘KCommand/Search1–4ViewsSpacePlay / pause[Slower]FasterLGo liveFFollowAAcknowledgeZDraw zoneEscClose
C06 · Components

Data

C06

Dense data table

Density
= { default 28, compact 24 }
Sort
= { none, asc, desc }
Row
= { default, hover, selected, alerting, stale }
Align
= { text: left, numeric: right }
State
= { ready, loading, empty, error }
Use · Track lists, alert queues, logs. Only the rows in view are in the DOM. Sticky header; the unit lives in the header.Live · Rows update at most four times a second. While focus is in the table, rows keep their places; a Resort chip offers the new order.
Rows
Select all
Type
Track
Src
Altft
Spdkt
Hdg°
Age
Status
BTI8902
MLAT
2,600
518
192
00:01
ok
FIN3198
ADS-B
26,500
505
350
00:03
ok
FIN1534
RAD-2
16,400
502
182
00:05
ok
NAX6439
ADS-B
28,100
501
047
00:04
ok
DLH4518
ADS-B
5,600
501
225
00:01
ok
FIN7553
ADS-B
32,600
498
142
00:02
ok
FIN5007
MLAT
38,300
497
197
00:06
ok
AFR4333
ADS-B
17,300
488
167
00:06
ok
LOT4871
MLAT
29,300
488
268
00:05
ok
DLH2226
RAD-2
12,100
484
209
00:03
ok
NAX3011
MLAT
7,100
483
168
00:04
ok
FIN1435
RAD-2
13,300
479
189
00:03
ok
KLM5036
ADS-B
2,000
477
328
00:00
ok
SAS789
MLAT
5,500
474
072
00:01
ok
AFR4818
ADS-B
4,600
469
266
00:03
ok
KLM2363
RAD-2
3,400
469
228
00:03
ok
0 selected · opened: —
loading
empty
No tracks match zone:Z-09 type:air
error
Track store timed out (2 s). Showing snapshot 011408Z.
Table
TabInto the table: one stop, on the last cell used
↑↓JKRow up, row down
←→Cell left, cell right
HomeEndFirst, last cell of the row
Ctrl+HomeCtrl+EndFirst, last row
PageUpPageDownA screen up, down
SpaceSelect the row (on the header: all)
Shift+↑Shift+↓Extend the selection
↵Open the row (on the header: sort)
SSort by the focused column: asc, desc, none
C07 · Components

Status

C07

Severity badge · status

Status
= { info, warning, critical, ok, stale, lost }
Emphasis
= { subtle, solid, inline }
Use · Subtle in lists. Solid only for an unacknowledged critical, once per screen. Inline in dense cells.Rule · Shape, word and colour always travel together.
infowarningcriticalokstalelost
Critical · solidWarning · solid
infowarningcriticalokstalelost
7within1near1over
AIS-Tok412 msg/sADS-Bdegradedlag 4 sRAD-2downsince 1258ZMLATunknown
C09

Alert banner · alert stack

Severity
= { info, warning, critical }
Status
= { new, acknowledged, dismissed }
Layout
= { banner, row }
Use · Only an unacknowledged critical becomes a solid banner, at most one per screen. Everything else stacks as quiet rows, newest first, three visible.Motion · An alert enters once (200 ms); nothing blinks. Reduced motion: no movement at all.Keys · A acknowledges the top critical · E opens its evidence · Dismiss needs a reason and a confirm.
evidence: —
Severity under colour-vision simulation · shape + word carry the meaning
Normal vision
infowarningcriticalokstalelost
Deuteranopia
infowarningcriticalokstalelost
Protanopia
infowarningcriticalokstalelost
Tritanopia
infowarningcriticalokstalelost
Greyscale
infowarningcriticalokstalelost
C08 · Components

Tracks

C08

Track badge · track card

Kind
= { aircraft, vessel, unknown, ground }
Signal
= { live, stale, lost }
State
= { default, hover, selected, alerting }
Layout
= { badge (compact, full), card }
Use · Badge inside text, alerts, table rows and palette results. Card in the track sheet and hover preview. Selected wears the corner brackets, the reticle's mark.Rule · Identity falls back callsign → name → MMSI → ICAO → track number. A synthetic track always says SIM.
SAS7J2TN 40001MMSI 255806173lostUNK 0009

KAPELLA

TN 40001 · MMSI 273451920
Selected
criticalLost signal
SOG
3.1 kt
COG
248 °
Seen
06:35 ago
MGRS
34V DE 61264 31847
Source
AIS-T · VIS-02
Last fix
011402Z NOV 26

SAS7J2

TN 40417 · ICAO 4CA7J2
Default
Squawk 7600Live
GS
412 kt
TRK
205 °
ALT
FL340
MGRS
34V CF 43120 72210
Source
ADS-B · MLAT
Seen
00:02 ago
Every kind × signal × source
Kind · signalSIMFINNOROSK
aircraft · liveSAS7J2SIMliveSIMSAS7J2FINliveSAS7J2NORliveSAS7J2OSKlive
aircraft · staleSAS7J2SIMstaleSIMSAS7J2FINstaleSAS7J2NORstaleSAS7J2OSKstale
aircraft · lostSAS7J2SIMlostSIMSAS7J2FINlostSAS7J2NORlostSAS7J2OSKlost
vessel · liveKAPELLASIMliveSIMKAPELLAFINliveKAPELLANORliveKAPELLAOSKlive
vessel · staleKAPELLASIMstaleSIMKAPELLAFINstaleKAPELLANORstaleKAPELLAOSKstale
vessel · lostKAPELLASIMlostSIMKAPELLAFINlostKAPELLANORlostKAPELLAOSKlost
unknown · liveTN 40009SIMliveSIMTN 40009FINliveTN 40009NORliveTN 40009OSKlive
unknown · staleTN 40009SIMstaleSIMTN 40009FINstaleTN 40009NORstaleTN 40009OSKstale
unknown · lostTN 40009SIMlostSIMTN 40009FINlostTN 40009NORlostTN 40009OSKlost
ground · liveRAD-2SIMliveSIMRAD-2FINliveRAD-2NORliveRAD-2OSKlive
ground · staleRAD-2SIMstaleSIMRAD-2FINstaleRAD-2NORstaleRAD-2OSKstale
ground · lostRAD-2SIMlostSIMRAD-2FINlostRAD-2NORlostRAD-2OSKlost
The same, in greyscale · silhouette, word and SIM carry it
Kind · signalSIMFINNOROSK
aircraft · liveSAS7J2SIMliveSIMSAS7J2FINliveSAS7J2NORliveSAS7J2OSKlive
aircraft · staleSAS7J2SIMstaleSIMSAS7J2FINstaleSAS7J2NORstaleSAS7J2OSKstale
aircraft · lostSAS7J2SIMlostSIMSAS7J2FINlostSAS7J2NORlostSAS7J2OSKlost
vessel · liveKAPELLASIMliveSIMKAPELLAFINliveKAPELLANORliveKAPELLAOSKlive
vessel · staleKAPELLASIMstaleSIMKAPELLAFINstaleKAPELLANORstaleKAPELLAOSKstale
vessel · lostKAPELLASIMlostSIMKAPELLAFINlostKAPELLANORlostKAPELLAOSKlost
unknown · liveTN 40009SIMliveSIMTN 40009FINliveTN 40009NORliveTN 40009OSKlive
unknown · staleTN 40009SIMstaleSIMTN 40009FINstaleTN 40009NORstaleTN 40009OSKstale
unknown · lostTN 40009SIMlostSIMTN 40009FINlostTN 40009NORlostTN 40009OSKlost
ground · liveRAD-2SIMliveSIMRAD-2FINliveRAD-2NORliveRAD-2OSKlive
ground · staleRAD-2SIMstaleSIMRAD-2FINstaleRAD-2NORstaleRAD-2OSKstale
ground · lostRAD-2SIMlostSIMRAD-2FINlostRAD-2NORlostRAD-2OSKlost
C10 · Components

Time

C10

Timeline · replay scrubber

Mode
= { live, replay }
Play
= { playing, paused }
Speed
= { 1, 2, 4, 8 }
Marker
= { SEVERITY, clustered when dense }
Rule · Replay is never subtle: amber frame, amber playhead, persistent label, speed control enabled. Live disables speed.Use · The ruler is drawn on a canvas, so 500 events cost one paint; the cursor is a slider in UTC. Hover or jump to an event for its label.
PlaySpace
Speed
Live14:09:12Z
PauseSpace
Speed
Replay · 4×13:48:20Z−20:52 behind live
Timeline
←→10 s back, forward
Shift+←Shift+→A minute
HomeEndThe start of the buffer, now
[]The previous, the next event, with its label
EscHide the label
C12 · Components

Overlays

C12

Palette · shortcuts

Groups
= { View, Track, Alert, Layers, Display }
Use · The palette reaches every command, track and view.Rule · Shortcuts are registered once, by zone; a second binding of the same keys in the same zone is refused. They stay out of text fields, except Esc and ⌘K.
Try ⌘K or Ctrl K anywhere on this page, then type “rep” or “theme”.
Esc
Live operations1
Alert queue2
Replay · last 2 h3
Resource budget4
Select S-0001 · KAPELLA
Select A-0417 · SAS7J2
Replay TN 40001 · 30 minR
Acknowledge ALR-0193A
Toggle range rings
Toggle zones
Theme · night
Theme · NVG-safe
Theme · briefing
↑↓ Navigate↵ RunEsc Close
Palette
⌘KCtrl KOpen, from anywhere
↑↓Move through the results, wrapping
↵Run the active command
EscClose; focus returns
Bound on this page · live from the registry
    C12

    Tooltip · toolbar · menu

    Menu.item
    = { default, active, disabled, danger, separator }
    Menu.open
    = { button, context }
    Use · Tooltips name icon-only tools and show their key. Menus hold a track's actions.Avoid · A danger item that acts at once: it opens a confirm modal.
    Track actions
    last: —
    Toolbar
    TabInto and out of the toolbar: one stop
    ←→Between tools, wrapping
    HomeEndFirst, last tool
    EscHide the tooltip
    Menu
    ↵Space↓Open on the first item
    Shift+F10Context menu on the focused element
    ↑↓Between items, wrapping
    ↵SpaceRun the item
    EscTabClose; focus returns
    C12

    Toast · modal

    Toast.tone
    = { ok, info, warning }
    Modal.tone
    = { default, danger }
    Use · Toasts confirm and never alert: anything alarming is an alert. Modals are for destructive, logged actions, with a required reason.
    Confirm dismiss

    Dismiss ALR-0193?

    Dismissing removes this alert from every operator's queue. The action is logged with your ID and the reason below.

    Modal
    TabStays inside the modal
    ↵Confirm, once there is a reason
    EscCancel; focus returns to Dismiss…