Nanzing.
a charts

Atlas

design system (2026)

Every product I ship has a dashboard, and left alone every dashboard invents its own axes, its own greens, its own idea of what an empty state means. Atlas settles it once: one series palette ordered for colour-blind readers, one gridline weight, one set of numeric formats, and a named state for every way data can fail to arrive.

42
Chart components
96
Chart tokens
6
Chart families
0
Hex codes in chart code
Scroll
01 · Playground

Every chart, one source

<Chart family="line" series={2} grid={true} />
Family
Series · 2
2
series.01 hue
Gridlines
Tooltip
Direct labels
Single and double series charts use series.01 and series.02 only.
Streams by platform · last 8 weeks
412,000
02 · Tokens

Primitives in, meaning out

TokenWhere it is usedValue
03 · Hard states

A chart is mostly the states where there is no chart

Six of them are named, designed and componentised. This is the part teams skip, and the part that decides whether anyone trusts the dashboard.

04 · Rules that travel

Four decisions that keep every chart honest

01Never colour aloneSeries are separated by lightness before hue, and every series carries a direct label option. The palette survives colour-blindness and a photocopier.
02Axes start at zero, or say soTruncated axes are a component with a visible break mark, not a default. A chart cannot lie by four pixels.
03Tabular figures, alwaysAxis ticks, tooltips and totals use tabular numerals so nothing shifts when the data updates. A currency symbol sits on the value, never the axis title.
04Motion once, on entryCharts draw in once at 560ms and never again. Re-animating on every data poll makes a dashboard feel unreliable — and it's disabled entirely under reduced motion.

Built by the same person building the products.

Atlas isn't a side project — it's the system behind the case studies on the other side of this dock. Same tokens, same components, shipped.

See the work → Get in touch →