Style Guide

Typography, spacing, buttons and colour variants

Typography

Heading 1 — 48px

Heading 2 — 40px

Heading 3 — 32px

Heading 4 — 24px

Heading 5 — 20px

Body text at 16px with a 1.5 line height. The default typeface is Lato. This paragraph demonstrates the standard reading measure and vertical rhythm. Links look like this with an underline offset.

Large text utility — 22px

Medium text utility — 18px

Caption text — 13px

Bold text (700) · Italic text

Lists & Rich Content

Unordered List

  • First item in an unordered list
  • Second item with a bit more text to show wrapping behaviour across multiple lines of content
  • Third item

Ordered List

  1. Step one of a process
  2. Step two of a process
  3. Step three of a process

This is a blockquote element for highlighting key information or quotations.

Primary Colours

Primary colour ramp

10

#F2F2F2

20

#E0E0E0

30

#CCCCCC

40

#B8B8B8

50

#A3A3A3

60

#8F8F8F

70

#737373

80

#575757

90

#3B3B3B

Secondary Colours

Secondary colour ramp

10

#F2F2F2

20

#DFDFDF

30

#CBCBCB

40

#B7B7B7

50

#A3A3A3

60

#8F8F8F

70

#6F6F6F

80

#4F4F4F

90

#2F2F2F

Accent Colours

Accent colour ramp

10

#F2F2F2

20

#DEDEDE

30

#C9C9C9

40

#B5B5B5

50

#A0A0A0

60

#8C8C8C

70

#6F6F6F

80

#525252

90

#353535

Mono Colours

Mono colour ramp

0

#FFFFFF

10

#F4F4F4

20

#D7D7D7

30

#BBBBBB

40

#9F9F9F

50

#838383

60

#666666

70

#5F5F5F

80

#4A4A4A

90

#121212

100

#000000

primary-light

Text on a primary-light background. Link style adapts to contrast.

primary-dark

Text on a primary-dark background. Link style adapts to contrast.

secondary-light

Text on a secondary-light background. Link style adapts to contrast.

secondary-dark

Text on a secondary-dark background. Link style adapts to contrast.

accent-light

Text on a accent-light background. Link style adapts to contrast.

accent-dark

Text on a accent-dark background. Link style adapts to contrast.

mono-light

Text on a mono-light background. Link style adapts to contrast.

mono-dark

Text on a mono-dark background. Link style adapts to contrast.