Colours

Brand Colours

primary
Primary Brand Colour
primary-hover
Primary Colour on Hover
secondary
Secondary Brand Colour
secondary-hover
Second Colour on Hover
neutral
Neutral Colour
green-allports
Green Colour

Notification Colours

info-content
Info Content Color
info-bg
Info Background
success-content
Success Content Color
success-bg
Success Background
error-content
Error Content Color
error-bg
Error Background
warning-content
Warning Content Color
warning-bg
Warning Background

Background Colours

white
White Page Background
grey-100
Grey Page Background
dark-overlay
Dark Page Overlay

Greyscale Colours (Typography)

grey-1000
Used for Headings
grey-900
Used for Headings
grey-700
Used for Bodycopy
grey-500
Mid Text
grey-400
Weak Text
grey-200
Weakest Text
grey-100
Grey Page Background
grey-300
Background Backdrop Megamenu
white
For Body on Inverse

Border Colours

border-default
Default Border & Divider
border-focus
Focused Border
border-error
For Fields with an Error

Typographys

Desktop Scale

h1

text-h1 regular

h2

text-h2 regular

h3

text-h3 regular

h4

text-h4 regular

Mobile Scale

H1

text-h2-mob regular

h2

text-h3 regular

h3

text-h4 regular

h4

text-lg regular

Regular LG

text-lg regular

Semi Bold LG

text-lg semibold

Base

text-base regular

Semi Bold Base

text-base semibold

Regular SM

text-sm regular

Regular XS

text-xs regular

Link

link

Buttons

Primary Button
Secondary Button
Button with icon
Button with icon secondary
Button Loading

Forms

Text inputs

Error related info text

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Error notification
Success notification

Preact test

Additionals

Quantity Counter

Pagination

Review Stars

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.

Carousel

Carousel Grid

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Carousel Banner

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Icons

Code Preview
menu
shopping-bag
close-outline
faild
success
facebook
instagram
person
arrow-right
arrow-left
shield
heart
chevron-up
chevron-right
chevron-left
check
trash
arrow-right-2
filter
share
help
plus
minus
Code Preview
search-outline
cart-outline
chevron-down
close
check-outline
check-cricle
twitter
swap-outline
youtube
close-circle
menu-outline
smile-outline
truck-outline