Colours
Primary Colours
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.
Primary
var(--color-primary-black)
Hex: #080c0f
Secondary
var(--color-primary-orange)
Hex: #8ad8f7
Accent
Should be used for accents and backgrounds paired with text for a good contrast ratio.
Accent One
var(--color-accent-red)
Hex: #ed1b3e
Accent Two
var(--color-accent-secondary-red)
Hex: #a31525
Background
Should be used for accents and backgrounds paired with text for a good contrast ratio.
Background One
var(--color-background-white)
Hex: #F6F4EE
Background Two
var(--color-white)
Hex: #ffffff
Alert / Error colour
Signal Colours are used solely for warnings and status messages.
Success
var(--color-success)
Hex: #6bbd4f
20 %
Alert
var(--color-warning)
Hex: #f0b743
20 %
Fail Red
var(--color-error)
Hex: #e45f5f
20 %
Fonts
Headings: Tungsten
Ab
Info
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.
Symbols and numbers
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™
Weights
Semi bold
Bold
Body: Roboto
Ab
Info
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.
Symbols and numbers
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789$£€/&@#%^*•()_+:;™
Weights
Regular
Bold
Paragraph Default
Paragraph Default
Paragraph Small
Paragraph Small
Label
Label
Icons
Icon library
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.
UI icons
Payment
Social
Patterns/Textures
Textures
A range of provided patterns and textures are available to use from the brand style guide in the patterns library.
UI Components
Buttons
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.
Anatomy
Primary
Secondary
Tertiary
Icon Buttons
UI Components
Navigation
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.
Input
Tabs
Tags allow for an easy way to organize similar information into groups, without having to use separate pages to do so.
List Navigation
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.
List
Breadcrumbs
Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.
To prevent breadcrumbs from becoming long and unwieldly on small viewports, they can be truncated.
Other UI Elements
Layout
Spacing
We are using an 4px grid, which means that the spacing across the page will be divisible by 4.
The spacing between elements should be consistent, and selected from the options below.
Grid
The flexible grid consists of 12 columns for Desktop and 2 columns for Mobile.
The spacing between the columns for both platforms is 8px, while the outer margins are 60px for Desktop and 16px for Mobile.