Colours
Brand
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
#00426A |
|
| primary-hover | Primary Colour on Hover |
#406684 |
|
| primary-content | Foreground content color to use on primary color |
#FFFFFF |
Aa |
| secondary | Secondary brand colour |
#F5B124 |
|
| secondary-content | Foreground content color to use on secondary color |
#FFFFFF |
Aa |
Functional
| Token | Role | Value | Example |
|---|---|---|---|
| success-bg | Success background |
#F2FDF5 |
|
| success-content | Foreground content color to use on success color |
#078F46 |
Aa |
| warning-bg | Warning background |
#FEFCEA |
|
| warning-content | Foreground content color to use on warning color |
#C18B00 |
Aa |
| error-bg | Error Background |
#FCF2F2 |
|
| error-content | Foreground content color to use on error color |
#C9211B |
Aa |
Background
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
| whisper | Off-White Background |
#FAFAFA |
|
| navy | Dark Page Background |
#003250 |
|
| grey-100 | Weakest background color used for decorative purposes |
#F1F1F1 |
|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0.04) |
Borders
| Token | Role | Value | Example |
|---|---|---|---|
| border | Default border color |
#E4E4E4 |
|
| border-focus | Border color when focused |
#9A9EA4 |
Typography
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for headlines |
#00273F |
Aa |
| grey-700 | Used for body text |
#3A505E |
Aa |
| grey-500 | Weaker body text for visual hierarchy |
#6F7A85 |
Aa |
| grey-400 | Weaker body text for visual hierarchy |
#A4A8AF |
Aa |
| grey-100 | Used for body text on inverse backgrounds |
#F1F1F1 |
Aa |
Typographys
| Display | Token | Size | Line-height | Weight |
|---|---|---|---|---|
| Headline 1 | text-5xl | 48px | 54px | 400 |
| Headline 2 | text-4xl | 36px | 42px | 400 |
| Headline 3 | text-3xl | 30px | 36px | 400 |
| Headline 4 | text-2xl | 24px | 32px | 400 |
| Headline 5 | text-xl | 22px | 28px | 400 |
| Headline 6 | text-xl | 20px | 28px | 700 |
| Body 1 medium | text-lg | 18px | 24px | 500 |
| Body | text-base | 16px | 24px | 400 |
| Body small | text-sm | 14px | 22px | 400 |
| Body small | text-xs | 12px | 16px | 400 |
| Text Link | link | 16px | 24px | 400 |
| Text Link | link-capitalize | 14px | 22px/0.5px | 400 |
| all cap 12 | text-xs-cap | 12px | 20px/0.4px | 700 |
| all cap 13 | text-sm-h-cap | 13px | 20px/0.5px | 700 |
| all cap 14 | text-sm-cap | 14px | 22px/0.5px | 700 |
| all cap 16 | text-base-cap | 16px | 24px/0.5px | 700 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
There were 2 error with your submission
- Your password must be at least 8 characters
- Your password must include at least one pro wrestling finishing move
Attention needed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Success! Something went exactly as planned.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Slideout
Heading 1
Heading 2
Modal dialog
Quantity Item
Loader Preact
Additionals
Pagination
24 of 90 products
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.
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-faild | |
| icon-success | |
| icon-search | |
| icon-mappin | |
| icon-facebook | |
| icon-instagram | |
| icon-pinterest | |
| icon-user | |
| icon-arrow-right | |
| icon-arrow-left | |
| icon-heart | |
| icon-heart-2 | |
| icon-chevron-up | |
| icon-chevron-down | |
| icon-chevron-right | |
| icon-chevron-left | |
| icon-chevron-left-2 | |
| icon-check |
| Code | Preview |
|---|---|
| icon-trash | |
| icon-filter | |
| icon-share | |
| icon-plus | |
| icon-minus | |
| icon-location | |
| icon-phone | |
| icon-info | |
| icon-chevron-down-outline | |
| icon-sun-dim | |
| icon-rain-bow-cloud | |
| icon-truck | |
| icon-shield-check | |
| icon-arrows-clockwise |
| Code | Preview |
|---|---|
| icon-eye | |
| icon-logout | |
| icon-share-social | |
| icon-paypal | |
| icon-klarna | |
| icon-zip | |
| icon-afterpay |
