Colours
Brand
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
rgb(102, 125, 92) #667D5C |
|
| primary-hover | Primary color when hover |
rgb(163, 176, 152) #7D9673 |
|
| primary-content | Foreground content color to use on primary color |
rgb(255, 255, 255) #FFFFFF |
Aa |
| secondary | Secondary brand colour |
rgb(179, 95, 74) #B35F4A |
|
| secondary-hover | Secondary color when hover |
rgb(195, 126, 108) #C37E6C |
|
| secondary-content | Foreground content color to use on secondary color |
rgb(255, 255, 255) #FFFFFF |
Aa |
Functional
| Token | Role | Value | Example |
|---|---|---|---|
| success-content | Foreground content color to use on success color |
#667D5C |
Aa |
| warning-content | Foreground content color to use on warning color |
#F29540 |
Aa |
| error-content | Foreground content color to use on error color |
#EE552D |
Aa |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
| white-100 | Background color used for overlays |
rgba(243, 246, 242) #F3F6F2 |
|
| eggshell | Weakest background color used for decorative purposes |
rgb(246, 244, 239) #F6F4EF |
|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.3) |
Borders
| Token | Role | Value | Example |
|---|---|---|---|
| border | Default border color |
#DFDFDF |
|
| border-focus | Border color when focused |
#667D5C |
|
| border-error | Error border color |
#EE552D |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for headlines |
#2A2B2D |
Aa |
| grey-700 | Used for body text |
#54565A |
Aa |
| grey-500 | Weaker body text for visual hierarchy |
#878B90 |
Aa |
| grey-300 | Weaker body text for visual hierarchy |
#D6D6D6 |
Aa |
| grey-100 | Used for body text on inverse backgrounds |
#F6F6F6 |
Aa |
| link | Used for text links |
#54565A |
Aa |
| link-hover | Used for text links when hover |
#667D5C |
Aa |
Typographys
| Display | Token | Size | Line-height | Weight |
|---|---|---|---|---|
| h1 | text-7xl | 72px | 80px | 500 |
| h2 | text-6xl | 60px | 68px | 500 |
| h3 | text-5xl | 48px | 56px | 500 |
| h3 | text-4xl | 36px | 40px | 500 |
| h4 | text-3xl | 30px | 36px | 500 |
| h5 | text-2xl | 24px | 32px | 500 |
| h6 | text-xl | 20px | 28px | 500 |
| Title Bold | text-lg | 18px | 28px | 700 |
| Title Medium | text-base | 18px | 28px | 500 |
| Title Regular | text-lg | 18px | 28px | 400 |
| P1 Bold | text-base | 16px | 26px | 700 |
| P1 Medium | text-base | 16px | 26px | 500 |
| P1 Regular | text-xs | 16px | 26px | 400 |
| P2 Bold | text-sm | 14px | 22px | 700 |
| P2 Medium | text-sm | 14px | 22px | 500 |
| P2 Regular | text-sm | 14px | 22px | 400 |
| P3 Bold | text-xs | 12px | 20px | 700 |
| P3 Medium | text-xs | 12px | 20px | 500 |
| P3 Regular | text-xs | 12px | 20px | 400 |
| Button Semibold | text-base | 16px | 26px | 600 |
| Button Medium | text-base | 16px | 26px | 500 |
| Text Link Large | text-base | 16px | 26px | 400 |
| Text Link Small | text-sm | 16px | 26px | 400 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
Slideout
Heading 1
Heading 2
Modal dialog
Loader Preact
Additionals
Pagination
Breadcrumbs
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.
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 |
Carousel
Carousel Fullwidth
Carousel Grid
Carousel Hide dots
Carousel Disabled
Carousel Hide naviation
Carousel Swiper
Icons
| Code | Preview |
|---|---|
| icon-menu | |
| icon-shopping-bag | |
| icon-close | |
| icon-close-circle | |
| icon-faild | |
| icon-success | |
| icon-search | |
| icon-facebook | |
| icon-instagram | |
| icon-pinterest | |
| icon-twitter | |
| icon-person | |
| icon-arrow-right | |
| icon-arrow-left | |
| icon-shield | |
| icon-heart | |
| icon-chevron-up | |
| icon-chevron-down | |
| icon-chevron-right | |
| icon-chevron-left |
| Code | Preview |
|---|---|
| icon-trash | |
| icon-filter | |
| icon-share | |
| icon-help | |
| icon-plus | |
| icon-minus | |
| icon-location | |
| icon-phone | |
| icon-underwear | |
| icon-leaf | |
| icon-car | |
| icon-water | |
| icon-bulb | |
| icon-plant | |
| icon-truck | |
| icon-check | |
| icon-like | |
| icon-dislike | |
| icon-email |
| Code | Preview |
|---|---|
| icon-eye | |
| icon-chevron-down-outline | |
| icon-star | |
| icon-zoom | |
| icon-ellipsis | |
| icon-visa | |
| icon-amex | |
| icon-mastercard | |
| icon-paypal | |
| icon-googlepay | |
| icon-applepay | |
| icon-shoppay | |
| icon-klarna | |
| icon-zip | |
| icon-afterpay |
