Colour
Colours are used to create a visual hierarchy and help guide users throughout the website and application.
Colour palette
Brand colours
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 |
Font colours
Greys
| 100 #F7F7F9 AAA |
200 #E4E7EC AAA |
300 #D0D5DD AAA |
400 #98A2B3 AA |
500 #667085 AAA |
600 #344054 AAA |
700 #1D2939 AAA |
System colours
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 |
Usability guidelines
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 23 May 2024
