Skip to main content

Colors

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

Primary Color Palette

NamePrimary
TypePrimary
HEX#5CBBAC
CSS Variablevar(--primary)
Usage
NamePrimary Light
TypePrimary Shade
HEX#9dd6cd
CSS Variablevar(--primary-light)
Usage
NamePrimary Light 2
TypePrimary Shade
HEX#EFF8F7
CSS Variablevar(--primary-light-2)
Usage
NamePrimary Dark
TypePrimary Shade
HEX#377067
CSS Variablevar(--primary-dark)
Usage

Accent Color Palette

NameAccent 1
TypeAccent
HEX#f03b66
CSS Variablevar(--accent-1)
Usage
NameAccent 1 Light
TypeAccent Shade
HEX#F24F75
CSS Variablevar(--accent-1-light)
Usage
NameAccent 1 Dark
TypeAccent Shade
HEX#D8355C
CSS Variablevar(--accent-1-dark)
Usage
NameAccent 2
TypeAccent
HEX#B066D7
CSS Variablevar(--accent-2)
Usage
NameAccent 2 Light
TypeAccent Shade
HEX#c085df
CSS Variablevar(--accent-2-light)
Usage
NameAccent 2 Dark
TypeAccent Shade
HEX#8D52AC
CSS Variablevar(--accent-2-dark)
Usage
NameAccent 3
TypeAccent
HEX#4EAACE
CSS Variablevar(--accent-3)
Usage
NameAccent 3 Light
TypeAccent Shade
HEX#71BBD8
CSS Variablevar(--accent-3-light)
Usage
NameAccent 3 Lighter
TypeAccent Shade
HEX#B8DDEB
CSS Variablevar(--accent-3-lighter)
Usage
NameAccent 3 Dark
TypeAccent Shade
HEX#377790
CSS Variablevar(--accent-3-dark)
Usage

Extended Color Palette

NameLight Gray 1
TypeShade
HEX#E6E8EA
CSS Variablevar(--light-gray-1)
Usage
NameLight Gray 2
TypeShade
HEX#F9F9F9
CSS Variablevar(--light-gray-2)
Usage
NameDark Gray
TypeShade
HEX#535F69
CSS Variablevar(----dark-gray-1)
Usage
NameBlack
TypeBlack
HEX#091B29
CSS Variablevar(--black)
Usage

Color Crimes

Don't

Use unapproved colors.