Success notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Colours
Brand Colours
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
rgba(94, 10, 45, 1) #5E0A2D |
|
| primary-hover | Primary Colour on Hover | rgba(94, 10, 45, 0.8) | |
| secondary | Primary brand colour |
rgba(0, 151, 157, 1) #00979D |
|
| secondary-hover | Secondary Colour on Hover | rgba(0, 151, 157, 0.8) | |
| burgandy | Brand Colour |
rgba(94, 10, 45, 1) #5E0A2D |
|
| magenta | Brand Colour |
rgba(255, 147, 237, 1) #FF93ED |
|
| teal-900 | Brand Colour |
rgba(0, 99, 103, 1) #006367 |
|
| teal-600 | Brand Colour |
rgba(0, 151, 157, 1) #00979D |
|
| teal-500 | Brand Colour |
rgba(106, 215, 202, 1) #6AD7CA |
|
| mint | Brand Colour |
rgba(148, 250, 222, 1) #94FADE |
|
| beige-500 | Used for Backgrounds |
rgba(249, 214, 189, 1) #F9D6BD |
|
| beige-200 | Used for Backgrounds |
rgba(249, 230, 218, 1) #F9E6DA |
|
| beige-100 | Used for Backgrounds |
rgba(250, 239, 231, 1) #FAEFE7 |
|
| taupe-300 | Used for Dividers |
rgba(187, 160, 145, 1) #BBA091 |
|
| taupe-200 | Used for Dividers |
rgba(199, 184, 176, 1) #C7B8B0 |
|
| taupe-100 | Used for Dividers |
rgba(223, 214, 210, 1) #DFD6D2 |
Notification Colours
| Token | Role | Value | Example |
|---|---|---|---|
| success-content | Success Content Color |
#006367 |
Aa |
| error-content | Error Content Color |
#B22636 |
Aa |
Background Overlays
| Token | Role | Value | Example |
|---|---|---|---|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.3) |
Greyscale Colours
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for Headings |
#1D1D1D |
Aa |
| grey-700 | Used for Body |
#515151 |
Aa |
| grey-500 | Grey |
#858585 |
Aa |
| grey-400 | Grey |
#B0B0B0 |
Aa |
| grey-300 | Used for Borders |
#D2D2D2 |
Aa |
| grey-200 | Used for Borders |
#E5E5E5 |
Aa |
| grey-100 | Used for Borders |
#F6F6F6 |
Aa |
| white | Used for Backgrounds |
rgba(253, 252, 252, 1) #FDFCFC |
Typographys
| Display | Token | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| Hero | text-7xl | 66px | 66px | 2px | 700 |
| Hero | text-6xl | 54px | 54px | 2px | 700 |
| Hero | text-5xl | 40px | 40px | 4px | 700 |
| Hero | text-4xl | 28px | 34px | 2px | 700 |
| Headline | text-3xl | 28px | 36px | 0px | 500 |
| Headline | text-2xl | 24px | 36px | 0px | 500 |
| Headline | text-xl | 20px | 28px | 0px | 500 |
| Headline | text-heading-lg | 18px | 24px | 0px | 500 |
| Body | text-lg | 18px | 28px | 0px | 300 |
| Body | text-base | 16px | 24px | 0px | 500 |
| Body | text-base | 16px | 24px | 0px | 300 |
| Body | text-sm | 14px | 22px | 0px | 600 |
| body | text-sm | 14px | 22px | 0px | 300 |
| Body | text-xs | 12px | 16px | 0px | 600 |
| Body | text-xs | 12px | 16px | 0px | 400 |
| Text Link | link | 14px | 22px | 0px | 300 |
| Text Link Hover | link-hover | 14px | 22px | 0px | 300 |
| Button | text-button | 15px | 22px | 1px | 500 |
| Button | text-button-small | 13px | 20px | 1px | 500 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Modules
Notifications
Error notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
Additionals
Pagination
Navigation
Load More
Showing 20 of 36
Page loader
Breadcrumbs
- Home
- Styleguide
Accordion
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Here is space for body copy that answers the question above. There is no character limit and can go as long as needed.
Here is more space for body copy, underneath a sub-dividing line within each section.
Badge & label
| Display | Token |
|---|---|
| Badge | badge |
| Badge 2 | badge-2 |
| Badge 3 | badge-3 |
Preact modules
Carousel
Carousel Embla
Fullwidth
Grid
Icons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-shopping-bag | |
| icon-close | |
| icon-faild | |
| icon-success | |
| icon-search | |
| icon-person | |
| icon-twitter | |
| icon-pinterest | |
| icon-tiktok | |
| icon-facebook | |
| icon-instagram | |
| icon-email | |
| icon-arrow-right | |
| icon-timer |
| Code | Preview |
|---|---|
| icon-chevron-up | |
| icon-chevron-down | |
| icon-filter | |
| icon-star | |
| icon-star-empty | |
| icon-success-circle | |
| icon-calendar | |
| icon-truck | |
| icon-marker | |
| icon-plus | |
| icon-plus-2 | |
| icon-minus | |
| icon-loader | |
| icon-play-circle |
| Code | Preview |
|---|---|
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-right-2 | |
| icon-chevron-left-2 | |
| icon-pen | |
| icon-order-box | |
| icon-clock | |
| icon-visa | |
| icon-mastercard | |
| icon-paypal | |
| icon-googlepay | |
| icon-applepay | |
| icon-klarna | |
| icon-zip | |
| icon-afterpay |
