Color
The color system is designed to ensure accessible color contrast between text/icons and backgrounds. All of the colors are baked into component and utility classes, so you should never need to manually use a color value from the color palette.
- Contrast Grid allows you to see each color’s contrast when paired with other colors in the palette at a glance.
Color Palette
Primary
-
black
backgrounds
#0E032A -
white
backgrounds, strong text, buttons
#FAF9FD -
indigo
links, strong text, buttons
#3B1B89 -
purple-200
backgrounds, links
#AE45FE -
purple-400
backgrounds, links
#9B20F9 -
yellow
buttons
#EDE767
Secondary
-
green
accent
#1FD27C -
orange
accent
#DE8E73 -
blue
accent
#3D8DDF
Neutral
-
gray-100
#E9E7ED -
gray-200
#9A91B1 -
gray-300
#78757f -
gray-400
#615384 -
gray-700
#443960