Colours

Brand
Token Role Value Example
primary Primary brand colour

#00426A
primary-hover Primary color when hover

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

#FFFFFF

 Aa
secondary Secondary brand colour

#3EA9DA
secondary-hover Secondary color when hover

#7AB8DD
secondary-content Foreground content color to use on secondary color

#FFFFFF

 Aa
Functional
Token Role Value Example
success-bg Success background

#F2FDF5
success-content Foreground content color to use on success color

#078F46

 Aa
warning-bg Warning background

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

#C18B00

 Aa
error-bg Error Background

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

#C9211B

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

rgb(255, 255, 255)

#FFFFFF
whisper Off-White Background

#FAFAFA
grey-100 Weakest background color used for decorative purposes

#F1F1F1
dark-overlay Background color used for overlays rgba(0, 0, 0.04)
Borders
Token Role Value Example
border Default border color

#E4E4E4
border-focus Border color when focused

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

#00273F

 Aa
grey-700 Used for body text

#3A505E

 Aa
grey-500 Weaker body text for visual hierarchy

#6F7A85

 Aa
grey-400 Weaker body text for visual hierarchy

#A4A8AF

 Aa
grey-100 Used for body text on inverse backgrounds

#F1F1F1

 Aa

Typographys

Display Token Size Line-height Weight
Headline 1 text-5xl 48px 54px 700
Headline 2 text-4xl 36px 42px 700
Headline 3 text-3xl 30px 36px 700
Headline 4 text-2xl 24px 30px 700
Headline 5 text-xl-h 22px 28px 700
Headline 6 text-xl 20px 28px 700
Body 1 medium text-lg 18px 24px 500
Body text-base 16px 24px 400
Body small text-sm 14px 22px 400
Body small text-xs 12px 16px 400
Text Link link 14px 22px 400
Text Link link-capitalize 14px 22px/0.5px 400
all cap 12 text-xs-cap 12px 20px/0.4px 700
all cap 13 text-sm-h-cap 13px 20px/0.5px 700
all cap 14 text-sm-cap 14px 22px/0.5px 700
all cap 15 text-base-cap 16px 24px/0.5px 700

Buttons

Role Token Enable Disabled
Medium button button-medium
Outlined button button-outlined
Small button button-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

24 of 90 products

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-faild
icon-success
icon-search
icon-mappin
icon-facebook
icon-instagram
icon-pinterest
icon-user
icon-arrow-right
icon-arrow-left
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-filter
icon-share
icon-plus
icon-minus
icon-location
icon-phone
icon-info
icon-info-2
icon-chevron-down-outline
Code Preview
icon-eye
icon-logout
icon-share-social
icon-paypal
icon-klarna
icon-zip
icon-afterpay