Color Styles
Base
These are base black and white color styles to quickly swap out if you need to.
White
#FFFFFF
Black
#111827
Carbon Black
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.
25
#FCFCFC
50
#FAFAFA
100
#F9F9F9
200
#F0F0F0
300
#BFBFBF
400
#898989
500
#646464
600
#4D4D4D
700
#383838
800
#272727
900
#181818
Primary
The primary color is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
25
#F8FCFA
50
#EAF6F0
100
#CDEADB
200
#B4DFC9
300
#B0DDC6
400
#A2D7BC
500
#69BF93
600
#4CB37E
700
#3A8860
800
#2E6B4C
900
#1B402D
Secondary
The secondary color is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
25
#F8FAFD
50
#EBEEF5
100
#D6DDEB
200
#AEBBD7
300
#8599C4
400
#5D77B0
500
#34559C
600
#2A447D
700
#1F335E
800
#15223E
900
#0A111F
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.
25
#FFFBFA
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
500
#F04438
600
#D92D20
700
#B42318
800
#912018
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.
25
#FFFCF5
50
#FFFAEB
100
#FEF0C7
200
#FEDF89
300
#FEC84B
400
#FDB022
500
#F79009
600
#DC6803
700
#B54708
800
#93370D
900
#7A2E0E
Success
Success colors communicate a positive action, postive 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.
25
#F6FEF9
50
#ECFDF3
100
#D1FADF
200
#A6F4C5
300
#6CE9A6
400
#32D583
500
#12B76A
600
#039855
700
#027A48
800
#05603A
900
#054F31