Vue 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
Primary
Hex
#007bff
A
Fail
A
Pass
Name
Info
Hex
#17a2b8
A
Fail
A
Pass
Name
Success
Hex
#28a745
A
Fail
A
Pass
Name
Danger
Hex
#dc3545
A
Fail
A
Pass
Name
Warning
Hex
#ffc107
A
Fail
A
Pass
Name
Default
Hex
#ffc107
A
Fail
A
Pass
Name
Secondary
Hex
#f4f5f7

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.

100
Hex
#f8f9fa
200
Hex
#ebedef
300
Hex
#ced3d8
400
Hex
#abb3bd
500
Hex
#7c8a99
600
Hex
#55626f
700
Hex
#4a5560
800
Hex
#384048
900
Hex
#131619