Typography

These typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

If you edit styles here, they will change across the site.

Desktop
H1

H1 - 48

H2

H2 - 36

H3

H3 - 30

H4

H4 - 24

T5
T5 - 20
H6
H6 - 18
BODY
Body text - 16
Tablet
H1

H1 - 36

H2

H2 - 30

H3

H3 - 24

H4

H4 - 20

T5
T5 - 18
H6
H6 - 18
BODY
Body text - 16
Mobile
H1

H1 - 32

H2

H2 - 24

H3

H3 - 20

H4

H4 - 18

T5
T5 - 16
H6
H6 - 16
BODY
Body text - 16
Rich text in a Blog

H1

H2

H3

H4

H5
H6

Body

Bold body

Link text

Block quote
  • List item 1
  • List item 2
  1. Ordered list item 1 on a really long line. Ordered list item 1 on a really long line
  2. Ordered list item 2

Colour

These colours have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text Colours

FONT COLOUR - DARK
#32325D
FONT COLOUR - MID
#4C516B
FONT COLOUR - LIGHT
#525F7F

Brand Colours

BLUEBERRY 800 - PRIMARY
#0F1C70
BLUEBERRY 900
#000044
TEAL 400 - PRIMARY
#17D5D1
TEAL 800
#006878
ROYAL BLUE  500 - PRIMARY
#5573C6
WATERMELON 400 - PRIMARY
#FF4D5F
LEMON 400 - PRIMARY
#FFD400
GREY 800 - PRIMARY
#525F7F

Neutral Colours

GREY 800
#32325D
GREY 600
#525F7F
GREY 400
#B7BDCF
GREY 200
#E9EBF0
GREY 100
#F5F7FA
WHITE
#FFFFFF
FOOTER