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

sdfsdfsdfInvalid 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

Modal dialog

Quantity Counter