Skip to main content

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Primary Color Palette

Name	900
Type	Primary
HEX	`#11642D`
CSS Variable	`var(--color-primary-900)`
Usage

Name	800
Type	Primary
HEX	`#238440`
CSS Variable	`var(--color-primary-800)`
Usage

Name	700
Type	Primary
HEX	`#2C954B`
CSS Variable	`var(--color-primary-700)`
Usage

Name	600
Type	Primary
HEX	`#37A857`
CSS Variable	`var(--color-primary-600)`
Usage

Name	500
Type	Primary
HEX	`#3FB760`
CSS Variable	`var(--color-primary-500)`
Usage	Base color

Name	400
Type	Primary
HEX	`#5EC279`
CSS Variable	`var(--color-primary-400)`
Usage

Name	300
Type	Primary
HEX	`#7CCD90`
CSS Variable	`var(--color-primary-300)`
Usage

Name	200
Type	Primary
HEX	`#A2DBB0`
CSS Variable	`var(--color-primary-200)`
Usage

Name	100
Type	Primary
HEX	`#C6E9CE`
CSS Variable	`var(--color-primary-100)`
Usage

Name	50
Type	Primary
HEX	`#E7F6EB`
CSS Variable	`var(--color-primary-50)`
Usage

Name	25
Type	Primary
HEX	`#F1F9F3`
CSS Variable	`var(--color-primary-25)`
Usage

Accent Color Palette

Name	900
Type	Accent
HEX	`#0A179E`
CSS Variable	`var(--color-accent-900)`
Usage

Name	800
Type	Accent
HEX	`#1E2EB6`
CSS Variable	`var(--color-accent-800)`
Usage

Name	700
Type	Accent
HEX	`#2939C2`
CSS Variable	`var(--color-accent-700)`
Usage

Name	600
Type	Accent
HEX	`#3143D0`
CSS Variable	`var(--color-accent-600)`
Usage

Name	500
Type	Accent
HEX	`#364BDA`
CSS Variable	`var(--color-accent-500)`
Usage	Base color

Name	400
Type	Accent
HEX	`#5365E4`
CSS Variable	`var(--color-accent-400)`
Usage

Name	300
Type	Accent
HEX	`#7182F1`
CSS Variable	`var(--color-accent-300)`
Usage

Name	200
Type	Accent
HEX	`#96A4FF`
CSS Variable	`var(--color-accent-200)`
Usage

Name	100
Type	Accent
HEX	`#C3C9FF`
CSS Variable	`var(--color-accent-100)`
Usage

Name	50
Type	Accent
HEX	`#E8EAFF`
CSS Variable	`var(--color-accent-50)`
Usage

Name	25
Type	Accent
HEX	`#F1F2FF`
CSS Variable	`var(--color-accent-25)`
Usage

Name	12
Type	Accent
HEX	`#F7F7FF`
CSS Variable	`var(--color-accent-12)`
Usage

Extended Color Palette

Name	900
Type	Neutral
HEX	`#212121`
CSS Variable	`var(--color-neutrals-900)`
Usage

Name	800
Type	Neutral
HEX	`#424242`
CSS Variable	`var(--color-neutrals-800)`
Usage

Name	700
Type	Neutral
HEX	`#616161`
CSS Variable	`var(--color-neutrals-700)`
Usage

Name	600
Type	Neutral
HEX	`#757575`
CSS Variable	`var(--color-neutrals-600)`
Usage

Name	500
Type	Neutral
HEX	`#9e9e9e`
CSS Variable	`var(--color-neutrals-500)`
Usage

Name	400
Type	Neutral
HEX	`#bdbdbd`
CSS Variable	`var(--color-neutrals-400)`
Usage

Name	300
Type	Neutral
HEX	`#e0e0e0`
CSS Variable	`var(--color-neutrals-300)`
Usage

Name	200
Type	Neutral
HEX	`#eeeeee`
CSS Variable	`var(--color-neutrals-200)`
Usage

Name	100
Type	Neutral
HEX	`#f5f5f5`
CSS Variable	`var(--color-neutrals-100)`
Usage

Name	50
Type	Neutral
HEX	`#fafafa`
CSS Variable	`var(--color-neutrals-50)`
Usage

Color Crimes

Don't

Use unapproved colors.