Styles menu
Colour
The Design Standard brand colours meet accessible colour contrast standards.
How to use the colours
If you are building online services you 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
Main colours
Brand
--scottish-teal
#016574
--verdant-green
#40c47b
--scottish-dark-teal
#012b31
Text
--grey-one
#585856
Links
color: --scottish-dark-teal
#012b31
border-bottom: 2px solid --grey-one
#585856
Hover
color: --black
#000000
background-color: --grey-three
#dfdfdf
Focus
color: --black
#000000
background-color: --verdant-green
#40c47b
Extended palette
If using the extendend palette always consult the brand guidelines for allowed colour combinations.
--orange
#ff732b
--yellow
#fdc443
--ash
#2a8451
--blue
#037CB0
--purple
#c14090
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.