Skip to main content

Colors

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

Primary Color Palette

NameRed
TypePrimary
HEX#e2004f
CSS Variablevar(--primary)
Usage

Accent Color Palette

NamePink
TypeSecondary
HEX#f0487b
CSS Variablevar(--secondary)
Usage
NameLight Pink
TypeTertiary
HEX#f6edef
CSS Variablevar(--tertiary)
Usage
NameYellow
TypeAccent
HEX#f3c028
CSS Variablevar(--accent-1)
Usage
NameViolet
TypeAccent
HEX#3547ca
CSS Variablevar(--accent-2)
Usage
NameGreen
TypeAccent
HEX#a6d470
CSS Variablevar(--accent-3)
Usage

Extended Color Palette

NameLight Gray 1
TypeShade
HEX#f9f9f9
CSS Variablevar(--light-gray-1)
Usage
NameLight Gray 2
TypeShade
HEX#d9d9d9
CSS Variablevar(--light-gray-2)
Usage
NameLight Gray 3
TypeShade
HEX#919191
CSS Variablevar(--light-gray-3)
Usage
NameLight Gray 4
TypeShade
HEX#f6f6f6
CSS Variablevar(--light-gray-4)
Usage
NameDark Gray 1
TypeShade
HEX#1d1d1d
CSS Variablevar(--dark-gray-1)
Usage
NameDark Gray 2
TypeShade
HEX#212121
CSS Variablevar(--dark-gray-2)
Usage
NameDark Gray 3
TypeShade
HEX#151515
CSS Variablevar(--dark-gray-3)
Usage
NameDark Gray 4
TypeShade
HEX#cdcdcd
CSS Variablevar(--dark-gray-4)
Usage
NameBlack
TypeShade
HEX#000
CSS Variablevar(--black)
Usage

Color Crimes

Don't

Use unapproved colors.