Background Colour Palette

Primary

Secondary

Tertiary

Tertiary Offset

Text Colour Palette

Primary

Secondary

Tertiary

Grey Colour Palette

Light Grey

Standard Grey

Dark Grey

Typography

Font Family

Roboto Regular

Roboto Medium

Roboto Italic

Roboto Medium Italic

Typography styles

Roboto Regular Line height:

Typography line heights

Heading 1

Heading 2

Paragraph

Hyperlink

Typography examples inc. spacing

H1 Lorem ipsum dolor sit amet.

H2 Lorem ipsum dolor sit amet.

Paragraph Lorem ipsum dolor sit amet. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.

Buttons

Button Colours

Button Construction

Iconography

V10 line icon set

Form Elements

Check Boxes

Unchecked / Hover

Checked

Disabled

Check Box Construction

Unchecked / Hover

Radio Inputs

Deselected / Hover

Selected

Disabled

Radio Construction

Deselected / Hover

Input Fields

Input Construction

Select Fields

Select Construction

Concertinas (Toggle Module)

Toggle Module

Basic Toggle

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.

Toggle Module Construction

Toggle Construction

Tab System

LeftRight

Tab Content

Data Tables

On Grey Background

Table Heading	Table Heading	Table Heading	Table Heading
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum

On White Background

Table Heading	Table Heading	Table Heading	Table Heading
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum
Lorem ipsum	Lorem ipsum	Lorem ipsum	Lorem ipsum