Colors

The color suite is based around a 4 color system, but can accommodate bonus colors at the end of the palette. The Hi & Lo variations are used in hover & pressed states on links & buttons. Class names are not intended to be changed. Customization of colors should be done by editing the color palette, rather than the classes, to avoid breaking how the colors are mapped to elements.

Background - Primary Hi
Background - Primary
Background - Primary Lo
Background - Secondary Hi
Background - Secondary
Background - Secondary Lo
Background - Tertiary Hi
Background - Tertiary
Background - Tertiary Lo
Background - Quaternary Hi
Background - Quaternary
Background - Quaternary Lo
Background - Black Hi
Background - Black
Background - Black Lo
Background - White Hi
Background - White
Background - White Lo
Background - Neutral 1
Background - Neutral 2
Background - Neutral 3
Background - Neutral 4
Background - Neutral 5
Background - Neutral 6
Background - Bonus 1
Background - Bonus 2
Background - Bonus 3
Text - Primary
This is some text inside of a div block.
Text - Secondary
This is some text inside of a div block.
Text - Tertiary
This is some text inside of a div block.
Text - Quaternary
This is some text inside of a div block.
Text - Black
This is some text inside of a div block.
Text - White
This is some text inside of a div block.