Color System
Primary
These are the splashes of color that should appear the most in your UI, and are the ones that determine the overall "look" of the site. Use these for things like primary actions, links, navigation items, icons, accent borders, or text you want to emphasize.
900
800
700
600
500
400
300
200
100
50
900
800
700
600
500
400
300
200
100
50
Neutrals (Under construction)
These are the colors you will use the most and will make up the majority of your UI. Use them for most of your text, backgrounds, and borders, as well as for things like secondary buttons and links.
900
800
700
600
500
400
300
200
100
Supporting (Under construction)
These colors should be used fairly conservatively throughout your UI to avoid overpowering your primary colors. Use them when you need an element to stand out, or to reinforce things like error states or positive trends with the appropriate semantic color.
900
800
700
600
500
400
300
200
100
900
800
700
600
500
400
300
200
100