Skip to main content

Colors

Primary Color Palette

Name	Primary
Type	Primary
HEX	`#5CBBAC`
CSS Variable	`var(--primary)`
Usage

Name	Primary Light
Type	Primary Shade
HEX	`#9dd6cd`
CSS Variable	`var(--primary-light)`
Usage

Name	Primary Light 2
Type	Primary Shade
HEX	`#EFF8F7`
CSS Variable	`var(--primary-light-2)`
Usage

Name	Primary Dark
Type	Primary Shade
HEX	`#377067`
CSS Variable	`var(--primary-dark)`
Usage

Accent Color Palette

Name	Accent 1
Type	Accent
HEX	`#f03b66`
CSS Variable	`var(--accent-1)`
Usage

Name	Accent 1 Light
Type	Accent Shade
HEX	`#F24F75`
CSS Variable	`var(--accent-1-light)`
Usage

Name	Accent 1 Dark
Type	Accent Shade
HEX	`#D8355C`
CSS Variable	`var(--accent-1-dark)`
Usage

Name	Accent 2
Type	Accent
HEX	`#B066D7`
CSS Variable	`var(--accent-2)`
Usage

Name	Accent 2 Light
Type	Accent Shade
HEX	`#c085df`
CSS Variable	`var(--accent-2-light)`
Usage

Name	Accent 2 Dark
Type	Accent Shade
HEX	`#8D52AC`
CSS Variable	`var(--accent-2-dark)`
Usage

Name	Accent 3
Type	Accent
HEX	`#4EAACE`
CSS Variable	`var(--accent-3)`
Usage

Name	Accent 3 Light
Type	Accent Shade
HEX	`#71BBD8`
CSS Variable	`var(--accent-3-light)`
Usage

Name	Accent 3 Lighter
Type	Accent Shade
HEX	`#B8DDEB`
CSS Variable	`var(--accent-3-lighter)`
Usage

Name	Accent 3 Dark
Type	Accent Shade
HEX	`#377790`
CSS Variable	`var(--accent-3-dark)`
Usage

Extended Color Palette

Name	Light Gray 1
Type	Shade
HEX	`#E6E8EA`
CSS Variable	`var(--light-gray-1)`
Usage

Name	Light Gray 2
Type	Shade
HEX	`#F9F9F9`
CSS Variable	`var(--light-gray-2)`
Usage

Name	Dark Gray
Type	Shade
HEX	`#535F69`
CSS Variable	`var(----dark-gray-1)`
Usage

Name	Black
Type	Black
HEX	`#091B29`
CSS Variable	`var(--black)`
Usage

Color Crimes

Don't

Use unapproved colors.