Colours

Brand
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
Functional
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
Background
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)
Borders
Token Role Value Example
border Default border color

#E7E7E7
border-focus Border color when focused

#7A7D81
border-error Error border color

#C9211B
Typography
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

Typographys

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

Buttons

Role Token Enable Disabled
Small button button-small
Medium button button-medium
Outlined button button-outlined
Outlined hollow button button-outlined-hollow
Small outlined button button-outlined-small

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

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.

Slideout

Heading 1
Content slideout 1
Heading 2
Content slideout 2

Modal dialog

Content modal

Quantity Item

Loader Preact

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.

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

Carousel

Carousel Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Grid
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Hide dots
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Disabled
Slide 1
Slide 2
Slide 3
Slide 4
Carousel Hide naviation
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Carousel Swiper
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

Icons

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