Data visualisation · Ascern design system

Charts in Reports and in Flo replies use one palette. Every mark passes 3:1 on white, brand green leads, and every chart has a table behind it.

Foundations

Data visualisation

Charts in Reports and in Flo replies use one palette. Every mark passes 3:1 on white, brand green leads, and every chart has a table behind it.

Categorical

For series with no order: consultants, sources, clients. Use them in this order, so the first series is always brand green. Each pair of hues is at least 32 apart in CIELAB, so neighbours stay distinct.

categorical.1

Green #004F46 · 9.5:1

categorical.2

Blue #1D5FB4 · 6.3:1

categorical.3

Rose #BE185D · 6.0:1

categorical.4

Purple #6B3FB0 · 7.1:1

categorical.5

Amber #B45309 · 5.0:1

categorical.6

Cyan #1A8CB0 · 3.9:1

categorical.7

Olive #6B7A1E · 4.7:1

categorical.8

Grey #787276 · 4.7:1

Contrast is against white. The cyan is lighter than the meeting teal #056374, which sat too close to brand green.

Sequential

For ordered values: heatmaps, density, a funnel by depth. Seven steps of #004F46 toward white. Steps 1 to 3 fall under 3:1, so they carry a value label or sit beside a darker step.

1 #D9E5E3

2 #B8CECB

3 #94B5B1

4 #709C97

5 #4C847E

6 #266962

7 #004F46

color.chart.sequential.1 … 7

Status series

For targets only. Success and danger reuse the status pill colours; behind uses a brighter amber so it reads apart from missed.

On target

color.chart.success

#2E6813 · 6.8:1

Behind

color.chart.warning

#B45309 · 5.0:1

Missed

color.chart.danger

#B91C1C · 6.5:1

Other

color.chart.neutral

#A3A6AD · remainder

Examples

Axis and labels 12/16 in text.subtle, gridlines #EEEFF1, no chart border. A legend sits above the plot when there is more than one series, and View as table sits under every chart.

Placements by consultant

This quarter · 36 placements

One series, so one colour and no legend

View as table

CVs sent per week

1 Sep to 20 Oct · top three clients

Halcyon Bank

Northline

Brightwave

2px lines, a dot on the latest value only

View as table

Applications by source

Jul to Oct · 197 applications

Flo sourcing

Referral

Job board

Inbound

1px white gap between segments

View as table

Rules

1. Use color.chart.* tokens only. Categorical in order from 1; more than 8 series fold into Other in color.chart.neutral.

2. Axis and label type is 12/16 in text.subtle. Gridlines are 1px #EEEFF1; the baseline is #D9DBE0.

3. No 3D, no gradients, no shadows on marks. No pie or donut over 5 slices; use a bar instead.

4. Numbers follow Content: numerals, thousands separators (£148,500), percent with no space (18%), dates as 3 Nov.

5. Every chart has a table or a text alternative: View as table under the chart, and a one-line summary as its accessible name.

6. Colour is never the only key. A legend or a direct label names every series.