The design system includes a range of colours designed to support data visualisation. These colours ensure that your charts and data presentations are clear and consistent, helping users understand the information easily.
Colour categories
Data visualisation colours are organised into several categories, each serving a specific purpose. Understanding these categories will help you choose the right colours for your data visualisations.
General colours
Use general colours when you don't need multiple categories to express the data. These colours are ideal for simple visualisations where clarity is key.
- colour.chart.default: The default colour used for general purposes.
- colour.chart.highlight: A highlight colour used to draw attention to specific data points.
Categorical colours
Categorical colours are used to represent multiple categories within charts. Always use these colours in the numbered order provided to maintain consistency.
- colour.chart.categorical-1
- colour.chart.categorical-2
- colour.chart.categorical-3
- colour.chart.categorical-4
- colour.chart.categorical-5
- colour.chart.categorical-6
- colour.chart.categorical-7
- colour.chart.categorical-8
- colour.chart.categorical-9
Signal colours
Signal colours convey meaning, such as indicating whether figures are positive or negative. These colours are essential when the colour itself carries important information.
Important: Never use colour as the sole means of communicating meaning. Always provide an alternative method, such as labels or icons.
- colour.chart.success: Indicates positive outcomes or successful results.
- colour.chart.warning: Signifies warnings or areas of caution.
- colour.chart.danger: Represents errors, issues, or negative results.
Group colours
Group colours are used to represent multiple data sets within the same category. These colours help distinguish between different groups while keeping a cohesive visual style.
Group 1:
- colour.chart.group-1.regular
- colour.chart.group-1.strong
Group 2:
- colour.chart.group-2.regular
- colour.chart.group-2.strong
Group 3:
- colour.chart.group-3.regular
- colour.chart.group-3.strong
Group 4:
- colour.chart.group-4.regular
- colour.chart.group-4.strong
Token values