Skip to the main content


Colors

These are the predefined colors used throughout our patterns. Each color is displayed on various background colors for easy combinations. Those colors which have a yellow warning icon are not accessible combinations and should be avoided. For example, our grayscale below does not provide enough contrast on a white background (nor white on the gray background). Click any color for more information and developer values.

Colors Preview

Base Palette

primary
secondary
gray

Brand Primary

dark
base
accent
back
x-back
dark
base
accent
back
x-back
white
dark
base
accent
back
x-back

Brand Secondary

dark
base
accent
back
x-back
dark
base
accent
back
x-back
white
dark
base
accent
back
x-back

Brand Gray

dark
base
accent
back
x-back
dark
base
accent
back
x-back
white

Success

text
accent
back
white

Error

text
accent
back
white

Warning

accent
back
white