To use a color variable in a component, use the prefix $color- in front of the name of the color displayed in the relevant swatches below.

For example: background-color: $color-darkest-blue;

Grays

black
white


lightest-gray
light-gray
gray
dark-gray
darkest-gray

Blues

lightest-blue
light-blue
blue
dark-blue
darkest-blue

Reds

lightest-red
light-red
red
dark-red
darkest-red

State colors

danger
caution
success