v34.0.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 (was blue-lightest)

#C0D1E9

blue-40 (was blue-light)

#8BABD6

blue-50

#4176BC

blue-60 (was blue)

#2C67B5

blue-70 (was blue-dark)

#285DA3

blue-80 (was blue-darkest)

#235291

blue-90

#1A3E6D

blue-100

#122948

green-10

#EBF7F6

green-20

#D6EFEC

green-30 (was green-lightest)

#ADDFD9

green-40

#84D0C6

green-50 (was green-light)

#5BC0B3

green-60 (was green)

#32B0A0

green-70 (was green-dark)

#2D9E90

green-80 (was green-darkest)

#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 (was orange-lightest)

#F5CABD

orange-40 (was orange-light)

#EFB09C

orange-50 (was orange)

#EA957B

orange-60 (was orange-dark)

#E57B5A

orange-70

#CE6F51

orange-80 (was orange-darkest)

#B76248

orange-90

#A0563F

orange-100

#733E2D

red-10

#FBE8EC

red-20

#F8D2D8

red-30 (was red-lightest)

#F0A4B1

red-40 (was red-light)

#E9778A

red-50 (was red)

#E14963

red-60 (was red-dark)

#DA1C3C

red-70 (was red-darkest)

#C41936

red-80

#AE1630

red-90

#831124

red-100

#570B18

brown-10 (was key-pair)

#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 (was gray-lightest-1)

#F4F4F4

gray-20 (was gray-lightest-3)

#EBECEC

gray-30 (was gray-light-1)

#DEDFDF

gray-40 (was gray-light-2)

#C4C4C4

gray-50 (was gray-light-3)

#A7AAAA

gray-60 (was gray)

#7B8080

gray-70 (was gray-dark-1)

#656B6B

gray-80 (was gray-dark-2)

#394040

gray-90 (was gray-dark-3)

#232B2B

gray-100

#1C2222

black

#000000

white

#FFFFFF