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.
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
