Colours
Brand Colours
| Token | Role | Value | Example |
|---|---|---|---|
| black | Primary brand colour |
rgb(0, 0, 0) #000000 |
|
| red | Secondary brand colour |
rgb(166, 25, 46) #A6192E |
|
| blue | Used for small highlights |
rgb(225, 242, 249) #E1F2F9 |
|
| beige | Used for small highlights |
rgb(245, 244, 239) #F5F4EF |
Notification Colours
| Token | Role | Value | Example |
|---|---|---|---|
| success-bg | Success background |
rgba(119, 119, 90, 0.15) |
|
| success-content | Foreground content color to use on success color |
#77775A |
|
| warning-bg | Warning background |
rgba(236, 128, 29, 0.15) |
|
| warning-content | Foreground content color to use on warning color |
#EC801D |
|
| error-bg | Error Background |
rgba(166, 25, 46, 0.15) |
|
| error-content | Foreground content color to use on error color |
#A6192E |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| Dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.25)) | |
| Gradient | Background color used for overlays | linear-gradient(181deg, rgba(0, 0, 0, 0.00) 0.92%, rgba(0, 0, 0, 0.24) 99.08%) |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for Headings |
#000000 |
Aa |
| grey-700 | Used for Body |
#1E1E1E |
Aa |
| grey-500 | Weaker Text |
#727483 |
Aa |
| grey-400 | Weaker Text |
#A0A3AC |
Aa |
| grey-300 | Weaker Text |
#C7C9CD |
Aa |
| grey-200 | Used for Borders |
#E5E8EA |
Aa |
| grey-100 | Used for Backgrounds |
#F7F8F9 |
Aa |
| white | Used for Backgrounds |
#FFFFFF |
Aa |
Typographys
| Display | Size | Line-height | Weight |
|---|---|---|---|
| h1 | 80px | 80px | 450 |
| h1 | 60px | 80px | 450 |
| h2 | 40px | 48px | 450 |
| h3 | 40px | 54px | 500 |
| h4 | 32px | 40px | 450 |
| h5 | 24px | 30px | 500 |
| h6 | 18px | 22px | 500 |
| h7 | 16px | 20px | 500 |
| Display | Size | Line-height | Weight |
|---|---|---|---|
| Eyebrow DESKTOP | 16px | 24px | 500 |
| Eyebrow MOBILE | 12px | 18px | 500 |
| Quote | 24px | 36px | 400 |
P1 |
16px | 26px | 400 |
P2 Bold |
14px | 24px | 500 |
P2 |
14px | 22px | 400 |
P3 Bold |
12px | 12px | 500 |
P3 |
12px | 18px | 400 |
P4 |
10px | 18px | 400 |
| Button | 16px | 16px | 500 |
| Link | 16px | 26px | 500 |
Forms
Text inputs
Please enter a vaild email address
Text area
Dropdown
Radio button
Checkboxes
Minus/Plus
Modules
Notifications
There were 2 error with your submission
Success! Something went exactly as planned.
Attention needed
Toaster notification
Additionals
Carousel
Carousel Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
