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