Colors
Our diverse palette of colors are used throughout our products. Color tiles with a badge pass accessability guidelines and are acceptable for use as a text color.
Need the HEX code for a color? Click a tile and the color will be copied to your clipboard, nice!
Brand
EV-green
PW-lime
PW-lemon
CX-blue
TH-yellow
TH-brown
TH-tan
UI
base
contrast
State
success
warn
error
Secondary
blueberry
blush
forest
gold
grape
mint
navy
plum
rose
soil
slate
teal
terracotta
Classes
Background
We can affect the background-color property of any
element by passing this class with one of the above colors. Below are
a few examples:
.color__bg--CX-blue.color__bg--TH-yellow.color__bg--mintBorder
We can affect the border-color property of any element by
passing this class with one of the above colors. Below are a few
examples:
.color__border--CX-blue.color__border--TH-yellow.color__border--mintType
We can affect the color property of any element by
passing this class with one of the above colors. Below are a few
examples:
.color__type--CX-blue The quick brown fox jumps over the lazy dog
.color__type--base--ish The quick brown fox jumps over the lazy dog
.color__type--success The quick brown fox jumps over the lazy dog