Fonts
Default fonts:
This is how fonts will appear by default. If you’re creating a section that uses a white or grey background, no action is needed. Simply set your HTML tag and that’s it!
No class needed
H1
H2
H3
H4
H5
H5
Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
UL
- List Item 1
- List Item 2
- List Item 3
OL
- List Item 1
- List Item 2
- List Item 3
No class needed
H1
H2
H3
H4
H5
H5
Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
UL
- List Item 1
- List Item 2
- List Item 3
OL
- List Item 1
- List Item 2
- List Item 3
Font colour variations:
Fonts need to have different colours when on a green or blue background. In order to do that, apply the classes listed below to the section or column that you have the colour applied to.
Use class: colour_section
H1
H2
H3
H4
H5
H5
Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
UL
- List Item 1
- List Item 2
- List Item 3
OL
- List Item 1
- List Item 2
- List Item 3
Use class: colour_section
H1
H2
H3
H4
H5
H5
Body Copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
UL
- List Item 1
- List Item 2
- List Item 3
OL
- List Item 1
- List Item 2
- List Item 3
Colours
Background Colours
We want the site to look as consistent as possible, for background colours please use the approved colours listed below.
Primary background colours
Use these whenever possible
Use global colour:
HH – White
- #FFFFFF
Use global colour:
HH – Light Grey
- #F8F8F8
Use global colour:
HH – Blue
- #0B4E87
Use global colour:
HH – Green
- #0DA14B
Secondary background colours
Use these when you need a little extra flexibility in the design
Use global colour:
HH – Lightest Blue
- #066CB2
Buttons
How to use buttons
Buttons are styled by default, simply drag a button into the section you want and it will be styled by default.
