Theme

Change type and colours on this page to create your site's theme

Type

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Large body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Surfaces

Surface 1 - Dark

Primary surface (background) colour

Surface 2 - Dark

Secondary surface (background) colour

Surface 3 - Dark

Tertiary surface (card) colour

Surface 1 - Light

Primary surface (background) colour

Surface 2 - Light

Secondary surface (background) colour

Surface 3 - Light

Tertiary surface (card) colour

Colours

Colour on surface 1 - Dark

Applies to the vast majority of icons and text

Colour on surface 2 - Dark

Applies to caption, some secondary-priority text

Colour on surface 1 - Light

Applies to the vast majority of icons and text

Colour on surface 2 - Light

Applies to caption, some secondary-priority text

Accent - Dark

Dark theme primary accent colour, switches to secondary for light theme

Accent - Light

Light theme primary accent colour, switches to secondary for dark theme

Outline

Applies to outlined cards and images only