Primary colors
These are the main colors that make up the majority of the colors used in the design system.
Gray
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
AAA 7.49
25
#FCFCFD
AAA 7.35
50
#F9FAFB
AA 6.97
100
#F2F4F7
AA 7.68
200
#E4E7EC
1.48
300
#D0D5DD
2.58
400
#98A2B3
AA 4.95
500
#667085
AAA
600
#475467
AAA
700
#344054
AAA
800
#1D2939
AAA
900
#101828
Brand
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
AA 6.39
25
#F3F8FE
AA 6.16
50
#EFF8FF
AA 5.74
100
#D1E9FF
AA 4.93
200
#B2DDFF
1.70
300
#84CAFF
2.49
400
#53B0FD
3.33
500
#2E90FA
AA 4.96
600
#156FEE
AA 6.63
700
#175CD3
AAA
800
#1849A9
AAA
900
#194084
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
AA 6.4
25
#FFFBFA
AA 6.06
50
#FEF3F2
AA 5.4
100
#FEE4E2
AA 4.56
200
#FECDCA
1.95
300
#FDA29B
2.78
400
#F97066
3.76
500
#F04438
AA 4.82
600
#D92D20
AA 6.60
700
#B42318
AAA
800
#912018
AAA
900
#7A271A
Warning
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
AA 5.28
25
#FFFCF5
AA 5.17
50
#FFFAEB
AA 4.75
100
#FEF0C7
4.15
200
#FEDF89
1.54
300
#FEC84B
1.84
400
#FDB022
2.34
500
#F79009
3.49
600
#DC6803
AA 5.4
700
#B54708
AAA
800
#93370D
AAA
900
#7A2E0E
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
AA 5.31
25
#F6FEF9
AA 5.17
50
#ECFDF3
AA 4.79
100
#D1FADF
4.24
200
#A6F4C5
1.52
300
#6CE9A6
1.91
400
#32D583
2.63
500
#12B76A
3.74
600
#039855
AA 5.44
700
#027A48
AAA
800
#05603A
AAA
900
#054F31