Colours

Brand Colours
Token Role Value Example
primary Primary brand colour

rgba(94, 10, 45, 1)

#5E0A2D

primary-hover Primary Colour on Hover rgba(94, 10, 45, 0.8)
secondary Primary brand colour

rgba(0, 151, 157, 1)

#00979D

secondary-hover Secondary Colour on Hover rgba(0, 151, 157, 0.8)
burgandy Brand Colour

rgba(94, 10, 45, 1)

#5E0A2D

magenta Brand Colour

rgba(255, 147, 237, 1)

#FF93ED

teal-900 Brand Colour

rgba(0, 99, 103, 1)

#006367

teal-600 Brand Colour

rgba(0, 151, 157, 1)

#00979D

teal-500 Brand Colour

rgba(106, 215, 202, 1)

#6AD7CA

mint Brand Colour

rgba(148, 250, 222, 1)

#94FADE

beige-500 Used for Backgrounds

rgba(249, 214, 189, 1)

#F9D6BD

beige-200 Used for Backgrounds

rgba(249, 230, 218, 1)

#F9E6DA

beige-100 Used for Backgrounds

rgba(250, 239, 231, 1)

#FAEFE7

taupe-300 Used for Dividers

rgba(187, 160, 145, 1)

#BBA091

taupe-200 Used for Dividers

rgba(199, 184, 176, 1)

#C7B8B0

taupe-100 Used for Dividers

rgba(223, 214, 210, 1)

#DFD6D2

Notification Colours
Token Role Value Example
success-content Success Content Color

#006367

Aa
error-content Error Content Color

#B22636

Aa
Background Overlays
Token Role Value Example
dark-overlay Background color used for overlays rgba(0, 0, 0, 0.3)
Greyscale Colours
Token Role Value Example
grey-900 Used for Headings

#1D1D1D

Aa
grey-700 Used for Body

#515151

Aa
grey-500 Grey

#858585

Aa
grey-400 Grey

#B0B0B0

Aa
grey-300 Used for Borders

#D2D2D2

Aa
grey-200 Used for Borders

#E5E5E5

Aa
grey-100 Used for Borders

#F6F6F6

Aa
white Used for Backgrounds

rgba(253, 252, 252, 1)

#FDFCFC

Typographys

Display Token Size Line-height Letter-spacing Weight
Hero text-7xl 66px 66px 2px 700
Hero text-6xl 54px 54px 2px 700
Hero text-5xl 40px 40px 4px 700
Hero text-4xl 28px 34px 2px 700
Headline text-3xl 28px 36px 0px 500
Headline text-2xl 24px 36px 0px 500
Headline text-xl 20px 28px 0px 500
Headline text-heading-lg 18px 24px 0px 500
Body text-lg 18px 28px 0px 300
Body text-base 16px 24px 0px 500
Body text-base 16px 24px 0px 300
Body text-sm 14px 22px 0px 600
body text-sm 14px 22px 0px 300
Body text-xs 12px 16px 0px 600
Body text-xs 12px 16px 0px 400
link 14px 22px 0px 300
link-hover 14px 22px 0px 300
Button text-button 15px 22px 1px 500
Button text-button-small 13px 20px 1px 500

Buttons

Role Token Enable Disabled
Primary button button-primary
Primary white button button-primary-white
Secondary button button-secondary
Outlined button button-outlined
Small button button-small

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Modules

Notifications

Success notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Slideout

Modal dialog

Additionals

Pagination

Navigation

Load More

Showing 20 of 36

Page loader

Breadcrumbs

  1. Home
  2. Styleguide

Accordion

Badge & label

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

Preact modules

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-faild
icon-success
icon-search
icon-person
icon-twitter
icon-pinterest
icon-tiktok
icon-facebook
icon-instagram
icon-email
icon-arrow-right
icon-timer
Code Preview
icon-chevron-up
icon-chevron-down
icon-filter
icon-star
icon-star-empty
icon-success-circle
icon-calendar
icon-truck
icon-marker
icon-plus
icon-plus-2
icon-minus
icon-loader
icon-play-circle
Code Preview
icon-chevron-right
icon-chevron-left
icon-chevron-right-2
icon-chevron-left-2
icon-pen
icon-order-box
icon-clock
icon-visa
icon-mastercard
icon-paypal
icon-googlepay
icon-applepay
icon-klarna
icon-zip
icon-afterpay

Border Image Horizontal

Border Image Vertical