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