What it decides for you

• Use the deep slate background (#0b1120) with raised surface panels (#111a2e) so cards visibly float above the canvas; never put cards directly on pure black.
• Reserve cyan (#22d3ee) for primary data and interactive accents and lime (#a3e635) for positive deltas or secondary series; keep the rest of the UI neutral so accents read as signal.
• Set all numerals, deltas and table figures in a monospaced face (ui-monospace, SFMono) with tabular alignment so columns and KPIs line up and scan vertically.
• Keep spacing compact (12-16px gutters) and lean on hairline 1px borders (#1e2b45) instead of heavy shadows to separate dense regions while preserving legibility.
• Maintain strong contrast for legibility at small sizes: primary text near #e6edf7, muted labels at #7d8aa3, and uppercase tracked micro-labels for context above every metric.

Ships with

Design tokens