Colors

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.

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD

25

#FDFDFD