Style guide

Colors & effects

Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.1 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.

Get Untitled UI

Client-first docs

Colors

Primary colors

These are the main colors that make up the majority of the colors used in the design system.

Gray (neutral)

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.

gray25

gray50

gray100

gray200

gray300

gray400

gray500

gray600

gray700

gray800

gray900

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.

primary25

primary50

primary100

primary200

primary300

primary400

primary500

primary600

primary700

primary800

primary900

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.

error25

error50

error100

error200

error300

error400

error500

error600

error700

error800

error900

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.

warning25

warning50

warning100

warning200

warning300

warning400

warning500

warning600

warning700

warning800

warning900

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.

success25

success50

success100

success200

success300

success400

success500

success600

success700

success800

success900

Secondary colors

Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.

indigo25

indigo50

indigo100

indigo200

indigo300

indigo400

indigo500

indigo600

indigo700

indigo800

indigo900

blue25

blue50

blue100

blue200

blue300

blue400

blue500

blue600

blue700

blue800

blue900

pink25

pink50

pink100

pink200

pink300

pink400

pink500

pink600

pink700

pink800

pink900

orange25

orange50

orange100

orange200

orange300

orange400

orange500

orange600

orange700

orange800

orange900

Add pre-made color samples
Get access to pre-made color samples and paste them below.

View color samples

Click and paste color samples (optional)

Background colors

.background-color-white

.background-color-gray800

.background-color-gray50

.background-color-gray100

.background-color-primary50

.background-color-primary100

.background-color-primary200

.background-color-primary300

Add pre-made background colors
Get access to pre-made background colors and paste them below.

View background colors

Click and paste background colors (optional)

Text colors

text-color-white

text-color-gray25

text-color-gray50

text-color-gray100

text-color-gray200

text-color-gray300

text-color-gray400

text-color-gray500

text-color-gray600

text-color-gray700

text-color-gray800

text-color-gray900

text-color-primary25

text-color-primary50

text-color-primary100

text-color-primary200

text-color-primary300

text-color-primary400

text-color-primary500

text-color-primary600

text-color-primary700

text-color-primary800

text-color-primary900

Add pre-made text colors
Get access to pre-made text colors and paste them below.

View text colors

Click and paste Text Colors (optional)

Effects

Box shadows

Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

shadow-xxsmall

Shadow xs in Figma.

shadow-xsmall

Shadow sm in Figma.

shadow-small

Shadow md in Figma.

shadow-small

Shadow lg in Figma.

shadow-large

Shadow xl in Figma.

shadow-xlarge

Shadow 2xl in Figma.

shadow-xxlarge

Shadow 3xl in Figma.