Civic Modernism
The chosen design direction for the Livicode Tech Solutions website. This is the reference for every page on this site.
Design thesis
British public-information clarity — transport-map wayfinding, thick rules, solid colour fields, numbered wayfinding. Direct and democratic without looking governmental. The five boroughs become literal stops on a single line; the three services carry the same numbered, badged treatment. No gradients, no purple, no soft glow or blur, no rounded corners, no pill buttons — every visual device does a job.
Core palette
One dominant colour (navy) and one accent (signal orange), with cyan and green reserved for links, focus states and pass/fail signals. Purple, violet and indigo are not used anywhere in this system.
Type
Headings, buttons, labels, weight 600–800. Uppercase for H1, tight letter-spacing — a wayfinding-sign character, not a generic geometric sans.
Body copy, weight 400–700. GOV.UK's own typeface family — chosen deliberately for its public-information legibility, distinct from Inter/Roboto/system defaults.
Logo & favicon
Official assets, used as-is — never redrawn. On dark backgrounds the icon keeps its full colour and only the black linework and wordmark switch to white, since black-on-navy fails contrast (1.43:1, WCAG AA needs 4.5:1).
Primary lockup — light backgrounds
Reversed lockup — navy backgrounds (header, footer)
Icon mark only — favicon, social avatar
Buttons
Square corners, solid fields, uppercase Archivo labels, 44–48px minimum height. No gradients, no pill shapes. Primary buttons use Orange Ink (#B94500) — the AA-passing orange — never the lighter signal orange, which fails at body-text size.
Accessibility evidence
The same contrast table published on the homepage. We measure our own colour pairings rather than assuming a palette is accessible because it looks clean.
| Pairing | Sample | Ratio | Verdict |
|---|---|---|---|
| Navy on white | Aa | 14.6:1 | Passes AA & AAA |
| White on navy | Aa | 14.6:1 | Passes AA & AAA |
White on signal orange #E85D0F | Aa | 3.5:1 | Large text/UI only — used for bands & borders |
White on orange ink #B94500 | Aa | 5.4:1 | Passes AA — what buttons actually use |
| Cyan on navy | Aa | 6.4:1 | Passes AA |
Measured by hex-luminance calculation against WCAG 2.2 formulas. Final conformance still requires automated tooling (axe-core/Lighthouse) and manual screen-reader/keyboard QA in a real browser.
Design principles carried across every page
- Solid fields, never a blurred glow. Every colour block here is a flat fill or a hard 4px navy rule — no gradients, no soft decorative blur, no glassmorphism.
- Numbered wayfinding, not symmetric card grids. Services are numbered 1–3, boroughs are "stops" — content is organised the way a transport map organises a network, not a generic three-up icon grid.
- Eyebrows used sparingly. Small uppercase labels (service labels, section tags) appear once per context, styled as italic descriptive text rather than a repeated pill above every heading.
- Contrast is measured, not assumed. The accessibility panel on this page and the homepage publishes the actual ratio for every colour pairing in use.
- Real photography, real logo assets. No placeholder boxes, no redrawn logo — the official brand files and credited, freely-licensed Unsplash photography throughout.