Colors
Complete system
Our color system includes of 7 hues (including grey), each consisting of 10 shades. The scale goes from the numbers 10-100. Each color in the scale is named according to the scheme {color}-{number}, such as orange-50.
blue-10
blue-20
blue-30
blue-40
blue-50
blue-60
blue-70
blue-80
blue-90
blue-100
green-10
green-20
green-30
green-40
green-50
green-60
green-70
green-80
green-90
green-100
grey-10
grey-20
grey-30
grey-40
grey-50
grey-60
grey-70
grey-80
grey-90
grey-100
orange-10
orange-20
orange-30
orange-40
orange-50
orange-60
orange-70
orange-80
orange-90
orange-100
purple-10
purple-20
purple-30
purple-40
purple-50
purple-60
purple-70
purple-80
purple-90
purple-100
red-10
red-20
red-30
red-40
red-50
red-60
red-70
red-80
red-90
red-100
teal-10
teal-20
teal-30
teal-40
teal-50
teal-60
teal-70
teal-80
teal-90
teal-100
Recommended colors
It's not likely that you'll use all colors in a given scale however. These are recommended, safe colors, included in the Lookbook CSS:
Also see "Variables" if you'd like to use the colors as CSS Custom Properties.