Style Guide
DriverDX is a public benefit company.
Color Styles
Primary Color Variants
This color should be displayed most frequently and be used for important actions
Primary - 500
Hax - #347362
Primary - 400
Hax - #5D8F81
Primary - 300
Hax - #85ABA1
Primary - 200
Hax - #AEC7C0
Primary - 100
Hax - #D6E3E0
Secondary Color Variants
This color should be applied sparingly to highlight information and background.
Secondary - 500
Hax - #EF8450
Secondary - 400
Hax - #F29D73
Secoundary - 300
Hax - #F5B596
Secoundary - 200
Hax - #F9CEB9
Secoundary - 100
Hax - #FCE6DC
Dark Color Variants
This color should be used for text.
Dark - 500
Hax - #10393B
Dark - 400
Hax - #406162
Dark - 300
Hax - #708889
Dark - 200
Hax - #9FB0B1
Dark - 100
Hax - #CFD7D8
White Color Variants
This color should be used for text and background.
White - 500
Hax - #F5F3EE
White - 400
Hax - #F7F5F1
White - 300
Hax - #F9F8F5
White - 200
Hax - #FDFDFC
White - 100
Hax - #FFFFFF
Green Color Variants (Success)
This color should be used to show positive feedback or status.
Green - 500
Hax - #3EBE8A
Green - 400
Hax - #65CBA1
Green - 300
Hax - #8BD8B9
Green - 200
Hax - #B2E5D0
Green - 100
Hax - #D8F2E8
Yellow Color Variants (Warning)
This color should be used to show warning feedback or status.
Yellow - 500
Hax - #FFCB3D
Yellow - 400
Hax - #FFD564
Yellow - 300
Hax - #FFE08B
Yellow - 200
Hax - #FFEAB1
Yellow - 100
Hax - #FFF5D8
Red Color Variants (Error)
This color should be used to show negative feedback or status.
Red - 500
Hax - #F25E3A
Red - 400
Hax - #F57E61
Red - 300
Hax - #F79E89
Red - 200
Hax - #FABFB0
Red - 100
Hax - #FCDFD8