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
Secondary
The secondary colour palette is used alongside the primary to indicate to the user it’s the secondary focus.
secondary
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
Heading 1
Heading style applied to 'H1' and '.H1'
Regular
Medium
Bold
Black
Heading 2
Heading style applied to 'H2' and '.H2'
Regular
Medium
Bold
Black
Heading 3
Heading style applied to 'H3' and '.H3'
Regular
Medium
Bold
Black
Heading 4
Heading style applied to 'H4' and '.H4'
Regular
Medium
Bold
Black
Heading 5
Heading style applied to 'H5' and '.H5'
Regular
Medium
Bold
Black
Heading 6
Heading style applied to 'H6' and '.H6'
Regular
Medium
Bold
Black
Large Paragraph
Large Paragraph styling using 'text-lg'.
Regular
Medium
Bold
Black
Paragraph
Paragraph styling using 'text-base'. Default font size unless changed or inherit by parent element
Regular
Medium
Bold
Black
Small Paragraph
Small Paragraph styling using 'text-sm'.
Regular
Medium
Bold
Black
Extra Small Paragraph / Caption
Extra Small Paragraph styling using 'text-xs'.
Regular
Medium
Bold
Black
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'.
Button Secondary
Uses the class 'btn' and 'btn-secondary'.
Button Icons
Using a combination of primary and secondary button styles with icons.
Style Guide