Designsystem.gov.scot uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve our websites. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.
beta
This is a new service. Your feedback will help us to improve it.
Style
Colour
Our brand colours and how to apply them
Using colour
The colour palette we use follows the wider branding of the Scottish Government. We also use colour to help users prioritise and differentiate information. For example:
yellow for our focus states
red as a warning colour
green to confirm something
If your service or site is going to be a subdomain of either gov.scot or mygov.scot, for example newservice.gov.scot, then our colour palette is the one you should use.
Colour contrast
Good colour contrast uses a dark colour on a light background, or a light colour on a dark background. It’s important that the contrast ratio of text and interactive elements on public sector sites meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1). We’ve tested colours in our colour palette to ensure the palette meets these standards.
Our colour palette
Brand
SCSS variable
Hex code
$ds_colour__brand
#0065bd
$ds_colour__brand--secondary
#002d54
Text
SCSS variable
Hex code
$ds_colour__text
#333333
$ds_colour__text--secondary
#727272
Links
SCSS variable
Hex code
$ds_colour__link
#0065bd
$ds_colour__link--hover
#00437e
$ds_colour__link--hover__background
#d9effc
$ds_colour__link--current
#333333
$ds_colour__link--current__background
#f8f8f8
Focus
SCSS variable
Hex code
$ds_colour__link--focus
#333333
$ds_colour__link--focus__background
#fdd522
Positive and negative messaging
SCSS variable
Hex code
$ds_colour__state--negative
#d32205
$ds_colour__state--positive
#428542
Borders
SCSS variable
Hex code
$ds_colour__border
#b3b3b3
$ds_colour__border--dark
#333333
$ds_colour__border--light
#ebebeb
$ds_colour__border--highlight
#0065bd
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot