Data Viz
Dashboard
Dense information displayed with clarity and hierarchy. Space Mono for numbers, thin borders and dark surfaces to let colour-coded data breathe. Every pixel earns its place by encoding meaning.
Always monospace
+0.10em tracking
// Buttons
// Inputs
// Data Bars
| Metric | Value | Δ | Status |
|---|---|---|---|
| Uptime | 99.9% | +0.1% | OK |
| Errors | 482 | +12 | Warn |
| P95 | 1.4ms | −0.2ms | OK |
Overview · Last 7 days
Monospace for All Data
Space Mono for every KPI value, metric, percentage, and timestamp. Monospace numerals align in columns without optical tricks - the numbers sit still and let you compare rows.
Colour Encodes Series, Not Decoration
Each of the eight palette colours maps permanently to one data series. Indigo is always Series A. Emerald is always success/up. Rose is always error/down. Consistent mapping removes cognitive load.
Maximum Information, Minimum Noise
0px border-radius on chart bars and cards. Very thin 1px borders at 8% opacity. No gradients on data areas. The surface is neutral so colour-coded data reads immediately without competing visual texture.
Signal Live State Clearly
A pulsing emerald dot with a "Live" label tells users data is current. An amber dot means delayed. Red means stale or error. Never leave users guessing whether the numbers on screen are current.