v33.2.0

Tools

Playroom

Figma library

Figma Cheatsheet

Preview

Usage

Deprecation

Start here

Deprecation list and dates

Design Guides

Component Categories

Color Palette

Our product colors

Check out the color usage guidelines for how to use color to make products easier to use.

blue-10

#edf4f7

blue-20

#e3eef3

blue-30 (was blue-lightest)

#cce0ea

blue-40 (was blue-light)

#9ec6de

blue-50

#68a2d3

blue-60 (was blue)

#3a81c2

blue-70 (was blue-dark)

#1668af

blue-80 (was blue-darkest)

#00528e

blue-90

#003c6b

blue-100

#00294b

turquoise-10

#f8fefe

turquoise-20

#e8fbfb

turquoise-30

#c9f5f6

turquoise-40

#9ce9ea

turquoise-50

#68d7d9

turquoise-60

#38c2c4

turquoise-70

#15a1a6

turquoise-80

#037e87

turquoise-90

#005f6b

turquoise-100

#004453

green-10

#f6faf8

green-20

#eaf5ef

green-30 (was green-lightest)

#d1e9db

green-40

#a8d8bc

green-50 (was green-light)

#79c298

green-60 (was green)

#49a471

green-70 (was green-dark)

#2a8652

green-80 (was green-darkest)

#156d3b

green-90

#045624

green-100

#004316

lime-10

#fafdee

lime-20

#f5fcd5

lime-30

#ebfcac

lime-40

#ddfb74

lime-50

#c9ec56

lime-60

#b1d636

lime-70

#94b524

lime-80

#738c12

lime-90

#536507

lime-100

#384202

yellow-10

#fffef7

yellow-20

#fffced

yellow-30 (was yellow-lightest)

#fef8da

yellow-40 (was yellow-light)

#fcefb6

yellow-50 (was yellow)

#fbe284

yellow-60 (was yellow-dark)

#f8d648

yellow-70 (was yellow-darkest)

#ddb31f

yellow-80

#b48804

yellow-90

#825a00

yellow-100

#4d2f00

orange-10

#fffaf8

orange-20

#fff3ec

orange-30 (was orange-lightest)

#fbdbca

orange-40 (was orange-light)

#f7bea0

orange-50 (was orange)

#f79864

orange-60 (was orange-dark)

#ea711a

orange-70

#c65400

orange-80 (was orange-darkest)

#a03b00

orange-90

#772900

orange-100

#4f1a00

red-10

#fff9f9

red-20

#ffeaea

red-30 (was red-lightest)

#f6c6c6

red-40 (was red-light)

#eea2a2

red-50 (was red)

#ec6a6a

red-60 (was red-dark)

#e23333

red-70 (was red-darkest)

#c52220

red-80

#aa0e16

red-90

#890112

red-100

#610011

brown-10

#FAF8F6

brown-20

#F9F4F0

brown-30

#F5E7D9

brown-40

#EEDBCA

brown-50

#E4C4A6

brown-60

#BA8D63

brown-70

#966E4A

brown-80

#6D4B33

brown-90

#4D3222

brown-100

#321E13

gray-10 (was gray-lightest-1)

#fcfcfc

gray-20 (was gray-lightest-2)

#f7f7f7

gray-30 (was gray-lightest-3)

#ecebeb

gray-40 (was gray-light-1)

#d6d5d5

gray-50 (was gray-light-2)

#bbb9b9

gray-60 (was gray-light-3)

#9d9a99

gray-70 (was gray)

#797675

gray-80 (was gray-dark-1)

#5b5958

gray-90 (was gray-dark-2)

#3d3b3b

gray-100 (was gray-dark-3)

#222120

black

#000000

white

#ffffff