Five directions, then the parts on their own so you can mix. Every direction uses the same heading and paragraph, which is the only way to compare them fairly — and hover the buttons, since several have a sheen that travels.
Nothing here is live except direction A, which is what the site does now. Tell me a direction, or a combination like “B but with the brass button and the heavier heading”, and I’ll apply it and delete this page.
Directions
A — Current
Nelson City Council 2026
Housing people who live here can afford
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
What the site does now. Manrope at 600, sentence case, a red rule.
B — Editorial
Nelson City Council 2026
Housing people who live here can afford
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Serif headings, lighter weight, more air. Reads like a newspaper column.
C — Campaign bold
Nelson City Council 2026
Housing people who live here can afford
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Heavy and tight, with an orange bar. The loudest option.
D — Civic quiet
Nelson City Council 2026
Housing people who live here can afford
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Sea blue headings on a tinted panel, no rules at all. Understated.
E — Signal
Nelson City Council 2026
Housing people who live here can afford
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
A yellow marker behind part of the heading. One idea, emphasised.
Headings on their own
Manrope 600
Housing people who live here can afford
Current setting.
Manrope 800, tight
Housing people who live here can afford
More force, less air.
Manrope 400
Housing people who live here can afford
The theme’s own default. Quieter.
System serif
Housing people who live here can afford
Editorial. A webfont would replace this.
Small caps, tracked
Housing people who live here can afford
Works as a label above a heading, not as the heading.
With an accent rule
Housing people who live here can afford
Any weight, plus a short coloured rule above.
Body text
This is the setting that decides how long every page feels. The site currently uses the largest of these.
1.38rem / 1.6
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Current setting. Comfortable, takes room.
1rem / 1.65
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Tighter. Fits far more on a screen.
1.15rem / 1.85
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Middle size, generous leading.
Serif, 1.15rem
Housing has been the through-line of my work on council and at the Regional District. Getting it right means treating housing, addictions and community safety as one connected problem rather than three separate ones.
Pairs with direction B.
Extended palette
The five core colours plus relatives that sit comfortably with them: deeper and paler versions of the navy and sea blue, earthier neighbours of the orange and red, a green for the Kootenays, and a plum as a cool counterweight. Each one says whether it can carry text, because several of the nicest additions cannot.
Ink
#0A1F2A
Deep Sea, darker
Safe for body text
Contrast on Paper 16.1:1
Deep Sea
#122F3D
core
Safe for body text
Contrast on Paper 13.4:1
Deep Teal
#0E4A54
between navy and sea blue
Safe for body text
Contrast on Paper 9.5:1
Sea Blue
#34738F
core
Safe for body text
Contrast on Paper 5.1:1
Slate
#5B7C8D
Sea Blue, muted
Large text and headings only
Contrast on Paper 4.3:1
Steel
#8796A0
Sea Blue, pale
Decoration and surfaces only
Contrast on Paper 2.6:1
Forest
#2E5B45
Kootenay green
Safe for body text
Contrast on Paper 7.5:1
Plum
#6B3A52
cool counterweight to orange
Safe for body text
Contrast on Paper 8.6:1
Rocket Red
#BE3E2B
core
Safe for body text
Contrast on Paper 5.2:1
Terracotta
#A85A3C
between orange and red
Safe for body text
Contrast on Paper 4.8:1
Copper
#B4703A
orange, metallic
Decoration and surfaces only
Contrast on Paper 3.8:1
Rocket Orange
#ED8A45
core
Decoration and surfaces only
Contrast on Paper 2.4:1
Signal Yellow
#F6DE6C
core
Decoration and surfaces only
Contrast on Paper 1.3:1
Ivory
#F7F3E8
warm alternative to Paper
Background
Background colour
Paper
#FBFCFD
core background
Background
Background colour
Accent treatments
Ways of marking a section other than filling it with colour. These are what stop a page of coloured panels from looking like a page of coloured panels, and most of them can carry any colour from above.
Rule above
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
A short bar over the heading. What the site uses now.
Rule at the left
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Reads as a pull-out. Good for callouts.
Underline swash
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
A thick line under the heading only.
Highlight marker
Housing people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Colour behind the words themselves.
Corner brackets
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Frames without a full border. Quiet.
Ghost outline
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Border, no fill. Lightest way to group.
Hard offset shadow
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
No blur. Deliberate and a bit brash.
Two-tone split
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Colour band behind the top half.
Notched corner
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
One clipped corner. Reads as a ticket or tag.
Dotted rule
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Softer than a solid rule.
Numbered badge
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
For steps and ordered lists.
Eyebrow pill
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
A label chip above the heading.
Gradient text
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Orange into red across the words.
Striped edge
Housing that people who live here can afford
Treating housing, addictions and community safety as one connected problem.
Repeating bars down one side.
Buttons
Brushed orange
Currently live.
Polished orange
No grain. Glossier.
Glass orange
Hard gloss band.
Ember
Into Rocket Red.
Brass
Toward champagne.
Brushed gold
Brightest.
Brushed navy
For ordinary buttons.
Etched navy
Pressed, not raised.
Worth knowing before you choose
- The serif is a system serif, not a webfont. It will look slightly different on other machines. The question it answers — serif or sans — does not depend on the exact face, and I will install a proper one if you go that way.
- Body size matters more than anything else here. Dropping from the current size to the medium one takes roughly a third off the height of a long page like Testimonials.
- Direction D puts headings in Sea Blue, which only became usable when the background moved to Paper — it was 2.7:1 on the old cream and is 5.1:1 now.
- The yellow marker in E is navy on yellow at 10.4:1, so it is safe on any length of text, but it stops being emphasis if used more than once or twice a page.