A householder on a private borehole applies to Wealdshire District Council for a sampling visit. The live screen is the date question; the same screen is shown again as the council's server returns it after an impossible date, and the rest of the journey is the task list and the check-your-answers page.
Direction
- Archetype — wizard. One question per page, a back link on every page, a task list for the spine rather than a progress bar, and a check-your-answers page before anything is sent.
- Data stance — prose-first. The only figures are the fee, the date and the head count, and each one reads as a sentence rather than as a cell.
- Density — GOV.UK default. 19px body text, a two-thirds measure inside a 960px page, and the 5px spacing scale (5, 10, 15, 20, 25, 30, 40, 50, 60).
- The one bold thing — no script on the page at all. Every step is a real
<form>POST, the error summary is server-rendered above the question, the help is a native<details>, and the date is three text fields rather than a picker.enhancement_lint.pyreports clean and the page carries no<script>.
Generator
govuk_tokens.py --theme palette
govuk_tokens.py --theme functional
govuk_tokens.py --type --spacing
govuk_tokens.py --contrasttokens.css is the first two, unedited. The type scale and the 5px spacing scale come from the third and are authored in the page's own <style>, because the generator publishes them as a table rather than as custom properties.
Measured contrast
contrast.py from web-design/scripts, WCAG 2.2:
| Pair | Ratio | Where |
|---|---|---|
--govuk-text #0b0c0c on --govuk-body-background #ffffff | 19.59:1 | every word of the question, the hint and the answers |
--govuk-white on --govuk-green-primary #0f7a52 | 5.35:1 | Continue, Accept and send |
--govuk-error #ca3535 on #ffffff | 5.16:1 | the error summary and the field message |
--govuk-focus-text on --govuk-focus #ffdd00 | 14.54:1 | every focused control |
--govuk-blue-shade-50 on --govuk-blue-tint-80 | 9.13:1 | the In progress tag |
--govuk-black-tint-25 on --govuk-black-tint-95 | 8.14:1 | the Cannot start yet tag |
--govuk-input-border on #ffffff | 19.59:1 | the 2px control boundary (SC 1.4.11) |
Deviations
- Buttons take
--govuk-green-primary. The functional theme emits no button colour, and the palette green is the nearest published value; white on it measures 5.35:1. - One theme. GOV.UK publishes light only, so light is what ships.
- Four screens on one page. Three of them take an
h2where the service would give each its ownh1.