Data Visualisation
Charts in Sitka are clear, accessible, and consistent. This page covers the colour palette for data series, chart-type selection, and the rules for making data readable in both light and dark mode.
Series Palette
Six colours cover the vast majority of chart use cases. All pass 3:1 contrast on the corresponding background token in both modes. Beyond six series, use patterns, dashes, or markers to distinguish additional data.
Series 1
Brand green — primary series
#34a865#219653Series 2
Blue — secondary series
#60a5fa#2563ebSeries 3
Amber — tertiary series
#f59e0b#d97706Series 4
Purple — quaternary series
#e879f9#a21cafSeries 5
Orange — fifth series
#fb923c#ea580cSeries 6
Slate — sixth series / neutral
#94a3b8#64748bIn context
Dark
Quarterly revenue (£M)
Light
Quarterly revenue (£M)
Line — Dark
Monthly active users
Line — Light
Monthly active users
Chart Type Selection
Choose the chart type that matches the nature of the data and the question being answered.
| Chart type | Use when | Avoid when |
|---|---|---|
| Bar / Column | Comparing discrete categories. Prefer horizontal bars for long labels. | Continuous time series — use a line chart instead. |
| Line | Showing trends over time or continuous data. Use markers at data points. | Fewer than 3 data points — a bar chart communicates more clearly. |
| Area | Emphasising volume over time, especially stacked to show part-to-whole. | More than 3 series — individual values become impossible to read. |
| Donut / Pie | Part-to-whole relationships with 2–4 segments only. | 5+ segments or data where differences are subtle — use a bar chart. |
| Scatter | Correlations between two continuous variables. | Ordinal or categorical data — values imply a false scale. |
| Heatmap | Two-dimensional density — calendar activity, confusion matrices. | Precise comparison of values — colour perception is imprecise. |
Accessibility
Never use colour as the only encoding
Use shape, pattern, or direct label alongside colour. At minimum, include a data table equivalent for screen reader users.
Simulate colour-blind views
Test charts under Deuteranopia and Protanopia filters. The six-series palette is selected to remain distinguishable under both conditions.
Label data points directly
Avoid standalone legends where possible. Direct labels on lines and bar ends remove the cognitive step of matching colour to legend item.
Provide accessible markup
Wrap SVG charts in a <figure> with a <figcaption>. Add role="img" and aria-label describing the key takeaway, not just the title.
Dark Mode Guidelines
Lighten series colours
The light-mode series palette is too dark for dark backgrounds. Use the dedicated dark-mode hex values — they're lightened by 15–20 lightness points.
Remove heavy grid lines
In dark mode, keep grid lines at 5% white opacity maximum. Heavy grid lines create visual noise against dark surfaces.
Background fill for chart area
Use --surface (not --background) as the chart canvas in dark mode. The one-step lift gives the chart a natural container.