Colour Tokens
The colour tokens behave as the source of truth for the colour palette. All instances that have a colour assigned to them, ultimately can be traced back to the colour tokens.
| Token name | Hex Code | Sample |
|---|---|---|
| Black-Base | 111111 | |
| Black-pos-1 | 736D6E | |
| Black-pos-2 | ABA2A4 | |
| White-Base | F9F9F9 | |
| White-1 | E2E2E2 | |
| White-2 | CCCCCC | |
| Grey-Base | F5F3F1 | |
| Grey-1 | ECEAE8 | |
| Grey-2 | E3E1DF | |
| Blue-Base | 6047FB | |
| Blue-pos-1 | A197FD | |
| Blue-pos-2 | C1BBFE | |
| Blue-1 | 4D36E0 | |
| Blue-2 | 3925C6 |
Typography Colour Variables
All variables for typography colours.
| Variable name | Token used | Sample |
|---|---|---|
| Type-Primary-Light | Black-Base | |
| Type-Secondary-Light | Black-pos-1 | |
| Type-Primary-Dark | White-Base | |
| Secondary-Dark | White-1 |
Brand Colour Variables
All variables for any component instance that calls for a brand colour.
| Variable name | Token used | Sample |
|---|---|---|
| Brand-Base | Blue-Base | |
| Brand-Hover | Blue-1 | |
| Brand-Focus | Blue-2 |