Palette
one set of roles, two modes — dark re-tunes the relationships rather than inverting themLight · default
canvas#f4f8fcworkspace ground, never pure white
surface-1#ffffffcards, panels, command bar
surface-2#f8fbferaised controls, footers
surface-3#eef4f9evidence blocks, tracks, chips
hover#f5f9fdtable and list rows under the pointer
selected#e9f4ffthe selected row, tab or control
text-primary#14233aheadings, values, running text
text-secondary#53677esupporting copy, icons, captions
text-muted#8191a3placeholders, micro metadata
border#d6e1ebcard and control boundaries
border-subtle#e4ebf2row separators
border-strong#bfcddbhover and focus boundaries
primary#0878e8links, selected navigation, series
primary-hover#0668ccinteractive hover
primary-soft#e9f4ffsoft blue tint
success#22a559healthy, complete
warning#e59b18medium severity, partial
danger#d64535high severity, failed
info#327bc2low severity, informational
neutral#71869ainfo severity, quiet signals
Dark · matte, layered, quiet
canvas#0b1420near-black navy ground
surface-1#101c2acards, panels, command bar
surface-2#142231raised controls, footers
surface-3#192a3bevidence blocks, tracks, chips
hover#152638rows under the pointer
selected#16334cthe selected row, tab or control
text-primary#f1f6faheadings, values, running text
text-secondary#a8bacbsupporting copy, icons, captions
text-muted#71869aplaceholders, micro metadata
border#25384aboundaries carry the depth
border-subtle#1d2d3drow separators
border-strong#31506bhover and focus boundaries
primary#2997ffbrighter so it does not sink
primary-hover#48a7ffinteractive hover
primary-soft#102b45soft blue tint
success#34b46ehealthy, complete
warning#f0ab2emedium severity, partial
danger#e8574ahigh severity, failed
info#4d8fd6low severity, informational
neutral#8a9fb3info severity, quiet signals
Navigation frame · navy in both modes
sidebar#102239
elevated#152b46
hover#182f4a
selected#1a4169
sidebar#08111c
elevated#0d1927
hover#0f2132
selected#153653
Semantic accents · one meaning each
action#0878e8 · primary buttons, both modes
resource#19b8d9 · resource counts and KPI
governance#8457e8 · tags and coverage
relationship#6b5bd6 · stored connections
KPI icons sit in 32px containers tinted with their accent at 14% in light and as a low-opacity wash in dark. Purple never becomes a navigation colour on another screen.
Severity · icon + colour + word, never colour alone
Highdanger · always with the word and an icon, never colour alone
Mediumwarning
Lowinfo
Infoneutral
Counts always exist in text beside a chart. Rows referenced by open findings carry a dagger (†) in every table.
Chart categories · fixed order, CVD-validated both modes
computenetworkstorage*databaseapp svcother
The top slots of the app's category_color() set, never cycled. Charts fold the tail into Other; bars are always direct-labelled. *storage deepens to #a98a00 in dark.
Mark
a rounded topology A — three nodes and the connectors between them
Mark24px tall
Reversed24px tall
Mono inkone colour
App icon32px square
Lockup140px wide
Lockup reversed140px wide
The reversed mark sits on the navy frame in both modes at 30px. The node diameter is the clear-space unit x — keep at least one x clear on every side, never crop the mark. Full rules: marks/USAGE.md. Native app icons are derived from the light app icon by pnpm run icons, not drawn by hand.
Type
Inter Variable, bundled — one face for the whole interfacePage title 24Inter 650 · one per route, letter-spacing −0.02em
32,768KPI value 26 · Inter 650, tabular numerals
Section heading 16Inter 650
Card heading 14Inter 600 · panel and card titles
Body 13 — descriptions and supporting copy read at this size.Inter 400 · line-height 1.4
UI control 12 — buttons, selects, navigation, table cellsInter 500 · the dense working size
Secondary 11 — table heads, captions, secondary linesInter 400/600 · the floor
LABEL 11 · TRACKED CAPSInter 600 · letter-spacing 0.08em, metadata only
/subscriptions/…/rg-prod-data · a7f21f53Mono 11 · platform monospace, ARM ids, hashes, raw values
Nothing below 11px at the default text scale, off a 12px rem base the reader can step with ⌘/Ctrl +, − and 0. Hierarchy comes from size and weight first, then the three text levels. Uppercase is reserved for compact metadata labels (TENANT, SNAPSHOT), never navigation.
Structure
layers over rules, borders over shadows in dark1px border — cards, controls, shell boundaries
1px subtle border — table rows, list separators
Card — surface-1, 1px border, 10px radius, a whisper of shadow in light and none in dark
Spacing: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 (a 4px base, written in rem so the text-size step scales it)
Radii: 5px badges & chips · 7px controls · 8px menus · 10px cards · 12px large panels · 14px dialogs. Pills only for true statuses, filters and tags.
Frame: sidebar 208px (rail 64px, 80px under the macOS overlay title bar) · command bar 56px · workspace padding 24 × 20 · content stops stretching past ~1840px.
Controls are 32px tall (28 compact, 36 prominent). Motion 120–180ms, cubic-bezier(.2,.8,.2,1); never animate KPI values or charts on page entry.
Components
same anatomy in both modes
Collect snapshot
Open data
View inventory →
Search resources, types, groups, tags… ⌘K
selected row
environment=prod
High · 93
Collect snapshot
Open data
View inventory →
Search resources, types, groups, tags… ⌘K
selected row
environment=prod
High · 93
Three button levels — primary (blue fill, white label; one per surface), secondary (bordered neutral), tertiary (text). Selection anywhere is the quiet --az-selected fill; the sidebar's selected row is a soft blue emphasis, never a thick coloured bar. Theme is a tri-state in Settings — System (default) · Light · Dark — and every chart, SVG and the topology canvas reads the same tokens.