Style Guide
Typography, spacing, buttons and colour variants
Typography
Type scale — Lato (responsive, resize below 1024px for the small-screen scale)
XXL — 48/56, Black 900
Page headings, stat cards · h1
XL — 40/48, Black 900
Panel headings · h2
L — 32/40, Black 900
Card headings · h3
M — 24/32, Black 900
Card headings · h4
S — 22/28, Bold 700
Subtitles · h5
XS — 18/26, Regular 400. Body text, buttons and links. The default typeface is Lato; this paragraph shows the standard reading measure and vertical rhythm, with links styled like this.
Body text, buttons, links · base <body>
XXS — 14/16, Regular 400. Captions.
Utilities
.medium-text — XS, 18/26
.caption — XXS, 14/16
.bold — font-weight 700 · .italic — font-style italic
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
- Step one of a process
- Step two of a process
- Step three of a process
This is a blockquote element for highlighting key information or quotations.
Primary Colours
Primary colour ramp
Secondary Colours
Secondary colour ramp
Accent Colours
Accent colour ramp
Mono Colours
Mono colour ramp