Info Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Colours
Brand
| Token | Role | Value | Example |
|---|---|---|---|
| primary-1000 | Primary brand colour |
rgba(235, 222, 215, 1) #EBDED7 |
|
| primary-900 | Primary brand colour |
rgba(210, 190, 182, 1) #D2BEB6 |
|
| primary-700 | Primary brand colour |
rgba(235, 222, 215, 1) #EBDED7 |
|
| primary-500 | Lighter tone of primary |
rgba(247, 242, 239, 1) #F7F2EF |
|
| primary-200 | Lighter tone of primary |
rgba(241, 232, 227, 1) #F1E8E3 |
|
| secondary-900 | Secondary brand colour |
rgba(190, 205, 220, 1) #BECDDC |
|
| secondary-700 | Lighter tone of secondary |
rgba(197, 210, 223, 1) #C5D2DF |
|
| secondary-500 | Lighter tone of secondary |
rgba(197, 210, 223, 1) #C5D2DF |
|
| secondary-200 | Lighter tone of secondary |
rgba(197, 210, 223, 1) #C5D2DF |
|
| accent-700 | Accent brand colour |
rgba(105, 55, 27, 1) #69371B |
|
| accent-500 | Accent brand colour |
rgba(105, 55, 27, 1) #69371B |
|
| accent-200 | Accent brand colour |
rgba(105, 55, 27, 1) #69371B |
Notification Colours
| Token | Role | Value | Example |
|---|---|---|---|
| success-bg | Success background |
#F2FDF5 |
|
| success-content | Foreground content color to use on success color |
#459452 |
Aa |
| warning-bg | Warning background |
#FEFCEA |
|
| warning-content | Foreground content color to use on warning color |
#F59E0B |
Aa |
| error-bg | Error Background |
#FCF2F2 |
|
| error-content | Foreground content color to use on error color |
#F51010 |
Aa |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgba(255, 255, 255, 1) #FFFFFF |
|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.16) |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for headlines |
#37281E |
Aa |
| grey-700 | Used for body text |
#4B3D35 |
Aa |
| grey-500 | Weaker body text for visual hierarchy |
#736961 |
Aa |
| grey-300 | Weaker body text for visual hierarchy |
#AFA9A5 |
Aa |
| grey-200 | Weaker body text for visual hierarchy |
#E3E3E3 |
Aa |
| grey-100 | Used for body text on inverse backgrounds |
#EBEAE9 |
Aa |
Typographys
| Display | Token | Size | Line-height | Weight |
|---|---|---|---|---|
| Headline 1 | text-4xl | 36px | 42px | 400 |
| Headline 2 | text-3xl | 30px | 36px | 400 |
| Headline 3 | text-2xl | 24px | 30px | 400 |
| Headline 4 | text-hsm | 14px | 20px | 400 |
| Headline 5 | text-hxs | 12px | 16px | 400 |
| Headline 6 | text-xxs | 10px | 12px | 400 |
| P1 Medium | text-base | 16px | 28px | 500 |
| P1 | text-base | 16px | 28px | 400 |
| P2 Medium | text-sm | 14px | 24px | 500 |
| P2 | text-sm | 14px | 24px | 400 |
| P3 Medium | text-xs | 12px | 18px | 500 |
| P3 | text-xs | 12px | 18px | 400 |
Text Link |
link | 14px | 20px | 400 |
Large Text Link |
link-upper | 16px | 28px | 500 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
Success Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Error Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Warning Notification
Augue pellentesque est diam aliquet. Odio et amet aliquam.
Info Notification
Success notification
Error notification
Warning notification
Toaster notification
Error Toaster
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
Additionals
Pagination
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
Swiper carousel
Native
Component
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Thumbs
Icons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-shopping-bag | |
| icon-close | |
| icon-faild | |
| icon-success | |
| icon-search | |
| icon-search-2 | |
| icon-user | |
| icon-twitter | |
| icon-facebook | |
| icon-instagram | |
| icon-email | |
| icon-pinterest | |
| tiktok | |
| icon-email-circle | |
| icon-facebook-circle | |
| icon-twitter-circle | |
| icon-chevron-up | |
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-down | |
| icon-arrow-up-left | |
| icon-chevron-left-2 | |
| icon-chevron-right-2 | |
| icon-arrow-down | |
| icon-arrow-left | |
| icon-chevron-down-1 | |
| icon-chevron-down-outline | |
| icon-chevron-right-3 | |
| icon-chevron-right-4 | |
| icon-arrow-right | |
| icon-arrow-right-slash |
| Code | Preview |
|---|---|
| icon-filter | |
| icon-account | |
| icon-error-circle | |
| icon-info-circle | |
| icon-info | |
| icon-info-outline | |
| icon-question | |
| icon-warning | |
| icon-success-circle | |
| icon-phone | |
| icon-map | |
| icon-plus | |
| icon-plus-2 | |
| icon-minus | |
| icon-submit | |
| icon-youtube | |
| icon-map-pin | |
| icon-check-with-circle | |
| icon-check | |
| icon-check-bolder | |
| icon-close-outline | |
| icon-close-bold | |
| icon-gift | |
| icon-how-to | |
| icon-texture | |
| icon-how-often | |
| icon-swatches | |
| icon-edit | |
| icon-shipping | |
| icon-bookmark | |
| icon-link | |
| icon-question-2 |
| Code | Preview |
|---|---|
| icon-star | |
| icon-star-filled | |
| icon-star-outline | |
| icon-star-review | |
| icon-arrows-horizontal | |
| icon-map-pin-line | |
| icon-chat | |
| icon-chat-text | |
| icon-heart | |
| icon-trash | |
| icon-location | |
| icon-shopping-bag-open | |
| icon-shopping-bag-3 | |
| icon-dot | |
| icon-envelop | |
| icon-loader | |
| icon-global | |
| icon-glowgetter | |
| icon-am | |
| icon-pm | |
| icon-cards | |
| icon-free-returns | |
| icon-visa | |
| icon-mastercard | |
| icon-paypal | |
| icon-googlepay | |
| icon-applepay | |
| icon-afterpay-payment | |
| icon-zip-payment | |
| icon-laybuy-payment |
