Colors

Token-driven color scales. Each row is a color family; columns are the shade scale from light (100) to dark (1100). Brand 600 is the default Primary action color.

brand

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

neutral

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

blue

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

cyan

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

teal

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

green

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

lime

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

yellow

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

orange

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

red

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

pink

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

purple

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

violet

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code

indigo

0
100
200
300
400
500
600
700
800
900
1000
1100
Show code