Styleguide

Fonts and typography

Primary font

Loading...

Secondary font

Loading...

Heading styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body styles

Body large (24)

Body medium (20)

Body regular (18)

Body small (16)

Supporting text

Label text

Font-weights

This paragraph uses font-weight 400

This paragraph uses font-weight 500

This paragraph uses font-weight 600

This paragraph uses font-weight 700

Standard paragraph text for RTE components

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.

Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Colour palette

Core colours

Primary Lightest
Primary Lighter
Primary Light
Primary Mid
Primary Dark
Primary Darker
Primary Darkest
Secondary Lightest
Secondary Lighter
Secondary Light
Secondary Mid
Secondary Dark
Secondary Darker
Secondary Darkest
Neutral Lightest
Neutral Lighter
Neutral Light
Neutral Mid
Neutral Dark
Neutral Darker
Neutral Darkest

Status indicating colours

Red Lightest
Red Lighter
Red Light
Red Mid
Red Dark
Red Darker
Red Darkest
Green Lightest
Green Lighter
Green Light
Green Mid
Green Dark
Green Darker
Green Darkest
Amber Lightest
Amber Lighter
Amber Light
Amber Mid
Amber Dark
Amber Darker
Amber Darkest

Buttons

Standard button
Icon button
Inline button
Outline button
Slidein button

Alert messages

There was a problem with that action, please try again.

There was a problem with that action, please try again.

There was a problem with that action, please try again.

There was a problem with that action, please try again.