Always use the i.AI colour palette. Reference colours through Sass functions
rather than copying hex values, so your service always uses the latest palette.
Functional colours
The i.AI Design System has a set of functional colours for essential page
elements. These help apply colours in a way that makes interactions predictable
and consistent to users.
To access these colours, use the govuk-functional-colour Sass function. Do not
copy the hex values. For example, use govuk-functional-colour("brand") rather
than #1d70b8. This means your service always uses the most recent colour
palette whenever you update.
Only use these colours in the context they are designed for. In all other cases,
reference the web palette directly.
color: govuk-functional-colour("brand"); // not #1d70b8color: govuk-functional-colour("error"); // error messages
Brand colour
This is the only colour that will change depending on whether it is a GOV.UK
brand or a departmental brand. Read our branding guidelines
to decide which one to use.
Colour
Product brand
Name
Hex
i.AI
brand
#ca357c
GOV.UK
brand
#1d70b8
Text
Colour
Name
Hex
text
#0b0c0c
secondary-text
#484949
inverse-text
#ffffff
Link
Colour
Name
Hex
link
#1a65a6
link-hover
#0f385c
link-visited
#54319f
link-active
#0b0c0c
Border
Colour
Name
Hex
border
#cecece
input-border
#0b0c0c
Background
Colour
Name
Hex
template-background
#f4f8fb
body-background
#ffffff
Focus state
Colour
Name
Hex
focus
#ffdd00
focus-text
#0b0c0c
Error state
Colour
Name
Hex
error
#ca3535
Success state
Colour
Name
Hex
success
#0f7a52
Hover state
Colour
Name
Hex
hover
#cecece
Surface
Colour
Name
Hex
surface-background
#f4f8fb
surface-text
#0b0c0c
surface-border
#8eb8dc
Web palette
Use the web palette for supporting elements, or in custom components where
appropriate. Access it with the govuk-colour function. By default the function
returns the primary variant; use the $variant option for tints and shades.
color: govuk-colour("blue"); // Primary blue #1d70b8color: govuk-colour("red", $variant: "tint-25"); // Red tint 25%color: govuk-colour("blue", $variant: "shade-50"); // Blue shade 50%