v33.6.1

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

#4176BC

blue-60

#2C67B5

blue-70

#285DA3

blue-80 (was blue-darkest)

#235291

blue-90

#1A3E6D

blue-100

#122948

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

#FCF0EE

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

#FBE8EC

red-20

#F8D2D8

red-30

#F0A4B1

red-40

#E9778A

red-50

#E14963

red-60

#DA1C3C

red-70

#C41936

red-80

#AE1630

red-90

#831124

red-100

#570B18

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