Style Guide
The v2.1 tokens, type and components the redesigned pages are built from.
Colours
Colour tokens
- twd-black#222222 / Dark bands, ink
- twd-surface#ffffff / Page surface
- twd-ghosted#f4f4f4 / Grey bands, panels
- twd-green#1cd100 / Buttons, marks
- twd-green-ink#139400 / Labels on light ground
- twd-muted#6b6b6b / Body copy
- twd-line#e3e3e3 / Hairlines
Type
DM Sans and Geist Mono
Hero / 88 light
Site ready
Section / 48 regular
Sanitation and construction
Card / 28 regular
Mobile toilet hire
Lede / 17 light
Light body copy in the muted grey, for intros and descriptions.
Body / 16 light
Running text on long pages such as the legal documents.
Label / 12 mono
Geist Mono label
Labels
Eyebrow, title, lede, chip
Eyebrow
Section title
Lede: the light 17px body copy that follows a title.
NumberChip
010203
Bands: white
112px above and below, 80px gutters, a 1280px column, stepping down at 991, 767 and 479.
Bands: ghost
112px above and below, 80px gutters, a 1280px column, stepping down at 991, 767 and 479.
Bands: dark
112px above and below, 80px gutters, a 1280px column, stepping down at 991, 767 and 479.