v33.4.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, and check out the design tokens.

blue-10

#EAF0F8

blue-20

#DFE8F4

blue-30

#C0D1E9

blue-40

#8BABD6

blue-50

#618EC7

blue-60

#3873C1

blue-70

#285DA3

blue-80 (was blue-darkest)

#265593

blue-90

#1F487F

blue-100

#17355D

green-10

#EBF7F6

green-20

#D6EFEC

green-30

#ADDFD9

green-40

#84D0C6

green-50

#5BC0B3

green-60

#32B0A0

green-70

#2D9E90

green-80

#237C70

green-90

#1E6A60

green-100

#144640

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

#FFEEE8

orange-20

#FAE5DE

orange-30

#F5CABD

orange-40

#EFB09C

orange-50

#EA957B

orange-60

#E57B5A

orange-70

#CE6F51

orange-80

#B76248

orange-90

#A0563F

orange-100

#733E2D

red-10

#F9E9EC

red-20

#F4D3D8

red-30

#E9A7B2

red-40

#DD7A8B

red-50

#D24E65

red-60

#C7223E

red-70

#B31F38

red-80

#9F1B32

red-90

#771425

red-100

#500E19

brown-10

#FBF8F7

brown-20

#F0EAE1

brown-30

#E2D5C2

brown-40

#CCB695

brown-50

#C5AB85

brown-60

#B69667

brown-70

#A4875D

brown-80

#7F6948

brown-90

#5B4B34

brown-100

#493C29

gray-10

#F4F4F4

gray-20

#EBECEC

gray-30

#DEDFDF

gray-40

#C4C4C4

gray-50

#A7AAAA

gray-60

#7B8080

gray-70

#656B6B

gray-80 (was gray-dark-2)

#394040

gray-90

#232B2B

gray-100

#1C2222

black

#000000

white

#ffffff