Alpha

This is an alpha release of our documentation site. View the roadmap.

Colours

On this page

We use colour language to dictate what our digital colours are and how they should be used. Use the colour language for the purpose that is defined – for example, use ‘input-border-colour’ for form inputs.

The same colour is sometimes repeated because it’s used in different ways – for example, the ‘Important callout’ and ‘Error’ colour are both using the hex value #DF3034. This means we can change the ‘Important callout’ colour without affecting the ‘Error’ colour.

Brand

Brand colours are usually used in global components such as the global navigation to create a consistent look on the website.

Colour Variable Hex code
Colour
Brand primary
 		Variable $cads-language__brand-primary Hex code #004b88
Colour
Brand secondary
 		Variable $cads-language__brand-secondary Hex code #fcbb69

Text

There are 2 shades of text colour. Choose the colours carefully based on the importance of the information.

Colour Variable Hex code
Colour
Text
 		Variable $cads-language__text-colour Hex code #161616
Colour
Secondary text
 		Variable $cads-language__secondary-text-colour Hex code #4a4e4f

There are various colours for different interaction states. When different coloured backgrounds are used in designs, make sure the colour contrast ratio of all the interaction states meets at least 4.5:1 – this is the same for typography.

Colour Variable Hex code
Colour
Link
 		Variable $cads-language__link-colour Hex code #004b88
Colour
Visited
 		Variable $cads-language__link-visited-colour Hex code #8f3ea3
Colour
Hover
 		Variable $cads-language__link-hover-colour Hex code #012760
Colour
Hover background
 		Variable $cads-language__hover-background-colour Hex code #f2f8ff
Colour
Active
 		Variable $cads-language__link-active-colour Hex code #4a4e4f

Focus

Colour Variable Hex code
Colour
Link
 		Variable $cads-language__focus-colour Hex code #ffd250
Colour
Focus text
 		Variable $cads-language__focus-text-colour Hex code #161616

Border

Use the ‘Input border’ for interactive elements like input boxes so it meets the contrast ratio of 3:1. ‘Border’ is usually used for decorative lines and dividers.

Colour Variable Hex code
Colour
Input border
 		Variable $cads-language__input-border-colour Hex code #8d9093
Colour
Border
 		Variable $cads-language__border-colour Hex code #4a4e4f

Buttons

Colour Variable Hex code
Colour
Button
 		Variable $cads-language__primary-button-colour Hex code #018176
Colour
Button hover
 		Variable $cads-language__primary-button-hover-colour Hex code #006159

Adviser

Only use ‘Adviser’ colours for adviser-related components, like ‘Adviser callout’. This is also the brand colour for AdviserNet.

Colour Variable Hex code
Colour
Adviser
 		Variable $cads-language__brand-adviser Hex code #006278

Accessibility

In order to meet level AA of WCAG 2.1, make sure the colour contrast ratio meets:

  • 4.5:1 for typography
  • 3:1 for interactive elements

Don’t use colour alone to communicate information. This means users who can’t see colours, or who have difficulty telling different colours apart, have some other way to do so.

Implementation

Use the sass variables instead of the hex codes. This means you’ll always be using the most recent colour palette. Only use the sass variables in the context they’re designed for. Otherwise, use the colour palette.