A set of color tokens and usage rules to keep the UI consistent across screens. Includes primary, secondary, neutrals, and semantic colors with recommended states.
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.
25
#FDFDFD
50
#FAFAFA
100
#F5F5F5
200
#E9EAEB
300
#D5D7DA
400
#A4A7AE
500
#717680
600
#535862
700
#414651
800
#252B37
900
#181D27
950
#0A0D12
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.
25
#FCFAFF
50
#F9F5FF
100
#F4EBFF
200
#E9D7FE
300
#D6BBFB
400
#B692F6
500
#9E77ED
600
#7F56D9
700
#6941C6
800
#53389E
900
#42307D
950
#2C1C5F
Primary Colors
These are the main colors that make up the majority of the colors used in the design system.
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
Primary Colors
These are the main colors that make up the majority of the colors used in the design system.
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
25
#FDFDFD
Primary Colors
These are the main colors that make up the majority of the colors used in the design system.