Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(76, 76, 76)

#4C4C4C
primary-100 Primary 100 - Background disabled

rgb(244, 244, 244)

#F4F4F4
primary-300 Primary 300 - Text disabled

rgb(203, 203, 203)

#CBCBCB
primary-500 Primary 500 - Text faint

rgb(130, 130, 130)

#828282
primary-700 Primary brand colour

rgb(76, 76, 76)

#4C4C4C
primary-900 Primary 900 - Text strong

rgb(0, 0, 0)

#000000
Functional
Token Role Value Example
success-100 Success background

#DCFCE7
success-300

#86EFAC
success-500 Success border

#22C55E
success-700 Success text

#15803D
success-900

#14532D
warning-100 Warning background

#FFEDD5
warning-300

#FDBA74
warning-500 Warning border

#F97316
warning-700 Warning text

#D45A27
warning-900

#7C2D12
error-100 Error background

#FEE2E2
error-300

#FCA5A5
error-500 Error border

#EF4444
error-700 Error text

#D93030
error-900

#7F1D1D
info-100 Info background

#DBEAFE
info-300

#93C5FD
info-500 Info border

#3B82F6
info-700 Info text

#1D4ED8
info-900

#1E3A8A
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

#F4F4F4
dark-overlay Background color used for overlays rgba(0, 0, 0, 0.3)
Typography
Token Role Value Example
grey-900 Used for headlines

#000000

 Aa
grey-800

#242424

 Aa
grey-700 Used for body text

#4C4C4C

 Aa
grey-600

#666666

 Aa
grey-500 Weaker body text for visual hierarchy

#828282

 Aa
grey-400 Weaker body text for visual hierarchy

#A4A4A4

 Aa
grey-300 Weaker body text for visual hierarchy

#CBCBCB

 Aa
grey-200 Weaker body text for visual hierarchy

#E1E1E1

 Aa
grey-100 Used for body text on inverse backgrounds

#F4F4F4

 Aa
link Used for text links

#038A45

 Aa
link-hover Used for text links when hover

#2E9862

 Aa

Typographys

Display Token Size Line-height Weight
Hero 1 text-6xl 80px normal 400
Hero 2 text-5xl 64px 64px 400
Hero 3 text-4xl 40px 40px 400
Headline 4 text-3xl 30px 32px 400
Headline 5 text-2xl 24px 30px 400
Headline 6 text-xl 20px 22px 400
Headline 7 text-lg 18px 24px 400
P1 Medium text-base 16px 24px 500
P1 text-base 16px 24px 400
P2 Medium text-sm 14px 20px 500
P2 text-sm 14px 20px 400
BUTTON MEDIUM text-button 16px 22px 600
BUTTON REGULAR text-sm 16px 22px 500
Text Link link 14px 22px 400
Text Link Hover link-hover 14px 22px 400
Text Link Large link-large 16px 24px 400
Text Link Large Hover link-large-hover 16px 24px 400

Buttons

Role Token Enable Disabled
Primary button button-primary
Secondary button button-secondary
X Small button button-x-small
Small button button-small
Large button button-large
Outlined button button-outlined
Icon button button-icon

Forms

Text inputs

Invalid email address

Text area

Invalid message

Dropdown

Invalid message

Radio button

Checkboxes

Toggle

Modules

Notifications

Standard notification

Success notification

Error notification

Warning notification

Standard notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Success notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Error notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Warning notification

Augue pellentesque est diam aliquet. Odio et amet aliquam.

Slideout

Heading 1

Content slideout 1

Heading 2

Content slideout 2

Modal dialog

Content modal

Scrollbar

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Additionals

Pagination

Breadcrumbs

  1. Home
  3. 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.

Badge & label

Display Token
Badge badge
Badge 2 badge-2
Badge 3 badge-3

Preact modules

Carousel

Carousel Swiper
Fullwidth
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Grid
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Grid (Top Navigation)
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

Icons

Code Preview
icon-menu
icon-shopping-bag
icon-close
icon-faild
icon-twitter
icon-facebook
icon-arrow-circle-left
icon-filter
icon-logout
icon-bookmark
icon-share
icon-wishlist
Code Preview
icon-person
icon-error-circle
icon-info-circle
icon-success-circle
icon-plus
icon-minus
icon-chevron-up
icon-chevron-right
icon-chevron-left
icon-chevron-down
icon-chevron-left-2
icon-chevron-right-2
Code Preview
icon-check
icon-check-2
icon-star
icon-arrow-right
icon-arrow-left
icon-arrow-elbow-down-right
icon-paint-brush
icon-users-three