Color
Color is used to help communicate the purpose and heirarchy of content.
Gray
-
Gray 900
#282A30 -
Gray 800
#3D4148 -
Gray 700
#6C6F75 -
Gray 600
#91959C -
Gray 500
#C9CBCD -
Gray 400
#DFE1E4 -
Gray 300
#EFF1F4 -
Gray 200
#F4F5F8 -
Gray 100
#F8F9FB -
White
#FFFFFF
Blue
-
Blue 700
#1D51D7 -
Blue 600
#3365E4 -
Blue 500
#4570E0 -
Blue 400
#B9CCF8 -
Blue 300
#D4E0FF -
Blue 200
#E5ECFF -
Blue 100
#EFF3FF
Green
-
Green 500
#367642 -
Green 400
#4A8F5D -
Green 300
#6AB586 -
Green 200
#F0FCEC -
Green 100
#123456
Yellow
-
Yellow 500
#996500 -
Yellow 400
#DEA206 -
Yellow 300
#F0C11C -
Yellow 200
#FFF4C3 -
Yellow 100
#FFF9DD
Orange
-
Orange 500
#B54900 -
Orange 400
#D36E29 -
Orange 300
#E59C59 -
Orange 200
#FFE8CC -
Orange 100
#FFF3E5
Red
-
Red 500
#C72D2D -
Red 400
#DE605B -
Red 300
#ED9591 -
Red 200
#FDE5DB -
Red 100
#FEF2ED