Colour

About the Design System colours  

The Design System colours are the:  

• main colours for components, patterns and other elements 
• extended palette for creating supporting images, like illustrations 
• data visualisation colour palettes for charts and graphs 

The default colours of patterns and components meet accessible colour contrast standards.  

How to use the Design System colours

Scottish Government directorates and policy areas that are building online services are expected to: 

• apply components and patterns in their default colours 
• use the main colours for text, links and other elements 
• use the extended palette for supporting images, like illustrations 
• use the data visualisation colour palettes for charts and graphs 

Some organisations can choose to use the Design System’s colours or express a brand identity by either: 

• using the Design System’s defined colours with their organisational logo or campaign sub-brand 
• adapting the Design System colours to align with their organisational or sub-brand colour palette

Main colours

Brand

Colour	SCSS variable	Hex code
Brand	$ds_colour__brand	#0065bd
Secondary brand	$ds_colour__brand--secondary	#002d54

Text

Colour	SCSS variable	Hex code
Text	$ds_colour__text	#333333
Secondary text	$ds_colour__text--secondary	#727272

Links

Colour	SCSS variable	Hex code
Link	$ds_colour__link	#0065bd
Link hover	$ds_colour__link--hover	#00437e
Hover background	$ds_colour__link--hover__background	#d9effc
Current/selected link	$ds_colour__link--current	#333333
Current/selected link background	$ds_colour__link--current__background	#f8f8f8

Focus

Colour	SCSS variable	Hex code
Focus	$ds_colour__focus	#333333
Focus background	$ds_colour__focus--background	#fdd522

Positive messaging

Colour	SCSS variable	Hex code
Positive	$ds_colour__state--positive	#428542

Negative messaging

Colour	SCSS variable	Hex code
Negative	$ds_colour__state--negative	#d32205

Borders

Colour	SCSS variable	Hex code
Border	$ds_colour__border	#b3b3b3
Dark border	$ds_colour__border--strong	#333333
Light border	$ds_colour__border--faint	#ebebeb
Highlighted border	$ds_colour__border--highlight	#0065bd

Backgrounds

Colour	SCSS variable	Hex code
Primary background	$ds_colour__background--primary	#ffffff
Secondary background	$ds_colour__background--secondary	#f8f8f8
Tertiary background	$ds_colour__background--tertiary	#ebebeb

Extended palette

Use the extended palette to create supporting images, like illustrations. Read more about when to use illustrations and other images. 

You can use tints and shades of these colours in 10% increments.  

Colour	SCSS variable	Hex code
Green	$ds_colour__green	#5eb135
Dark green	$ds_colour__dark-green	#428542
Teal	$ds_colour__teal	#28a197
Dark teal	$ds_colour__dark-teal	#017878
Light blue	$ds_colour__blue--light	#d9effc
Blue	$ds_colour__blue	#0065bd
Dark blue	$ds_colour__blue--dark	#00437e
Darker blue	$ds_colour__blue--darker	#002d54
Purple	$ds_colour__purple	#912688
Pink	$ds_colour__pink	#e5007e
White	$ds_colour__white	#ffffff
Lighter grey	$ds_colour__grey--lighter	#f8f8f8
Light grey	$ds_colour__grey--light	#ebebeb
Medium grey	$ds_colour__grey--medium	#b3b3b3
Grey	$ds_colour__grey	#727272
Dark grey	$ds_colour__grey--dark	#333333
Black	$ds_colour__black	#000000
Red	$ds_colour__red	#d32205
Brown	$ds_colour__brown	#592c20
Orange	$ds_colour__orange	#f47738
Yellow	$ds_colour__yellow	#fdd522

Adapting the Design System colours 

If you’re working with the Design System's SCSS, you can override the brand colour used across Design System components and patterns by specifying your own value for $ds_colour__brand.

Do this before you import the rest of the Design System's SCSS into your project's main SCSS file. 

The following example shows the SCSS code to change the brand blue of components and patterns, #0065bd, to deep pink. 

$ds_colour__brand: #ff1493; 

@import "/path/to/base/all-base"; 
@import "/path/to/forms/all-forms"; 
@import "/path/to/components/all-components"; 

If you adapt the colours, you must still:  

• use the Design System’s main colours for focus states  
• use colours in a consistent way throughout your service – for example, use the same colour for primary buttons  
• meet colour contrast standards for accessibility 

You should also: 

• ensure colour palettes are well-defined and maintained by designers 
• do usability and accessibility testing with service users 

Colour contrast for accessibility 

The contrast ratio of text and interactive elements must be at least 4.5:1 to meet the Web Content Accessibility Guidelines (WCAG) 2.2 contrast success criterion. 

Check contrast with the webAIM colour contrast checker.  

Components and patterns in the Design System have been designed to meet the colour contrast standards if implemented in their default colours.