Colours

Brand Colours
Token Role Value Example
primary Primary Brand Colour

rgba(35, 32, 32, 1)

#232020
primary-hover Primary Colour on Hover

rgba(75, 72, 72, 1)

#4B4848
secondary Secondary Brand Colour

rgba(215, 239, 243, 1)

#D7EFF3
Notification Colours
Token Role Value Example
success-bg Success background

#F2FDF5
success-content Success Content Color

#459452

 Aa
warning-bg Warning background

#FEFCEA
warning-content Foreground content color to use on warning color

#F59E0B

 Aa
error-bg Error Background

#FCF2F2
error-content Error Content Color

#F51010

 Aa
Background Overlays
Token Role Value Example
dark-overlay Dark Page Overlay rgba(0, 0, 0, 0.4)
Greyscale Colours
Token Role Value Example
grey-900 Used for Headings

#232020

 Aa
grey-700 Used for Body

#54595F

 Aa
grey-500 Weaker Text

#7A7A7A

 Aa
grey-400 Weakest Text

#B0B0B0

 Aa
grey-300 Weakest Text

#DADADA

 Aa
grey-200 Used for Borders

#EBEBEB

 Aa
grey-100 Used for Backgrounds

#F2F2F2

 Aa
white Used for Backgrounds

#FFFFFF

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 20px 28px 400
Headline 6 text-lg 18px 24px 400
P1 Bold text-base 16px 24px 500
P1 text-base 16px 24px 400
P2 Bold text-sm 14px 22px 500
P2 text-sm 14px 20px 400
P3 Bold text-xs 12px 16px 700
P3 text-xs 12px 16px 400
P3 Uppercase text-xxs 12px normal 600
Button Bold text-button-bold 14px 14px 600
Button Regular text-button 14px 14px 400
Text Link link 14px 22px 400
Text Link Hover link-hover 14px 22px 400
Small Text Link link-small 14px 22px 400

Bold Text Link

 link-bold 16px 24px 500

Buttons

Role Token Enable Disabled
Small button button-small
Primary button button-primary
Large button button-large
Outlined button small button-outlined
Outlined button medium button-outlined
Outlined button large button-outlined
Light button small button-light
Light button medium button-light
Light button large button-light
Outlined button white button-outlined-white

Forms

Text inputs

Invalid email address

Text area

Dropdown

Select a topic
Please Select

Radio button

Checkboxes

Toggle

Modules

Notifications

Info notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Success notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Warning notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Info notification

Toaster notification

Error Toaster

Slideout

Slide Up Modal

Modal dialog

Additionals

Pagination

Breadcrumbs

  1. Home
  2. 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.

Badge & label

Display Token
Badge badge
Badge 2 badge-2
Badge 3 badge-3

Preact modules

Carousel

Carousel Swiper
Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Grid
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-search
icon-person
icon-user
icon-chevron-right
icon-chevron-left
icon-chevron-right-2
icon-chevron-left-2
icon-chevron-right-3
icon-chevron-up
icon-chevron-down
Code Preview
icon-arrow-right
icon-trash
icon-location
icon-logout
icon-truck
icon-facebook
icon-email
icon-phone
icon-plus-circle
icon-plus
icon-minus
icon-headset
Code Preview
icon-faild
icon-close-outline
icon-check
icon-help
icon-error-circle
icon-info-cirlce
icon-success-circle
icon-link-break
icon-fern-leaf
icon-afterpay