Colours
Brand
Token | Role | Value | Example |
---|---|---|---|
primary | Primary brand colour |
rgb(211, 85, 170) #D355AA |
|
primary-focus | Primary color when hover |
rgb(232, 104, 190) #E868BE |
|
brand-green | Accent Colour |
rgb(41, 98, 90) #29625A |
|
brand-yellow | Accent Colour |
rgb(223, 158, 82) #DF9E52 |
|
brand-pink-light | Accent Colour |
rgb(242, 186, 206) #F2BACE |
|
brand-pink-medium | Accent Colour |
rgb(229, 160, 185) #E5A0B9 |
|
brand-gradient | Accent Colour |
linear-gradient(90deg, #E9C5B7 0%, #D355AA 100%) |
Functional
Token | Role | Value | Example |
---|---|---|---|
success-bg | Success background |
#E7FCEB |
|
success-content | Success Content Color |
#1B7C6F |
Aa |
warning-bg | Warning background |
#FCF2DA |
|
warning-content | Warning Content Color |
#DD7E10 |
Aa |
error-bg | Error Background |
#FFE9ED |
|
error-content | Error Content Color |
#D00E48 |
Aa |
Background
Token | Role | Value | Example |
---|---|---|---|
white | White Page Background |
rgb(255, 255, 255) #FFFFFF |
|
grey-100 | Grey Page Background |
#F7F8FA |
|
pink | Pink Background |
#FFECF9 |
|
dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.3) |
Borders
Token | Role | Value | Example |
---|---|---|---|
border | Default border color |
#E1E1E1 |
|
border-dark | Focused Border |
#7A7D81 |
Typography
Token | Role | Value | Example |
---|---|---|---|
grey-900 | Used for headlines |
#000000 |
Aa |
grey-700 | Used for body text |
#494A4B |
Aa |
grey-500 | Weaker body text for visual hierarchy |
#9B9B9B |
Aa |
grey-400 | Weaker body text for visual hierarchy |
#BCBCBC |
Aa |
grey-300 | For Headings on Inverse |
#D0D0D0 |
Aa |
grey-100 | Used for body text on inverse backgrounds |
#F7F8FA |
Aa |
Typographys
Display | Token | Size | Line-height | Weight |
---|---|---|---|---|
h1 | text-5xl | 48px | 54px | 900 |
h2 | text-4xl | 36px | 42px | 900 |
h3 | text-3xl | 30px | 36px | 900 |
h4 | text-2xl | 24px | 32px | 900 |
h5 | text-base | 16px | 24px | 700 |
h1 | text-3xl | 30px | 36px | 500 |
h2 | text-2xl | 24px | 32px | 500 |
h3 | text-xxl | 22px | 32px | 500 |
h4 | text-xl | 20px | 28px | 500 |
h5 | text-lg | 18px | 24px | 500 |
h6 | text-base | 16px | 24px | 500 |
Text Xl | text-base | 20px | 28px | 500 |
BASE Bold | text-base | 16px | 24px | 700 |
BASE Medium | text-base | 16px | 24px | 500 |
BASE Regular (P1) | text-base | 16px | 24px | 400 |
SM Bold | text-sm | 16px | 24px | 700 |
SM Medium | text-sm | 14px | 22px | 700 |
SM Regular (P2) | text-sm | 14px | 22px | 400 |
XS Regular (P3) | text-xs | 12px | 16px | 400 |
XXS Regular | text-xxs | 10px | 10px | 500 |
Text Link | link | 14px | 22px | 400 |
Button Regular | link | 15px | 22px | 700 |
Button Large | link | 18px | 22px | 700 |
Forms
Text inputs
sdfsdfsdfInvalid 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 Counter
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
Icon close
Loader
Icons
Code | Preview |
---|---|
icon-menu | |
icon-question | |
icon-shopping-bag | |
icon-close-circle | |
icon-close | |
icon-faild | |
icon-warning-circle-fill | |
icon-success | |
icon-search | |
icon-facebook | |
icon-twitter | |
icon-tiktok | |
icon-instagram | |
icon-flower | |
icon-play-circle | |
icon-person-outline | |
icon-down-circle | |
icon-arrow-left | |
icon-heart | |
icon-heart-bold | |
icon-chevron-up |
Code | Preview |
---|---|
icon-chevron-right | |
icon-chevron-left | |
icon-chevron-down | |
icon-check | |
icon-trash | |
icon-paper-plane | |
icon-clock-wise | |
icon-check-cricle | |
icon-share | |
icon-share-outline | |
icon-help | |
icon-plus | |
icon-minus | |
icon-location | |
icon-phone | |
icon-truck | |
icon-gift | |
icon-size | |
icon-save |
Code | Preview |
---|---|
icon-eye | |
icon-link | |
icon-chat | |
icon-chat-circle | |
icon-envelope | |
icon-coat-hanger | |
icon-logout | |
icon-thumbs-up | |
icon-thumbs-down | |
icon-visa | |
icon-amex | |
icon-mastercard | |
icon-paypal | |
icon-googlepay | |
icon-applepay | |
icon-afterpay |