Base
This is a neutral colour that will be used for texts, borders, fills and other generic elements
900
800
700
600
500
400
300
200
100
50
25
0
Primary
This is your brand color that will shape alot of the accents around the website
900
800
700
600
500
400
300
200
100
50
25
Secondary
These are your support colors that will shape some more accents
500
500
100
Functional
Colors for states and overlays
Success
Warning
Error
Overlay
Overlay White