Brands primary brand color is the recognisable brand Green. The brands secondary color, Charcoal, functions as a base tone for contrast, while the Accent Red is used to highlight important information.

Should be used for accents and backgrounds paired with text for a good contrast ratio.

Should be used for accents and backgrounds paired with text for a good contrast ratio.

Signal Colours are used solely for warnings and status messages.

Tungsten is a sans-serif typeface released by Hoefler & Frere-Jones (now known as Hoefler & Co.) in 2009. This style of flat-sided sans-serif is known as gaspipe and was popular with poster designers of the twentieth century as the flat sides made it easy to space letters.

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.

Heading One

Mobile Heading One

Heading Two

Mobile Heading Two

Heading Three

Mobile Heading Three

Heading Four

Mobile Heading Four

Heading Five

Mobile Heading Five

Heading Six

Mobile Heading Six

Paragraph Default

Paragraph Default

Paragraph Small

Paragraph Small

Navigation

Navigation

Button

Button

Label

Label

Caption

Caption

In the icon library there are a wide range of icons available for all applications.

Global icons will be used consistently, whereas custom icons add unique character across the brand.

The icons have been simplified and made primarily monotone. Use the render 'icon-[name]' method to render an icon snippet.

A range of provided patterns and textures are available to use from the brand style guide in the patterns library.

Buttons are used to initiate an action or trigger a link. Button labels express what action will occur when interacted with.

They should have clear and concise labels, with the option of a supporting icon if necessary for further clarification.

The Primary Navigation bar in the site's header is show here, including the hover state.

Some pages will also include a Secondary Navigation which weill adopt a similar atyle, however, it will also include an active state indicator for the currently-active page.

On small viewports, the Primary Navigation could change into a slide-out menu, while the Secondary Navigation could change to a dropdown.

Tags allow for an easy way to organize similar information into groups, without having to use separate pages to do so.

Some navigation sections will use a vertical list as shown below. On smaller viewports, the navigation list could be changed to a dropdown or accordion.