Colours

Brand Colours

primary
Primary Colour
primary-hover
Primary Colour Hover
accent-2
Accent Colour 2
accent-3
Accent Colour 3
accent-4
Accent Colour 4

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-800
Used for button footer
grey-700
Used for Body
grey-500
Weaker Text
grey-400
Weakest Text
grey-200
Used for input newsletter
grey-100
For Body on Inverse
white
For Headings 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-4xl font-bold

h2

text-3xl font-bold

h3

text-2xl font-bold

h4

text-xl font-bold
h5
text-lg font-bold

Mobile Scale

h1

text-3xl font-bold

h2

text-2xl font-bold

h3

text-xl font-bold

h4

text-lg font-bold
h5
text-base font-bold

P1 Bold

text-base font-medium

P1

text-base font-normal

P2 Bold

text-sm font-bold

P2

text-base font-normal

P3

text-xs font-normal

Button

text-sm font-medium

Link

link

Buttons

Style - Filled
Style - Outlined

Forms

Text inputs

Error related info text

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications & Alerts

Toaster notifcation

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.

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.

Breadcrumbs

  1. Home
  2. Styleguide

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
icon-menu
icon-user
icon-search
icon-shopping-bag
icon-close
icon-chevron-left
icon-chevron-right
icon-social-facebook
icon-social-instagram
icon-arrow-right
icon-arrow-left
icon-chevron-down
icon-chevron-up
icon-filter
icon-shield
icon-thumbs-up-outline
icon-bell
icon-minus-outline
Code Preview
icon-plus-outline
icon-question-circle
icon-tag
icon-cart
icon-payment-visa
icon-payment-master-card
icon-payment-amex
icon-payment-paypal
icon-payment-afterpay
icon-payment-zip
icon-calendar
icon-map-pin
icon-person
icon-link-outline
icon-facebook
icon-twitter
icon-share