# Data visualisation

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/data-visualization · Updated 2026-10-14
Use when: Making charts, dashboards, KPI tiles or tables of figures.
Rules that always apply: https://identity.north.ae/AGENTS

## Categorical palette (fixed order, never cycled)
| Slot | Name | Light | Dark | Token |
|---|---|---|---|---|
| 1 | Gulf | #227ED1 | #3A8EE0 | --n-color-dataviz-light-1 |
| 2 | Ember | #E0703F | #D9693A | --n-color-dataviz-light-2 |
| 3 | Lagoon | #159A9C | #17999B | --n-color-dataviz-light-3 |
| 4 | Saffron | #D29B1F | #B8861A | --n-color-dataviz-light-4 |
| 5 | Iris | #7562C9 | #8C7BDB | --n-color-dataviz-light-5 |
| 6 | Rose | #C2477A | #D35C8C | --n-color-dataviz-light-6 |
- Validated for colour-vision deficiency (adjacent pairs) in light and dark. Dark mode uses the dark column on Midnight 95.
- A colour follows its series; filtering never repaints survivors. > 6 series → "Other" or small multiples.
- Scatter plots and maps (all pairs touch): max 3 series using Lagoon #159A9C, Ember #E0703F, Iris #7562C9 (dark: #17999B, #D9693A, #8C7BDB).
- Saffron is 2.4:1 on white: always direct-label it.
- Sequential (magnitude): Gulf ramp #E2EFFA, #C3DDF4, #9FC9EE, #6AAAE4, #227ED1, #1B6AB1, #165792, #0F3D68 (light = less). Diverging: Gulf ↔ Steel 10 #ECEEF2 midpoint ↔ Ember.
- Status colours are never series colours.

## Anatomy
- Title = the takeaway sentence (Display Medium).
- Grid: horizontal Steel 20 hairlines only; axis labels Text 12px Midnight 50; bar axes start at zero; one y-axis (never dual axes).
- Bars: 4px rounded data end, square baseline, 2px surface-coloured gap between stacked segments/adjacent bars. Lines 2px round joins; markers 4.5px radius with 2px surface ring.
- Legend above the chart for ≥ 2 series; direct labels for ≤ 4 series; values in text colours, never in the series colour.
- Hover/focus tooltip with exact value; a data table view; source caption (what, units, period, source).
- If the takeaway is one figure, use a big number (Display ExtraBold) instead of a chart.
- No 3D, shadows, gradients on data, pies > 4 slices, donut gauges for precise values.