Colours

Brand
Token Role Value Example
primary Primary brand colour

rgb(211, 85, 170)

#D355AA
primary-focus Primary color when hover

rgb(232, 104, 190)

#E868BE
brand-green Accent Colour

rgb(41, 98, 90)

#29625A
brand-yellow Accent Colour

rgb(223, 158, 82)

#DF9E52
brand-pink-light Accent Colour

rgb(242, 186, 206)

#F2BACE
brand-pink-medium Accent Colour

rgb(229, 160, 185)

#E5A0B9
brand-gradient Accent Colour

linear-gradient(90deg, #E9C5B7 0%, #D355AA 100%)
Functional
Token Role Value Example
success-bg Success background

#E7FCEB
success-content Success Content Color

#1B7C6F

 Aa
warning-bg Warning background

#FCF2DA
warning-content Warning Content Color

#DD7E10

 Aa
error-bg Error Background

#FFE9ED
error-content Error Content Color

#D00E48

 Aa
Background
Token Role Value Example
white White Page Background

rgb(255, 255, 255)

#FFFFFF
grey-100 Grey Page Background

#F7F8FA
pink Pink Background

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

#E1E1E1
border-dark Focused Border

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

#000000

 Aa
grey-700 Used for body text

#494A4B

 Aa
grey-500 Weaker body text for visual hierarchy

#9B9B9B

 Aa
grey-400 Weaker body text for visual hierarchy

#BCBCBC

 Aa
grey-300 For Headings on Inverse

#D0D0D0

 Aa
grey-100 Used for body text on inverse backgrounds

#F7F8FA

 Aa

Typographys

Display Token Size Line-height Weight
h1 text-5xl 48px 54px 900
h2 text-4xl 36px 42px 900
h3 text-3xl 30px 36px 900
h4 text-2xl 24px 32px 900
h5 text-base 16px 24px 700
h1 text-3xl 30px 36px 500
h2 text-2xl 24px 32px 500
h3 text-xxl 22px 32px 500
h4 text-xl 20px 28px 500
h5 text-lg 18px 24px 500
h6 text-base 16px 24px 500
Text Xl text-base 20px 28px 500
BASE Bold text-base 16px 24px 700
BASE Medium text-base 16px 24px 500
BASE Regular (P1) text-base 16px 24px 400
SM Bold text-sm 16px 24px 700
SM Medium text-sm 14px 22px 700
SM Regular (P2) text-sm 14px 22px 400
XS Regular (P3) text-xs 12px 16px 400
XXS Regular text-xxs 10px 10px 500
Text Link link 14px 22px 400
Button Regular link 15px 22px 700
Button Large link 18px 22px 700

Buttons

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

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 Counter