Token | Role | Value | Example |
---|---|---|---|
primary | Primary brand colour |
#BC9F7C |
|
primary-hover | Primary color when hover |
#D0B48D |
|
primary dark | Primary dark |
#9E805A |
|
secondary | Secondary brand colour |
#393939 |
|
secondary-hover | Secondary color when hover |
#000000 |
Token | Role | Value | Example |
---|---|---|---|
success-bg | Success background |
#DCF2E2 |
|
success-content | Foreground content color to use on success color |
#008482 |
Aa |
warning-bg | Warning background |
#FFF4D9 |
|
warning-content | Foreground content color to use on warning color |
#E39600 |
Aa |
error-bg | Error Background |
#FCF2F2 |
|
error-content | Foreground content color to use on error color |
#DF2345 |
Aa |
Token | Role | Value | Example |
---|---|---|---|
white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
grey-100 | Weakest background color used for decorative purposes |
#F6F6F6 |
|
gold | Gold Page Background | #F6F0E8 | |
dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.4) |
Token | Role | Value | Example |
---|---|---|---|
border | Default border color |
#E7E7E7 |
|
border-focus | Border color when focused |
#7A7D81 |
|
border-error | Error border color |
#C9211B |
Token | Role | Value | Example |
---|---|---|---|
grey-900 | Used for headlines |
#000000 |
Aa |
grey-700 | Used for body text |
#646464 |
Aa |
grey-500 | Weaker body text for visual hierarchy |
#888888 |
Aa |
grey-400 | Weaker body text for visual hierarchy |
#A4A8AF |
Aa |
grey-300 | Weaker body text for visual hierarchy |
#CBCBCB |
Aa |
grey-100 | Used for body text on inverse backgrounds |
#F6F6F6 |
Aa |
link | Used for text links |
#646464 |
Aa |
link-hover | Used for text links when hover |
#000000 |
Aa |
Display | Token | Size | Line-height | Weight |
---|---|---|---|---|
h1 | text-5xl | 48px | 54px | 400 |
h2 | text-4xl | 36px | 46px | 600 |
h3 | text-3xl | 32px | 40px | 600 |
h4 | text-3xl-small | 30px | 40px | 400 |
h5 | text-2xl | 24px | 36px | 400 |
h6 | text-xl | 22px | 30px | 400 |
h7 | text-lg | 18px | 26px | 400 |
XL | text-xl-small | 20px | 36px | 400 |
LG Bold | text-lg-bold | 18px | 24px | 500 |
LG | text-lg | 18px | 26px | 400 |
P1 Bold | text-base-bold | 16px | 24px | 500 |
P1 | text-base | 16px | 26px | 400 |
P2 Bold | text-sm | 14px | 22px | 500 |
P2 | text-sm | 14px | 22px | 400 |
P3 Bold | text-xs | 12px | 16px | 600 |
P3 | text-xs | 12px | 16px | 400 |
button | text-button | 15px | 22px | 500 |
label 1 | text-label | 13px | 12px | 500 |
label 2 | text-label-small | 11px | 12px | 500 |
Link | link | 14px | 22px | 400 |
Invalid email address
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Display | Token |
---|---|
Badge | badge |
Code | Preview |
---|---|
icon-menu | |
icon-shopping-bag | |
icon-close | |
icon-success | |
icon-search | |
icon-facebook | |
icon-instagram | |
icon-pinterest | |
icon-person | |
icon-arrow-right | |
icon-arrow-left | |
icon-heart | |
icon-chevron-up | |
icon-chevron-right | |
icon-chevron-left | |
icon-check |
Code | Preview |
---|---|
icon-filter | |
icon-plus | |
icon-minus | |
icon-map | |
icon-map-bold | |
icon-phone | |
icon-info | |
icon-clock | |
icon-gift | |
icon-calendar | |
icon-bottle | |
icon-leaf | |
icon-envelope | |
icon-lineup-right |
Code | Preview |
---|---|
icon-eye | |
icon-chat | |
icon-ellipsis | |
icon-visa | |
icon-amex | |
icon-mastercard | |
icon-paypal | |
icon-googlepay | |
icon-applepay | |
icon-shoppay | |
icon-klarna | |
icon-zip | |
icon-afterpay |