Colour customisation

Creating a customised colour scheme using our extended palette.

The extended palette

Our extended colour palette has 12 colours. You can use these to customise colour schemes for graphical elements. Your elements will then fit with the other Design System components and styling.

Doing this will help you create unique, but recognisable, marketing and communications campaigns.

The extended palette has 2 colours in the primary palette and 10 colours in the secondary palette.

Primary palette

SCSS variable	Hex code
$ds_colour__brand	#0065bd
$ds_colour__brand--secondary	#002d54

Secondary palette

SCSS variable	Hex code
$ds_colour__dark-teal	#017878
$ds_colour__teal	#28a197
$ds_colour__dark-green	#428542
$ds_colour__green	#5eb135
$ds_colour__yellow	#fdd522
$ds_colour__orange	#f47738
$ds_colour__red	#d32205
$ds_colour__pink	#e5007e
$ds_colour__purple	#912688
$ds_colour__brown	#592c20

Creating a customised colour palette

You can create custom palettes using the primary and secondary palettes. Customised palettes can include a maximum of 3 or 4 colours in total.

All custom colour palettes:

• must include the 2 blues from the primary palette to ensure a natural fit with the rest of the design
• can have 1 or 2 colours from the secondary palette

Example 3 colour palette

Example 4 colour palette

You can also add to the 3 or 4 selected palette colours:

• tints of colours from the secondary palette colours used
• any neutrals (white, black and greys)
• highlight colours drawn from the wider secondary palette to meet a specific need – for example, to represent skin tones or to include an item that has a specific colour, such as a stop sign

How to use a custom palette

You can use custom palette colours in the graphical elements of a website to create a unique and identifiable design. Graphical elements include any:

• illustrations
• imagery
• charts
• graphs
• infographics
• animations

You should use all elements taken from the Design System without making any changes to the colour, including:

• components
• typography
• spacing
• interactive states

As all custom palettes include core colours from the Design System, our elements will match your custom palette without the need to change any CSS.

Accessible use of colour

Graphical elements using the custom colour palettes should conform to level AA of the Web Content Accessibility Guidelines (WCAG 2.1). This includes making sure that there is enough contrast for users to be able to identify the key elements of the design.

You can check the contrast to see if colour combinations meet the required standards.

Graphical elements should avoid the inclusion of text unless purely for decoration. Any text included which is essential to content will need to be accessible to assistive technology.

All graphics should include a meaningful alt attribute describing the content.

You will need to include an accessible alternative (such as a transcript) for any text or narrated content in:

• animations
• motion graphics
• film clips

We designed all our elements to conform to Web Content Accessibility Guidelines.

Using the Design System with custom graphical elements will help public sector websites and services meet the required accessibility standards.

Research

We reviewed 7 design systems from a mix of public and private sector organisations.

To inform our development process, we looked at existing colour models of the Design System including the:

• palette ranges
• colour selections
• compositions

Rather than selecting new colours we based the secondary palette on a range of colours already widely in use. We then added some custom colours to address specific needs.