Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(221, 190, 114)

#DDBE72
primary-hover Primary color when focused

rgb(212, 177, 89)

#D4B159
primary-content Foreground content color to use on primary color

rgb(255, 255, 255)

#FFFFFF

 Aa
secondary Secondary brand colour

rgb(40, 40, 40)

#282828
secondary-hover Secondary color when focused

rgb(66, 66, 66)

#424242
secondary-content Foreground content color to use on secondary color

rgb(255, 255, 255)

#FFFFFF

 Aa
Functional
Token Role Value Example
success Success color

#498F5D
warning Warning color

#EA903C
error Error Color

#E74C3C
Background
Token Role Value Example
white Background color used for the main page body

rgb(255, 255, 255)

#FFFFFF
dark-overlay Background color used for overlays rgba(0, 0, 0, 0.05)
beige Background color used for overlays #EDE9DD
grey-100 Weakest background color used for decorative purposes

#F6F6F6
Borders
Token Role Value Example
border Default border color

#999999
border-light Border color when focused

#E4E4E4
border-focus Light border color

#DDBE72
border-beige used in footer

#D6D4CA
border-error Error border color

#E74C3C
Typography
Token Role Value Example
grey-900 Used for headlines

#282828

 Aa
grey-700 Used for body text

#424242

 Aa
grey-600 Weaker body text for visual hierarchy

#737373

 Aa
grey-500 Weaker body text for visual hierarchy

#979797

 Aa
grey-100 Used for body text on inverse backgrounds

#F6F6F6

 Aa
white Used for body text on inverse backgrounds

#FFFFFF

 Aa
link Used for text links

#424242

 Aa
link-hover Used for text links when focused

#D4B159

 Aa

Typographys

Display Token Size Line-height Weight
Headline 1 text-5xl 48px 56px 500, 600
Headline 2 text-4xl 36px 48px 500, 600
Headline 3 text-3xl 30px 40px 500, 600
Headline 4 text-2xl 24px 32px 500, 600
Headline 5 text-xl 20px 28px 500, 600
Large Paragraph text-base 18px 28px 300, 500
Paragraph text-sm 16px 24px 300, 500
Small Paragraph text-xs 14px 22px 300, 500
Button text-sm 16px 24px 300, 500
Text Link text-sm 16px 24px 300, 500
Sub-heading 1 text-sub-heading-1 12px 14px (Letter-spacing: 1px)
Sub-heading 2 text-sub-heading-2 11px 12px (Letter-spacing: 1px)
80px text-8xl 80px 80px

Buttons

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

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Standard notification
Error notification
Success notification
Warning notification
Toaster notification
Success Notification
Error Notification

Slideout

Heading 1
Content slideout 1
Heading 2
Content slideout 2

Modal dialog

Content modal

Quantity Item

Additionals

Pagination

Breadcrumbs

  1. Home
  2. Style Guide

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-faild
icon-success
icon-search
icon-facebook
icon-instagram
icon-tripadvisor
icon-linkedin
icon-youtube
icon-google
icon-person
icon-person-outline
icon-arrow-back
icon-arrow-right
icon-arrow-left
icon-shield
icon-heart
icon-heart-2
icon-chevron-forward-outline
icon-chevron-up
icon-chevron-right
icon-chevron-left
icon-chevron-left-2
icon-check
Code Preview
icon-trash
icon-arrow-right-2
icon-filter
icon-share
icon-help
icon-add-outline
icon-remove-outline
icon-location
icon-call
icon-account
icon-wine
icon-trophy-outline
icon-medal-outline
icon-image
icon-info
icon-info-2
icon-card
icon-truck
icon-clock
icon-note
icon-gift
icon-calendar
icon-tag
icon-giftcard
icon-chevron-down-outline
Code Preview
icon-eye
icon-chat
icon-home
icon-receipt
icon-logout
icon-share-social
icon-ellipsis
icon-forkknife
icon-gauge
icon-visa
icon-amex
icon-mastercard
icon-paypal
icon-googlepay
icon-applepay
icon-shoppay
icon-klarna
icon-zip
icon-afterpay