Tokens
Brand palette
50
100
200
300
400
500
600
700
800
900
Semantic colours
Success
Warning
Danger
Info
Type scale
12px — The quick brown fox
14px — The quick brown fox
16px — The quick brown fox
18px — The quick brown fox
20px — The quick brown fox
24px — The quick brown fox
30px — The quick brown fox
36px — The quick brown fox
48px — The quick brown fox
60px — The quick brown fox
Spacing scale
1
2
3
4
5
6
8
10
12
16
Border radii
sm
md
lg
xl
full