Fast Shipping
Extended Christmas Returns
14,000+ Reviews
British designed
Style Guide
Colour Palette
Primary
The primary colour palette is used across all the interactive elemetns such as CTA’s, links, inputs, active states, etc
primary
primary-hover
bg-gradient-to-r from-primary to-primary-hover
Secondary
The secondary colour palette is used alongside the primary to indicate to the user it’s the secondary focus.
secondary
Blue Grey
blue-grey
blue-grey-hover
bg-gradient-to-r from-blue-grey to-blue-grey-hover
Neutral Grey
neutral-grey
neutral-grey-hover
bg-gradient-to-r from-neutral-grey to-neutral-grey-hover
Greyscale
These greyscale colours are used to support secondary colours in backgrounds, text colours, seperators, models, etc
grey-50
grey-100
grey-200
grey-300
grey-400
grey-500
grey-600
grey-700
grey-800
grey-900
Success
These colours depict an emotion of positivity. Generally used across success, complete states.
success-50
success-100
success-200
success-400
success-600
Active
These colours depict an emotion of trust. Generally used for interactions and active states.
active-50
active-100
active-200
active-400
active-600
Warning
These colours depict an emotion of holding. Generally used across warning or on-hold states.
warning-50
warning-100
warning-200
warning-400
warning-600
Error
These colours depict an emotion of negativity. Generally used across error states.
error-50
error-100
error-200
error-400
error-600
Style Guide
Text Styles
Banner
Banner Text
Heading 1
Heading style applied to 'H1' and '.H1'
Regular
Medium
Bold
Heading 2
Heading style applied to 'H2' and '.H2'
Regular
Medium
Bold
Heading 3
Heading style applied to 'H3' and '.H3'
Regular
Medium
Bold
Heading 4
Heading style applied to 'H4' and '.H4'
Regular
Medium
Bold
Heading 5
Heading style applied to 'H5' and '.H5'
Regular
Medium
Bold
Heading 6
Heading style applied to 'H6' and '.H6'
Regular
Medium
Bold
Large Paragraph
Large Paragraph styling using 'text-lg'.
Regular
Medium
Bold
Paragraph
Paragraph styling using 'text-base'. Default font size unless changed or inherit by parent element
Regular
Medium
Bold
Small Paragraph
Small Paragraph styling using 'text-sm'.
Regular
Medium
Bold
Extra Small Paragraph / Caption
Extra Small Paragraph styling using 'text-xs'.
Regular
Medium
Bold
Hyperlink Styling
Basic styling for a link is applied by the parent element containing the class '.rte'
Style Guide
Button Styles
Large Button
Uses the class 'btn-lg' and 'btn-primary'.
Standard Button
Uses the class 'btn' and 'btn-primary'.
Small Button
Uses the class 'btn-sm' and 'btn-primary'.
Button Secondary
Uses the class 'btn' and 'btn-secondary'.
Button Tertiary
Uses the class 'btn' and 'btn-tertiary'.
Button Icons
Using a combination of primary and secondary button styles with icons.
Style Guide
