Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Primary colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
A
Fail
A
Pass
Name
Dark
Hex
#090909
A
Fail
A
Pass
Name
White
Hex
#FFFFFF
A
Fail
A
Pass
Name
Primary
Hex
#3066FF
A
Fail
A
Pass
Name
Secondary
Hex
#393B3D
A
Fail
A
Pass
Name
Info
Hex
#17A2B8
A
Fail
A
Pass
Name
Success
Hex
#12A366
A
Fail
A
Pass
Name
Danger
Hex
#DC3545
A
Fail
A
Pass
Name
Warning
Hex
#FFC107
A
Fail
A
Pass
Name
Purple
Hex
#8B5CF6
Light neutrals
Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.
| Gray 100 |
Hex
#F9FAFB
|
| Gray 200 |
Hex
#E9ECEF
|
| Gray 300 |
Hex
#DDE0E5
|
| Gray 400 |
Hex
#CED4DA
|
| Gray 500 |
Hex
#ADB5BD
|
| Gray 600 |
Hex
#6C757D
|
| Gray 700 |
Hex
#495057
|
| Gray 800 |
Hex
#343A40
|
| Gray 900 |
Hex
#212529
|