Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(37, 48, 71)

#253047
primary-hover Primary color when hover

rgb(61, 78, 114)

#3D4E72
secondary Secondary brand colour

rgb(65, 158, 163)

#419EA3
secondary-hover Secondary color when hover

rgb(0, 171, 155)

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

rgb(17, 121, 126)

#11797E

 Aa
Functional
Token Role Value Example
success-bg Success background

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

#419EA3

 Aa
warning-bg Warning background

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

#E09C31

 Aa
error-bg Error Background

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

#C3000C

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

#0ED6D3
accent-1-hover Accent colour 1 hover

#00C2C0
accent-2 Accent colour 2

linear-gradient(180deg, #03A6D7 0%, #73D8D5 100%)
accent-2-hover Accent colour 2 hover

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

rgb(255, 255, 255)

#FFFFFF
overlay Background color used for overlays rgba(14, 23, 43, 0.16)
grey-100 Weakest background color used for decorative purposes

#F5F5F6
Borders
Token Role Value Example
border Default border color on white backgrounds

#E8E9EA
border-custom Default border color on grey backgrounds

#E3E3EA
border-green Footer border colour in the green section

#B5E7EA
border-focus Border color when focused

#253047
border-error Error border color

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

#343F57

 Aa
grey-600 Used for headlines

#445069

 Aa
grey-500 Weaker body text for visual hierarchy

#6D7485

 Aa
grey-400 Weaker body text for visual hierarchy

#C8CCD0

 Aa
grey-300 Weaker body text for visual hierarchy

#ECECEF

 Aa
grey-100 Used for body text on inverse backgrounds

#F5F5F6

 Aa
link Used for text links

#445069

 Aa
link-hover Used for text links when hover

#419EA3

 Aa

Typographys

Display Token Size Line-height Weight
h1
text-5xl
 48px 56px 700
h2
text-4xl
 36px 44px 700
h3
text-3xl
 30px 36px 700
h4
text-2xl
 24px 32px 700
h5
text-xl
 20px 28px 700
h6
text-lg
 18px 24px 700
Body Bold text-sm 15px 24px 700
Body text-sm 15px 24px 400
Body small text-xs 12px 16px 400
Text Link link 15px 24px 400

Buttons

Role Token Enable Disabled
Primary button button-primary
Outlined button button-outlined
Buttons with Icon button-icon
Button Small button-primary button-small
Button Large button-primary button-large

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Standard notification
Error notification
Success!Success notification
Be warned!Warning notification
Toaster notification

Slideout

Heading 1
Content slideout 1
Heading 2
Content slideout 2

Modal dialog

Content modal

Quantity Counter

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-outline
icon-close-circle-outline
icon-truck
icon-search
icon-facebook
icon-instagram
icon-pinterest
icon-user-circle
icon-heart-outline
icon-chevron-right
icon-chevron-left
icon-arrow-forward-outline
icon-chevron-up-outline
icon-chevron-down-outline
icon-chevron-forward-outline
icon-chevron-back-outline
icon-checkmark-outline
Code Preview
icon-filter
icon-plus
icon-minus
icon-location
icon-phone
icon-info-circle
icon-arrow-up-right
icon-list-circle
icon-lock-closed
icon-grid
icon-bookmark
icon-link
icon-download
icon-chatbox
Code Preview
icon-newspaper
icon-clipboard-outline
icon-mail-outline
icon-login
icon-logout
icon-zoom
icon-ellipsis
icon-visa
icon-amex
icon-mastercard
icon-paypal
icon-googlepay
icon-applepay
icon-zip