Data viz
Charts are reading material. They earn space when they say something a sentence can’t – a turn, a gap, a shape of change. Everything below is built from the same six colours we use elsewhere, so a chart in an article looks like part of the article, not a screenshot of a dashboard.
The categorical palette
Six colours, drawn straight from the brand. Use them in this order – the first slot always reads as “the one.” Never reuse a colour for two series. If you need more than six categories, group the long tail into “other” – don’t paint your way out with an off-brand seventh hue.
teal-600 · primary series, default first.
navy-900 · second series, weighty contrast.
mustard-400 · third series, warm midweight.
orange-500 · fourth series, warm signal.
sage-400 · fifth series, cool midweight.
lavender-500 · sixth series, editorial accent.
The order is deliberate – teal and navy carry the load, the warm pair (mustard, orange) sit second, and the cool pair (sage, lavender) finish the run. Read left to right; never scramble.
Sequential ramps
For ordinal data – low to high, sparse to dense, early to late. Single-hue ramps are unambiguous about ordering. Use the teal ramp for cool data (volume, time, neutral magnitude) and the mustard ramp for warm data (intensity, attention, heat).
Pick the ramp that matches the topic, not the brief. Email opens, subscriber counts, time elapsed – teal. Engagement intensity, dwell time, attention spikes – mustard. Never split a single chart across both ramps.
Divergent
For data with a meaningful zero – above and below average, gain and loss, sentiment. Teal anchors the negative end, cream sits at zero, orange anchors the positive end. Nine stops, locked polarity. Never invert.
The cream centre is load-bearing. Without a clear zero, the eye reads the lightest stop as “missing data” – not “average.” Always label zero on the axis.
Axes
Axes are scaffolding. They hold the chart up; they don’t perform. Hairlines in stone-300, ticks in stone-500, labels in 11px Inter, stone-700. Title and source line sit outside the plot area.
Gridlines, when needed, are stone-200 – just visible enough to read against. Bold gridlines fight the data; they shouldn’t.
Type in charts
Five sizes, no more. Each one has a job; if it doesn’t, cut it.
Legend
Above the plot when there are four series or fewer. To the right when there are five or six. Inline with the title when there’s room – it’s the densest, fastest read.
Bullet shape: 8px circle for line series, 10px square for area or bar fills. Spacing between entries: 16px. Never centre a legend; left-align with the chart edge.
If the chart has six or fewer lines and they don’t cross often, drop the legend entirely – label each line at its right edge instead.
Chart types
Six shapes cover ninety per cent of what we publish. Each one has a job; pick by question, not by mood.
Line — for trend over time
A continuous variable measured at regular intervals. The strongest format for “is this going up or down.”
Two to four lines maximum. More than that, switch to small multiples.
Bar (horizontal) — for ranked comparisons
When the categories have names worth reading. Always sorted; never alphabetical unless the user is searching.
Single hue when the categories are equal in kind – it’s about the lengths, not the colours.
Column — for category × time
Vertical bars when the x-axis is time. Two or three series only; past that, switch to lines.
Area — for cumulative or stacked share
Use when the total matters as much as the parts. Single area for one series, stacked for parts-of-whole over time.
Stacked areas only when the order is meaningful – biggest at the bottom, smallest at the top.
Dot/strip — for distributions
When you want to show every observation, not a summary. Honest about variance.
Use slight transparency – overlapping dots are information, not a problem.
Donut — for parts-of-whole, four slices or fewer
Donuts read badly past four. If you have more than four, switch to a horizontal bar.
Always label the slices with their percentage. The shape alone is too imprecise.
Accessibility
Colour is the last layer of meaning, never the first. Charts must read in greyscale, under deuteranopia and protanopia, and through a screen reader.
The categorical order – teal → navy → mustard → orange → sage → lavender – has been tested for distinguishability. Teal, navy, and orange are the three most reliable hues across colour-vision deficiencies. Sage and mustard sit close in luminance under deuteranopia simulation; if both appear in the same chart, pair them with patterns or markers.
Labels next to the lines beat a separate legend. The eye moves once, not twice.
Two close-luminance hues vanish under deuteranopia. Pair with shape, pattern, or direct label.
Every chart ships with a one-sentence summary directly below it – the trend stated in plain English, for screen readers and for skimmers (“Sales rose 18% year on year”). Provide a table fallback for any chart in long-form editorial; it is also the source for accessibility tools and translation.
Annotations
Used sparingly. Annotations are for the moment a sentence below the chart can’t reach – a baseline, an event, a turn.
Mark with a thin stone-400 dashed line and a 9px label in stone-600. Never compete with the data series – annotations are background, not foreground.
Usage rules
Specific noun, specific period. The reader knows what they’re looking at before they read the axes.
Shadows distort length; 3D distorts everything. Never. Charts are flat by law.
Bar lengths read as ratios. A truncated axis turns a 5% gap into a 50% gap. Always start at zero.
A 12-point spread looks like a tenfold rise. Misleading – never on bars. Line charts may zoom; bars must not.
Stone-200 horizontals only when needed. The data sits forward; the scaffolding stays back.
Heavy gridlines compete with the data. The reader’s eye should land on the line, not the grid.
The data type chooses the palette. Never use the categorical six to encode magnitude – the colour order isn’t ordinal.
One insight per chart. Five lines crowding the same plot is five charts in a trench coat.
Two more, in plain English:
- The legend doesn’t repeat the title. If the title says “by channel,” the legend lists channels – not “Channels.”
- Categorical palette never encodes order. Teal isn’t more than navy; orange isn’t more than mustard. The cat- slots are for unordered groups – use a sequential ramp the moment magnitude is involved.
Tokens to ship
A flat surface of dataviz tokens, each backed by a colour stop already in the system. No new primitives.
Charts inherit colour from the palette, type from typography, spacing from the grid. Nothing in this page invents a token – it only assigns existing stops to chart-specific roles. That’s the whole point.