The design systems colour palette is derived from the following site variables. These can be overridden to change the appearance of the entire site.
Primary
oklch(0.43 0.0147 248.17)
--color-primary
Secondary
oklch(0.67 0.15 250)
--color-secondary
Tertiary
oklch(0.65 0.2 300)
--color-tertiary
Neutral
oklch(0.64 0 0)
--color-neutral
Success
oklch(0.5 0.15 150)
--color-success
Attention
oklch(0.55 0.12 250)
--color-attention
Error
oklch(0.55 0.2 30)
--color-error
Promotion
oklch(0.6 0.25 30)
--color-promotion
Extended Colour Palette
The color scheme of a site is defined using the site variables shown below. From this, CSS calculations will generate a range of primitive shades centered around the site variable, where the site colour is 500 on a scale of 50 (lightest) to 950 (darkest). These can be individually changed by overriding their css definitions.
Semantic shades have been labeled. Default shades are provided when no suffix is given, such as --color-primary. Other semantic shades, such as ‘light’ are given by using the label as the suffix, e.g. --color-primary-light
