Colour

Colours are used to create a visual hierarchy and help guide users throughout the website and application.

Colour palette

Primary colours


100 #ECE6FB AAA	200 #CFCBFD AAA	300 #A29BFB AAA	400 #7857FF AA	500 #5925DC AAA	600 #491DB6 AAA	700 #39178E AAA

Secondary colours


100 #EBF1FF AAA	200 #D3E2FF AAA	300 #99BBFF AAA	400 #70A0FF AA	500 #1F69FF AAA	600 #004FF0 AAA	700 #0040C2 AAA

Greys


100 #F7F7F9 AAA	200 #E4E7EC AAA	300 #D0D5DD AAA	400 #98A2B3 AA	500 #667085 AAA	600 #344054 AAA	700 #1D2939 AAA

System blue


100 #E6F3FB AAA	400 #58A1D4 AAA	600 #0F71BB AA

System amber


100 #FFFAEB AAA	400 #FEC84B AAA	600 #F79009 AAA

System green


100 #ECFBEE AAA	400 #58BE62 AAA	600 #0A8217 AAA

System red


100 #FFF4F3 AAA	400 #FB7463 AAA	600 #D7260F AAA

Foreground text and background colours must have a minimum level of contrast between them (with exception for disabled elements)

SGDS follows the level AA of the Web Content Accessibility Guidelines (WCAG 2.0) guidelines to ensure proper colour contrast.

Passing level and contrast ratio

Fail : Your text does not have enough contrast with the background
AA Large : Acceptable contrast for type sizes >= 19px bold or 24px regular and above
AA : Acceptable contrast for text sizes below 19px
AAA : Enhanced contrast

Here are some general guidelines for using the colour palette

Blue : Used to display general information that has a neutral meaning
Amber : Indicates attention is required.
Green : Used to communicate success states.
Red : Used to communicate problems that requires attention.
Purple : Is not assigned meaning in the same way the other chromatic hues are, and instead is associated with the SGDS brand and is used for things like illustrations.
Grey : The neutral palette is primarily as font colours. It can also be used as backgrounds, borders, and shadows to emphasize areas or set them apart.

Last updated 22 November 2023