- Your password must be at least 8 characters
- Your password must include at least one pro wrestling finishing move
Colours
Brand Colours
| Token | Role | Value | Example |
|---|---|---|---|
| primary | Primary brand colour |
rgb(216, 109, 119) #D86D77 |
|
| primary-hover | Primary color when hover |
rgb(198, 90, 100) #C65A64 |
|
| secondary | Secondary brand colour |
rgb(61, 59, 62) #3D3B3E |
|
| secondary-hover | Secondary color when hover |
rgb(40, 38, 41) #282629 |
|
| accent-colour-1 | Accent Colour 1 |
rgb(41, 132, 99) #298463 |
|
| accent-colour-2 | Accent Colour 2 |
rgb(249, 194, 1) #F9C201 |
|
| accent-colour-3 | Accent Colour 3 |
rgb(173, 190, 205) #ADBECD |
|
| accent-colour-4 | Accent Colour 4 |
rgb(242, 201, 195) #F2C9C3 |
Notification Colours
| Token | Role | Value | Example |
|---|---|---|---|
| info-bg | Info background colour |
rgb(246, 246, 246) #F6F6F6 |
|
| info-content | Foreground content color to use on info color |
rgb(18, 18, 18) #121212 |
Aa |
| success-bg | Success background |
rgb(242, 253, 245) #F2FDF5 |
|
| success-content | Foreground content color to use on success color |
rgb(12, 160, 107) #0CA06B |
Aa |
| error-bg | Error Background |
rgb(252, 242, 242) #FCF2F2 |
|
| error-content | Foreground content color to use on error color |
rgb(209, 13, 6) #D10D06 |
Aa |
| warning-bg | Warning background |
rgb(254, 252, 234) #FEFCEA |
|
| warning-content | Foreground content color to use on warning color |
rgb(245, 152, 11) #F5980B |
Aa |
Background Colours
| Token | Role | Value | Example |
|---|---|---|---|
| white | Background color used for the main page body |
rgb(255, 255, 255) #FFFFFF |
|
| white-overlay | Background color used for overlays | rgba(255, 255, 255, 0.3) | |
| grey-100 | Weakest background color used for decorative purposes |
rgb(246, 246, 246) #F6F6F6 |
|
| dark-overlay | Background color used for overlays | rgba(0, 0, 0, 0.24) |
Greyscale Colours (Typography)
| Token | Role | Value | Example |
|---|---|---|---|
| grey-900 | Used for headlines |
rgb(18, 18, 18) #121212 |
Aa |
| grey-700 | Used for body text |
rgb(60, 59, 60) #3C3B3C |
Aa |
| grey-500 | Weaker body text for visual hierarchy |
rgb(147, 145, 147) #939193 |
Aa |
| grey-300 | Weaker body text for visual hierarchy |
rgb(177, 174, 177) #B1AEB1 |
Aa |
| grey-100 | Used for body text on inverse backgrounds |
rgb(246, 246, 246) #F6F6F6 |
Aa |
| white | For Headings on Inverse |
rgb(255, 255, 255) #FFFFFF |
Border Colours
| Token | Role | Value | Example |
|---|---|---|---|
| border | Default border color |
rgb(231, 231, 231) #DDDDDD |
|
| border-focus | Border color when focused |
rgb(122, 125, 129) #7A7D81 |
|
| border-error | Error border color |
rgb(209, 13, 6) #D10D06 |
Typographys
| Display | Size | Line-height | Weight |
|---|---|---|---|
| h1 | 48px | 54px | 300 |
| h2 | 30px | 36px | 300 |
| h3 | 24px | 32px | 300 |
| h4 | 20px | 30px | 300 |
| h5 | 18px | 30px | 300 |
P1 |
16px | 28px | 300 |
P1 Bold |
16px | 28px | 400 |
P2 |
14px | 24px | 300 |
P2 Bold |
14px | 24px | 500 |
P3 |
12px | 20px | 300 |
| Button | 16px | 22px | 400 |
| Text link | 16px | 28px | 300 |
Forms
Text inputs
Invalid email address
Text area
Dropdown
Radio button
Checkboxes
Toggle
Modules
Notifications
There were 2 error with your submission
Attention needed
Warning notification
Success! Something went exactly as planned.
Success notification
Toaster notification
Error notifcation
Slideout
Heading 1
Content slideout 1
Heading 2
Content slideout 2
Modal dialog
Content modal
Additionals
Breadcrumbs
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.
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.
Scroll Bar
Product Tags (Badge & label)
| Display | Token |
|---|---|
| New | new |
| 30% Off | sale |
| Popular | badge |
| New Season | badge |
Tabs
Description
Size and Care
Pagination
You’ve viewed 36 of 90 products
Carousel
Gallery Dots
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
© 2024 Elm Lifestyle.
Oooh good choice! Added to wishlist