Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(0, 0, 0)

#000000
primary-hover Primary color when hover

rgb(51, 51, 51)

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

rgb(255, 255, 255)

#FFFFFF

 Aa
secondary Secondary brand colour

rgb(72, 0, 42)

#04B4A1
secondary-hover Secondary color when hover

rgb(0, 171, 155)

#008C7D
secondary-content Foreground content color to use on secondary color

rgb(255, 255, 255)

#FFFFFF

 Aa
Functional
Token Role Value Example
info Info colour

rgb(128, 128, 128)

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

rgb(255, 255, 255)

#FFFFFF

 Aa
success Success colour

rgb(72, 0, 42)

#00BDAC
success-content Foreground content color to use on success color

rgb(255, 255, 255)

#FFFFFF

 Aa
warning Warning colour

rgb(245, 158, 11)

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

rgb(255, 255, 255)

#FFFFFF

 Aa
error Error colour

rgb(211, 15, 15)

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

rgb(255, 255, 255)

#FFFFFF

 Aa
Accent
Token Role Value Example
accent-1 Accent colour 1

#D9D7B2
accent-2 Accent colour 2

#B7D0D4
accent-3 Accent colour 3

#AB839D
accent-4 Accent colour 4

#F8D584
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(246, 246, 246)

#F6F6F6
background-overlay Background color used for overlays rgba(0, 0, 0, 0.2)
Borders
Token Role Value Example
border-default Default border color

rgb(170, 170, 170)

#AAAAAA
border-light Light border color

rgb(224, 224, 224)

#E0E0E0
border-focus Border color when focused

rgb(0, 0, 0)

#000000
border-error Error border color

rgb(211, 15, 15)

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

rgb(5, 6, 6)

#050606

 Aa
grey-700 Used for body text

rgb(51, 51, 51)

#333333

 Aa
grey-500 Weaker body text for visual hierarchy

rgb(128, 128, 128)

#808080

 Aa
grey-100 Used for body text on inverse backgrounds

rrgb(246, 246, 246)

#F6F6F6

 Aa
white Used for headlines on inverse backgrounds

rgb(255, 255, 255)

#FFFFFF

 Aa
link Used for text links

rgb(51, 51, 51)

#333333

 Aa
link-hover Used for text links when hover

rgb(0, 171, 155)

#00AB9B

 Aa

Typographys

Display Token Size Line-height Weight
Headline 1 text-5xl 48px 54px 700
Headline 2 text-4xl 36px 40px 700
Headline 3 text-3xl 30px 36px 700
Headline 4 text-2xl 24px 32px 700
Headline 5 text-xl 20px 28px 700
Body Bold text-lg 18px 28px 400
Body Bold text-base 16px 24px 700
Body text-base 16px 24px 400
Body text-sm 14px 24px 400
All caps text-xs 12px 22px 700
Text Link link 14px 24px 400
Body small bold text-xs 12px 22px 700
Body small text-xs 12px 22px 400
Label label 14px 22px / letter-spacing: 1px 700

Buttons

Role Token Enable Disabled
Primary button button-primary
Secondary button button-secondary
Outlined button button-outlined
Large button button-large
Button White button-white
Outlined white button button-outlined-white
Product card button-add-to-bag
Product card button-in-bag

Forms

Text inputs

Invalid email address

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Standard notification
Error notification
Success notification
Warning notification
Toaster notification
Countdown timer

Preact test

Slideout

Heading 1
Content slideout 1
Heading 2
Content slideout 2

Modal dialog

Content modal

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

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

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-faild
icon-success
icon-search
icon-facebook
icon-instagram
icon-pinterest
icon-apple
icon-google
icon-person
icon-person-outline
icon-arrow-right
icon-arrow-left
icon-shield
icon-heart
icon-heart-2
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-plus
icon-minus
icon-location
icon-phone
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
icon-zoom
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