Web colour palette

1. Primary colours

• All are compliant AAA or AA
• Compliant as a background colour with white text on top
• Compliant as text on a white background 
   

2. Secondary colours

• Compliant AAA when used with black text
• Available only in the button and card component (use of black text on top of these colours is hard coded into the component)
   

3. Background tints

• Can be used to create blocks of background colour on a web page to seperate and draw attention to content 

4. Neutrals

• Addition of a new dark grey
   

Headings

Use sentence case unless there are proper nouns or names in the heading

• Use on Right sidebar template
• Only to be used at the top of the page 
• Do not use more than one H1 on a page
• Font: normal 46px 'GillSansMTProMedium';

• Use on Full width template or Full browser window template
• Only to be used at the top of the page 
• Do not use more than one H1 on a page
• Font: normal 60px; 'GillSansMTProMedium';

• Used on Full browser window, Full width and Right sidebar templates in the main body
• Not to be used in the right-hand column of the Right sidebar template
• Used for a subsite title 
• Can be used under an H1 as a subtitle
• Can be used multiple times on a page 
• Font: normal 26px; 'GillSansMTProBook';

• Used on Full browser window, Full width and Right sidebar templates in the main body
• Not to be used in the right-hand column of the Right sidebar template
• Can be used under an H1 as a subtitle 
• Can be used multiple times on a page 
• Font: normal 26px; 'GillSansMTProBook';

• Used for a section title
• An older heading style used in the Right sidebar template main body
• Not to be used in the right-hand column of the Right sidebar template 
• Can be used multiple times on a page 
• Font: normal 21px; 'GillSansMTProMedium';

• Used after the H2 as a subtitle
• Commonly used in the Full width and Right sidebar templates main body
• Can be used multiple times on a page 
• Font: bold 20px; 'Arial';

• Used after the H3 as a subtitle
• Used for a sidebar title in the Right sidebar template
• Can be used multiple times on a page
• Font: normal 21px; 'GillSansMTProMedium';

• Used after the H4 as a subtitle
• Can be used on the Right sidebar template
• Do not use on the Full width or Full browser window templates
• Can be used multiple times on a page
• Do not use with X-large text style
• Font: normal 18px; 'Arial';

• Used after the H5 as a subtitle
• Do not use with x-large or large text styles
• Do not use on the Full width or Full browser window templates
• Can be used multiple times on a page
• Font: bold 15px; 'Arial';

Rich-text

X-large text style:
Use on the full window template and full width template
font-size: 18px; line-height: 30px; font-family: Arial

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading H2

Heading H3

X-large text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons / Call to action

Colour options

Simple styles

Tables

Default table with default text size

Table with text size large and options (horizontal lines, vertical lines).

Table with text size X-large and options (horizontal lines, vertical lines, hover, shading).