Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(204, 160, 86)

#CCA056
primary-hover Primary color when hover

rgb(238, 214, 156)

#EED69C
secondary Secondary brand colour

rgb(78, 95, 75)

#4E5F4B
secondary-hover Secondary color when hover

rgb(102, 124, 96)

#667C60
Functional
Token Role Value Example
info background Info background colour

rgb(243, 243, 237)

#F3F3ED
info-content Foreground content color to use on info color

rgb(78, 95, 75)

#4E5F4B

 Aa
success background Success background colour

rgb(243, 243, 237)

#5E7759
success-content Foreground content color to use on success color

rgb(94, 119, 89)

#5E7759

 Aa
warning background Warning background colour

rgb(254, 252, 234)

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

rgb(193, 139, 0)

#C18B00

 Aa
error background Error background colour

rgb(252, 242, 242)

#FCF2F2
error-content Foreground content color to use on error color

rgb(201, 33, 27)

#C9211B

 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

rgb(243, 243, 237)

#F3F3ED
background-overlay Background color used for overlays rgba(0, 0, 0, 0.2)
green-light Light Green Background

rgb(243, 243, 237)

#F3F3ED
purple-25 Background Color

rgb(244, 247, 253)

#F4F7FD
purple-50 Background Color

rgb(227, 232, 246)

#E3E8F6
purple-100 Background Color

rgb(142, 165, 219)

#8EA5DB
orange-50 Background Color

rgb(254, 251, 238)

#FEFBEE
orange-100 Background Color

rgb(252, 239, 204)

#FCEFCC
gradient Background Color

radial-gradient(294.44% 50% at 50.00% 50.00%, #FEFBEE 0%, #F1B64C 19.27%, #F98D29 32.81%, #F98D29 77.60%, #DF7838 100%)
Borders
Token Role Value Example
border-default Default border color

rgb(231, 231, 231)

#E7E7E7
border-focus Border color when focused

rgb(122, 125, 129)

#7A7D81
border-error Error border color

rgb(201, 33, 27)

#C9211B
border-grey-200 Used for border in faq about page

rgb(230, 232, 219)

#E6E8DB
border-secondary Secondary border color

rgb(82, 110, 176)

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

rgb(78, 95, 75)

#4E5F4B

 Aa
grey-700 Used for body text

rgb(74, 74, 74)

#4A4A4A

 Aa
grey-500 Weaker body text for visual hierarchy

rgb(122, 125, 129)

#7A7D81

 Aa
grey-400 Weakest Text

rgb(164, 168, 175)

#A4A8AF

 Aa
grey-100 Used for body text on inverse backgrounds

rgb(243, 243, 237)

#F3F3ED

 Aa
white Used for headlines on inverse backgrounds

rgb(255, 255, 255)

#FFFFFF

 Aa
link Used for text links

rgb(74, 74, 74)

#4A4A4A

 Aa

Typographys

Display Token Size Line-height Weight
Headline 1 text-5xl 48px 56px 700
Headline 2 text-4xl 36px 48px 700
Headline 3 text-3xl 30px 42px 700
Headline 4 text-2xl 24px 36px 700
Headline 5 text-xl 20px 32px 700
Nav text-nav 18px 24px 700
Body L Bold text-lg 18px 28px 700
Body L text-lg 18px 28px 500
Body M Bold text-bold 16px 24px 700
Body M text-base 16px 24px 400
Body S Bold text-sm 14px 20px 700
Body S text-sm 14px 20px 400
CAPTION text-caption 16px 24px 500
Button text-button 18px 22px 600
Text link text-link 16px 22px 700

Buttons

Role Token Enable Disabled
Primary button button-primary
Secondary button button-secondary
Outlined button button-outlined
Small button button-small
Large button button-large
Button White button-white
Outlined white button button-outlined-white

Forms

Text inputs

Invalid email address

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

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.

Preact test

Slideout

Heading 1
Content slideout 1
Heading 2
Content slideout 2

Modal dialog

Content modal

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
Badge custom badge-accent-1
Badge custom badge-accent-3
Badge custom badge-accent-4

Carousel

Carousel Fullwidth
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel Loop
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel Loop autoplay
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel perview = 2
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel perview = 3
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel perview = 4
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Carousel perview = 4 with gap
Slide 0
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9

Icons

Code Preview
icon-moon
icon-gut-health
icon-sparkles
icon-shield
icon-relaxation
icon-menu
icon-close
icon-book-open
icon-globe
icon-light
icon-leaf-outline
icon-play
icon-arrow-up
icon-arrow-up-right
icon-narrow-right
icon-tea-bag
icon-water-outline
Code Preview
icon-filter
icon-plus
icon-minus
icon-location
icon-clock
icon-chevron-down-outline
icon-person
icon-arrow-right
icon-arrow-left
icon-chevron-up
icon-thermometer-outline
Code Preview
icon-faild
icon-warning
icon-success
icon-search
icon-facebook
icon-instagram
icon-chevron-right
icon-chevron-left
icon-chevron-left-2
icon-check
icon-cup