Color palette
To avoid specifying color values by hand, we've included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.
Stops
Theme primary
theme-primary
theme-primary-100
theme-primary-200
theme-primary-300
theme-primary-400
theme-primary-500
theme-primary-600
Theme secondary
theme-secondary
theme-secondary-100
theme-secondary-200
theme-secondary-300
theme-secondary-400
theme-secondary-500
theme-secondary-600
Orange
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
Blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
Green
green-100
green-200
green-300
green-400
green-500
green-600
Red
red-100
red-200
red-300
red-400
red-500
red-600
Yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
Purple
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
Pink
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
Black
black-050
black-100
black-150
black-200
black-225
black-250
black-300
black-350
black-400
black-500
black-600
black
White
white
Brand
Please see the brand guidelines for color use, these should not be used without prior direction from the brand team.
brand
brand-black
brand-off-white
brand-blue-light
brand-blue
brand-blue-dark
brand-brown-light
brand-green
brand-green-dark
brand-orange-medium
brand-orange-dark
brand-pink
brand-pink-dark
brand-purple
brand-purple-dark
brand-yellow
brand-yellow-dark