Design system
Editorial components for data-dense interfaces
Dark-first, built on TanStack Charts, MapLibre, and Tailwind v4. The organizing idea is a hard separation between two color layers: the UI chrome stays near-monochrome with a single accent, and saturated color is reserved entirely for data. Chrome never competes with the thing you are trying to read.
Layer one
Chrome
Near-monochrome, with one signature accent. Every value is defined twice — light is a hand-tuned counterpart, not an inversion.
Layer two
Data palettes
Named by meaning rather than by hue, so the choice of ramp is a decision about the data. Each is a set of var(--token) strings, which is why charts re-theme at paint time with no re-render.
Typography
Three families, three jobs
A serif that only ever sets figures, a sans for everything you read, and a mono for labels that should look like metadata.
Display numerals only. Never body copy — it ships one weight by design, which suits a face that exists to set figures.
Everything a reader actually reads. Tabular figures switch on automatically inside tables and stat tiles.
Eyebrows, axis ticks, identifiers. Anything that should read as metadata rather than prose.
Components
Stat tiles
Label, figure, and caption. A bare number is not a statistic — the caption is what makes it readable, and tiles that skip it are how dashboards fill up with numbers nobody trusts.