Civic and public services
Help users complete a high-trust task without confusion
A plain, accessible system for forms, eligibility checks, task lists, check answers pages, and recovery from validation errors.
Color Palette: functional colours, not decoration
Each colour carries a job. Blue is link and navigation, green is primary action and completion, red is validation, and yellow is focus.
Typography follows a readable task scale
The system uses a small number of large, legible steps. Body copy remains 19px, and line heights stay aligned to a 5px rhythm.
Page title: 48px / 50px
Use once to name the task.
Section heading: 36px / 40px
Use for major steps or sections.
Question heading: 24px / 30px
Use for form groups and panels.
Body text: 19px / 25px. Most service copy should live here because reading comfort matters more than visual novelty.
Default paragraph and component copy.
Components are task recovery tools
The component set is deliberately small: one primary action, clear labels and hints, error summary, field errors, summary lists, task lists, and confirmation panels.
Check answers
Confirmation
HDJ2123F
Layout is a service path
Use a narrow reading column for questions and a supporting rail only when it helps the user complete the task.
Two-thirds content column
Question pages should keep labels, hints, errors, and actions close together. Avoid splitting a single decision across multiple panels.
One-third rail
Use for help, status, eligibility notes, or related documents.
Responsive behaviour keeps labels and answers together
On small screens, tables and summary lists stack by row. Do not squeeze service-critical information into unreadable columns.
| Surface | Desktop | Mobile |
|---|---|---|
| Question page | 640px measure plus optional help rail. | Single column, label, hint, input, error, action. |
| Summary list | Key, answer, action columns. | Stack key, answer, and action per row. |
| Task list | Task title with status tag. | Status moves below task title. |