Base

These are base black and white color styles to quickly swap out if you need to.

AAA 21.1

White

#FFFFFF

AAA 21:1

Black

#000000

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.

AA 4.84

25

#FCFCFD

AA 4.73

50

#F9FAFB

AA 4.49

100

#F2F4F7

4.19

200

#EAECF0

1.48

300

#D0D5DD

2.58

400

#98A2B3

AA 4.95

500

#667085

AAA 7.65

600

#475467

AAA 10.41

700

#344054

AAA 14.74

800

#1D2939

AAA 17.79

900

#101828

Primary

The primary color is your "brand" 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

#FCFAFF

AA 6.16

50

#F9F5FF

AA 5.74

100

#F4EBFF

AA 4.93

200

#E9D7FE

1.70

300

#D6BBFB

2.49

400

#B692F6

3.33

500

#9E77ED

AA 4.96

600

#7F56D9

AA 6.63

700

#6941C6

AAA 8.67

800

#53389E

AAA 10.78

900

#42307D

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 8.70

800

#912018

AAA 9.86

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.40

700

#B54708

AAA 7.49

800

#93370D

AAA 9.48

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 7.67

800

#05603A

AAA 9.68

900

#054F31

Blueprint

These colors are to be used for Blueprint-related UI items. Orignally named Blue Dark

AA 6.01

25

#F5F8FF

AA 5.80

50

#EFF4FF

AA 4.82

100

#D1E0FF

3.93

200

#B2CCFF

2.23

300

#84ADFF

3.22

400

#528BFF

4.31

500

#2970FF

AA 5.43

600

#155EEF

AA 6.38

700

#004EEB

AAA 8.36

800

#0040C1

AAA 10.51

900

#00359E