OddApp Design

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