Colour

Colour helps to create accessible and consistent experiences across the system. The primitive colour scales are built as a base with equal steps from light to dark for each colour ramp. Steps from these ramps are then used to feed colour tokens, which are then applied to designs.

Gray

50

#f7f7f8

100

#e9eaed

200

#d8dadf

300

#babec4

400

#a1a6af

500

#828893

600

#686d78

700

#51555e

800

#3a3c41

900

#252526

950

#0b0c0c

Blue

50

#f2f9ff

100

#d4e8fd

200

#b6d6fb

300

#80b2f4

400

#5c94e8

500

#457cd8

600

#3668c0

700

#2c55a2

800

#15387c

900

#072155

950

#001030

Red

50

#fff4f2

100

#fdd1ca

200

#faafa3

300

#f27764

400

#e65038

500

#d4351c

600

#bb250d

700

#9a1a04

800

#741201

900

#4c0b00

950

#290600

Yellow

50

#fffceb

100

#fffac4

200

#fff985

300

#ffed44

400

#ffdd00

500

#e3b30c

600

#c18c17

700

#99681f

800

#67431e

900

#3e2919

950

#1f150f

Green

50

#f4fff1

100

#c5f3bf

200

#93e891

300

#4dd05e

400

#23b84b

500

#0ca044

600

#008840

700

#00703c

800

#00572f

900

#003d21

950

#002413

Emerald

50

#f0fff7

100

#c2fde1

200

#95fbd0

300

#4aecb4

400

#19d39f

500

#00b089

600

#008971

700

#006658

800

#004d44

900

#003630

950

#00241e

Purple

50

#f7f5ff

100

#e3daff

200

#cfbffe

300

#ac8ff8

400

#936def

500

#7f56e1

600

#6f45cd

700

#5e37b2

800

#4c2c92

900

#331a68

950

#1e0d40

Gold

50

#fffbf2

100

#f4edde

200

#e9dfcb

300

#d1c3a3

400

#baa980

500

#a39161

600

#8a7742

700

#715f28

800

#584915

900

#3f3308

950

#261f00