Colours

Brand Colours
Token Role Value Example
primary-black Primary Brand Colour

rgba(0, 0, 0, 1)

#000000
primary-cream Primary Brand Colour

rgba(240, 235, 231, 1)

#F0EBE7
primary-orange Primary Brand Colour

rgba(229, 158, 128, 1)

#E59E80
accent-clay Secondary Colour

rgba(204, 163, 163, 1)

#CCA3A3
accent-blue Secondary Colour

rgba(194, 212, 219, 1)

#C2D4DB
accent-green Secondary Colour

rgba(161, 171, 161, 1)

#A1ABA1
accent-purple Secondary Colour

rgba(191, 189, 219, 1)

#BFBDDB
accent-bubblegum Secondary Colour

rgba(255, 194, 255, 1)

#FFC2FF
accent-honeycomb Secondary Colour

rgba(245, 240, 115, 1)

#F5F073
accent-frog Secondary Colour

rgba(115, 229, 163, 1)

#73E5A3
accent-firetruck Secondary Colour

rgba(240, 135, 143, 1)

#F0878F
accent-slime Secondary Colour

rgba(194, 245, 107, 1)

#C2F56B
accent-jellyfish Secondary Colour

rgba(0, 222, 252, 1)

#00DEFC
accent-oj Secondary Colour

rgba(255, 176, 102, 1)

#FFB066
accent-monster Secondary Colour

rgba(153, 184, 255, 1)

#99B8FF
Notification Colours
Token Role Value Example
success-content Success Content Color

rgba(70, 143, 81, 1)

#468F51
error-content Error Content Color

rgba(242, 44, 44, 1)

#F22C2C
warning-content Warning Content Color

rgba(245, 158, 11, 1)

#F59E0B
Background Overlays
Token Role Value Example
dark-overlay Dark Page Overlay rgba(0, 0, 0, 0.3)
Greyscale Colours
Token Role Value Example
grey-900 Used for Headings

rgb(0, 0, 0, 1)

#000000

 Aa
grey-700 Used for Body

rgba(48, 46, 46, 1)

#302E2E

 Aa
grey-500 Weaker Text

rgba(95, 93, 91, 1)

#5F5D5B

 Aa
grey-400 Weaker Text

rgba(167, 162, 160, 1)

#A7A2A0

 Aa
grey-300 Weaker Text

rgba(214, 209, 205, 1)

#D6D1CD

 Aa
grey-200 Used for Borders

rgba(238, 232, 228, 1)

#EEE8E4

 Aa
grey-100 Used for Backgrounds

rgba(247, 244, 242, 1)

#F7F4F2
white Used for Backgrounds

rgb(255, 255, 255)

#FFFFFF

Typographys

Display Token Size Line-height Weight Letter Spacing
Headline 1 text-5xl 48px 54px 400
Headline 2 text-4xl 36px 48px 400
Headline 3 text-3xl 30px 36px 400
Headline 4 text-2xl 24px 32px 400
Headline 5 text-xl 20px 28px 600
Headline 6 text-lg 18px 28px 600
P1 Semi Bold text-base 18px 26px 600 0.2px
P1 Regular text-base 18px 26px 400 0.2px
P2 Semi Bold text-sm 16px 24px 600 0.2px
P2 Regular text-sm 16px 24px 400 0.2px
P3 Semi Bold text-xs 14px 22px 600 0.3px
P3 Regular text-xs 14px 22px 400 0.3px
P4 Semi Bold text-xxs 12px 18px 600 0.2px
P4 Regular text-xxs 12px 18px 400 0.2px
Button Semi Bold text-button-large 17px 22px 600 0.4px
Button Regular text-button 16px 22px 400 0.4px
P2 Text Link text-link-sm 16px 24px 400 0.4px
P3 Text Link link 14px 22px 400 0.4px
Text Link Hover link-hover 14px 22px 400 0.4px

Buttons

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

Forms

Text inputs

Invalid email address

Text area

Dropdown

Radio button

Checkboxes

Toggle

Modules

Notifications

Info 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.

Info Notification
Success notification
Error notification
Warning notification

Slideout

Heading 1

Content slideout 1

Heading 2

Content slideout 2

Modal dialog

Content modal

Page loader

Vertical Scroll

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.

Horizontal Scroll

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.

Additionals

Pagination

Breadcrumbs

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

Badge & label

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

Preact modules

Carousel

Carousel Embla
Carousel Embla Native
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

Carousel Custom Arrow Heading

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

Carousel Arrow Right

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-shopping-bag-2
icon-close
icon-warning
icon-search
icon-twitter
icon-facebook
icon-instagram
icon-pinterest
icon-youtube
icon-tiktok
icon-chevron-up
icon-chevron-down
icon-chevron-down-bold
icon-chevron-left
icon-chevron-right
icon-chevron-right-2
icon-chevron-right-3
icon-clock
icon-ruler
Code Preview
icon-filter
icon-user-circle
icon-success
icon-calendar
icon-truck
icon-phone
icon-phone-full
icon-plus
icon-minus
icon-truck
icon-leaf
icon-leaf-2
icon-envelop
icon-drop
icon-cake
icon-arrows-clock-wise
icon-question
icon-shield
Code Preview
icon-heart
icon-hand
icon-hand-bag
icon-accessibility
icon-moon-stars
icon-newspaper
icon-play
icon-star
icon-user-circle-bold
icon-user-circle
icon-user-circle-plus
icon-x-circle
icon-error
icon-time
icon-calender
icon-check
icon-stack
icon-email
icon-arrow-clockwise