Styles
-
Colour
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Brand colours
Use these colours for headings, icons, or in custom components where appropriate.
$color_hs2-blue |
#1E3773 |
$color_hs2-cyan |
#2079C6 |
$color_hs2-pink |
#A8518A |
$color_hs2-green |
#268716 |
$color_hs2-amber |
#B36100 |
$color_hs2-red |
#B9192D |
Secondary
Use these colours for supporting materials like illustrations, or in custom components where appropriate.
$color_hs2-purple |
#4C2C92 |
$color_hs2-dark-blue |
#051B5C |
$color_hs2-yellow |
#FFDD00 |
$color_hs2-pale-yellow |
#FFF9C4 |
$color_hs2-aqua |
#00A499 |
Text
$color_hs2-text
|
#212B32
|
$color_hs2-text-light
|
#4C6272
|
Links
$color_hs2-link
|
#2079C6
|
$color_hs2-visited
|
#330072
|
$color_hs2-hover
|
#7C2855
|
$color_hs2-active
|
#002F5C
|
Border
$color_hs2-border
|
#D8DDE0
|
$color_hs2-border-input
|
#4C6272
|
Focus state
$color_hs2-focus-yellow
|
#FFDD00
|
$color_hs2-focus-text
|
#0B0C0C
|
Error state
Success state
$color_hs2-success
|
#00703C
|
Neutrals
$color_hs2-black
|
#222222
|
$color_hs2-grey-1
|
#4C6272
|
$color_hs2-grey-2
|
#768692
|
$color_hs2-grey-3
|
#AEB7BD
|
$color_hs2-grey-4
|
#D8DDE0
|
$color_hs2-grey-5 |
#F0F4F5 |
$color_hs2-white |
#FFFFFF |
