Data visualization
Model requests this month
574k
63% stayed on-premises
Turning complexity into clarity
Our customers make serious decisions with data. Our charts should be easy to scan, easy to understand and easy to trust.
- Lead with the number. The takeaway should be obvious in three seconds.
- Choose the form by the job: comparison, change over time, part of a whole, a single headline.
- Use colour with intention. Highlight what matters; let the rest recede.
- Label directly wherever you can, and always show a legend for two or more series.
- Prefer contrast and clarity over decoration: no 3D, no shadows, no gradients on data.
Charts on this page use example data.
Chart palette
Six colours, in a fixed order
The categorical palette is built from the North hues and tested for colour-vision deficiency: every adjacent pair stays distinguishable for people with protanopia, deuteranopia and tritanopia, in light and dark mode.
- Assign colours in order: series 1 is always Gulf, series 2 Ember, and so on. Never skip or cycle.
- A colour follows its series. If a filter removes a series, the others keep their colours.
- More than six series? Group the smallest into “Other”, or split into small multiples.
- For scatter plots and maps, where every colour can touch every other, use at most three: Lagoon, Ember, Iris.
Dark mode uses its own steps of the same hues, tuned for Midnight 95. Saffron sits below 3:1 on white, so always label it directly.
| Slot | Light | Dark | Token |
|---|---|---|---|
| 1. Gulf | --n-color-dataviz-light-1 | ||
| 2. Ember | --n-color-dataviz-light-2 | ||
| 3. Lagoon | --n-color-dataviz-light-3 | ||
| 4. Saffron | --n-color-dataviz-light-4 | ||
| 5. Iris | --n-color-dataviz-light-5 | ||
| 6. Rose | --n-color-dataviz-light-6 |
Sequential and diverging
One hue for magnitude
Heatmaps and maps that show “how much” use a single hue from light to dark: the Gulf ramp. Light means less, dark means more.
For values that go above and below a midpoint (change versus last year, sentiment), use a diverging scale: Gulf for one side, Ember for the other, and a neutral Steel 10 in the middle.
Change over time
Lines, thin and labelled
Use lines for continuous change. 2px lines, 4.5px markers only where there is a data point, a direct label at the end of each line, and one y-axis. Never a dual axis: if two measures have different units, draw two charts.
Median response time, ms. Example data.
Chart anatomy
| Element | Specification |
|---|---|
| Title | A sentence that states the takeaway, in Display Medium. “On-premises requests grew 70% since May”, not “Requests by month”. |
| Axes and grid | Steel 20 hairlines, horizontal only. Axis labels Text 12px, Midnight 50. Start bar axes at zero. |
| Bars | Rounded 4px at the data end, square at the baseline. 2px surface gap between stacked segments and adjacent bars. |
| Lines | 2px, round joins. Markers 4.5px radius with a 2px surface ring. |
| Labels | Direct labels for up to four series. Values in Text Medium, Midnight 90, never in the series colour. |
| Legend | Always for two or more series, above the chart, in series order. |
| Interaction | Hover or focus shows a tooltip with the exact value. Every chart has a table view for screen readers and exports. |
| Source | Caption below the chart: what is measured, units, period and source. |
Big numbers
Sometimes the chart is a number
When one figure carries the story, don't draw a chart. Set the number in Display ExtraBold, add a one-line context in Display Medium, and the comparison in a caption.
48h
Offline grace period
NorthStar Desktop
15 min
Licence check interval
NorthStar Admiral
0
Provider keys on desks
All model calls via Admiral
Dos and don'ts
Do
- Write the takeaway as the title.
- Use the palette in order.
- Label directly and keep a legend.
- Start bar charts at zero.
- Provide a table view.
Don't
- Use dual axes, 3D, pie charts with more than four slices, or donut gauges for precise values.
- Use status colours as series colours.
- Colour text in the series colour.
- Use rainbow or random colours.
- Hide the source.
Last updated on 14 October 2026