Variables
| Name | Value |
|---|---|
| primary | |
600 | #57451A |
500 | #876921 |
400 | #B78E29 |
base | #FFC434 |
300 | #FED46F |
200 | #FCE4AB |
100 | #FBF5E6 |
| secondary | |
600 | #262652 |
500 | #35357E |
400 | #4544AB |
base | #5C5BEE |
300 | #8B8BF2 |
200 | #BBBAF5 |
100 | #DADAF8 |
50 | #ECECFB |
25 | #F4F4FD |
03 | #FAFAFE |
| opacityWhite | |
pure | #FFFFFF |
100 | #FAFAFA |
90 | #FAFAFA 90% |
80 | #FAFAFA 80% |
70 | #FAFAFA 70% |
60 | #FAFAFA 60% |
50 | #FAFAFA 50% |
40 | #FAFAFA 40% |
30 | #FAFAFA 30% |
20 | #FAFAFA 20% |
10 | #FAFAFA 10% |
05 | #FAFAFA 5% |
| opacityBlack | |
pure | #000000 |
100 | #0F0F0F |
90 | #0F0F0F 90% |
80 | #0F0F0F 80% |
70 | #0F0F0F 70% |
60 | #0F0F0F 60% |
50 | #0F0F0F 50% |
40 | #0F0F0F 40% |
30 | #0F0F0F 30% |
20 | #0F0F0F 20% |
10 | #0F0F0F 10% |
05 | #0F0F0F 5% |
| greyscale | |
950 | #0F0F0F |
900 | #212121 |
800 | #424242 |
700 | #616161 |
600 | #757575 |
500 | #9E9E9E |
400 | #BDBDBD |
300 | #E0E0E0 |
200 | #EEEEEE |
100 | #F5F5F5 |
50 | #FAFAFA |
| red | |
100 | #51302D |
200 | #983B35 |
300 | #FF6E64 |
400 | #FFD0CD |
500 | #FFF8F8 |
| blue | |
100 | #172854 |
200 | #002B99 |
300 | #0047FF |
400 | #99B5FF |
500 | #F5F8FF |
| green | |
100 | #2A533F |
200 | #2F9665 |
300 | #4FFAA8 |
400 | #B9FDDC |
500 | #F1FFF8 |
| orange | |
100 | #543A2B |
200 | #995833 |
300 | #FF9255 |
400 | #FFD3BB |
500 | #FFFBF8 |
| scale | |
0px | 0 |
2px | 2 |
4px | 4 |
6px | 6 |
8px | 8 |
12px | 12 |
16px | 16 |
20px | 20 |
24px | 24 |
28px | 28 |
32px | 32 |
40px | 40 |
48px | 48 |
56px | 56 |
64px | 64 |
80px | 80 |