Colors & Shadows
Colors are identified first by type (action, ui, support, brand) and then with a number identifier which suggests how to use that swatch.
Examples & Guidelines
00
Common uses:
- Default
- Normal
01
Common uses:
- Hover
02
Common uses:
- Active
03
Common uses:
- Disabled
- Shadow
Action Colors
Only use to indicate which interface elements are actionable.
Focus
#49A1FF
Primary-00
#009F6F
Primary-01
#008B61
Primary-02
#00704F
Primary-03
#009F6F 35%
Secondary-00
#FFFFFF
Secondary-01
#ECF5F1
Secondary-02
#D5F0E5
Secondary-03
#FFFFFF 35%
UI Colors
Use for non-interactive text and background interface elements.
Shadow
#AAB7B2 60%
Light-00
#F6F8F6
Light-01
#D9E1E0
Light-02
#AAB7B2
Dark-00
#2B3836
Dark-01
#505958
Dark-02
#7C8C88
Dark-03
#2B3836 35%
Support Colors
Use to draw attention to a state or change in the application.
Danger-00
#EB5534
Danger-01
#DB5030
Danger-02
#AD4626
Danger-03
#EB5534 35%
Warning
#FDB100
Success
#39CF94
Information
#6F6BF8
Brand Colors
Use sparingly for emphasis, large headings, and to grab attention.
Brand-00
#A2FFBB
Brand-01
#00FF44