The UK government’s single-domain design system rendered at its most function-first: an accessibility-first civic utilitarian surface that puts clarity, legibility and contrast over any decoration. A full-bleed GOV.UK-blue #1d70b8 band carries a bold 64px white headline in the bespoke GDS Transport typeface (Arial fallback), and everything else is near-black #0b0c0c text on white at a wide, generous 19px/25px measure. Weight is binary — 400 body and 700 for every heading, nothing between, tracking always normal — and hierarchy comes from the GDS type scale plus weight, never colour or tracking. Colour is strictly functional: blue #1d70b8 for links (hover #003078), green #00703c for “Start now” action buttons (hover #005a30) finished with a solid 2px #002d18 bottom edge that makes them feel physically pressable, red #d4351c for errors, and an unmissable yellow #ffdd00 focus highlight with a #0b0c0c underline applied identically to buttons, links and inputs — the yellow focus state is the accessibility contract, not a subtle ring. Every corner is square: the radius census returned 0px on every element. There are no soft shadows (only the solid button edge), no gradients, no canvas and, notably, no motion at all — zero transitions, zero keyframes and no animation library on the entire page, a deliberate finding rather than a gap. Structure is drawn with 1px #b1b4b6 hairlines and coloured left-rules over the 20em/40.0625em/48.0625em GDS breakpoints, single light theme only.
⚠ site only
Browse GOV.UK in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: gov.uk (live DOM, computed styles), 2026-08-01 (desktop 1512px). GOV.UK Frontend v5.14.0. Coverage: homepage + header/search + cookie banner. Palette cross-checked against the published GOV.UK Design System colour palette (authoritative token source). No login surface — a public information portal. Reality check: hint accurate — this is the archetypal accessibility-first civic utilitarian system. Confirmed: bespoke GDS Transport typeface, a full-bleed GOV.UK-blue #1d70b8 hero band, green #00703c "start"/action buttons with a solid 2px bottom edge, the signature #ffdd00 yellow focus state, and ZERO border-radius and ZERO CSS motion anywhere (both genuine findings, not gaps). No :root colour tokens (the palette is compiled from Sass), so §2 comes from computed styles + the published palette.
The most utilitarian, function-first surface a national government can ship: clarity, legibility and accessibility over any decoration. A single full-bleed GOV.UK-blue band carries the bold white headline, everything else is near-black text on white with generous line-height and a wide measure. Every corner is square (0px radius everywhere), colour is strictly functional (blue = links/brand, green = actions, red = errors, yellow = focus), and nothing moves — there are no transitions, no keyframes and no animation library on the entire page. Structure is drawn entirely with hairline and coloured borders, never soft shadows; the only "shadow" is the solid dark-green slab under a button that gives it a physical, pressable edge. Feels: authoritative, plain, accessible, unhurried.
| Token | Hex | Role / usage |
|---|---|---|
| black | #0b0c0c | Primary text, headings (near-black, not pure #000) |
| dark-grey | #505a5f | Secondary text, captions, metadata |
| white | #ffffff | Text on blue/green bands |
| Token | Hex | Role / usage |
|---|---|---|
| link | #1d70b8 | Links + the GOV.UK-blue hero band / header |
| link-hover | #003078 | Link hover (darker blue, thicker underline) |
| link-visited | #4c2c92 | Visited links (published GDS purple) |
| green | #00703c | Primary action / "Start now" button fill |
| green-hover | #005a30 | Button hover fill |
| green-shadow | #002d18 | Solid 2px button bottom edge (box-shadow) |
| yellow | #ffdd00 | Focus highlight (with a black underline) |
| red | #d4351c | Errors, warning-notice 5px left border |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background, cards, inputs |
| light-grey | #f3f2f1 | Section tint, inset panels (published GDS light-grey) |
| blue-tint | #f4f8fb | Homepage panel tint above the blue band |
| light-blue | #d2e2f1 | Search-button fill on the blue header |
| mid-grey | #b1b4b6 | 1px hairline borders (most-used border, 21×) |
Rule: colour is functional only — blue for links/brand, green for actions, red for errors, yellow for focus. No decorative colour. Rule: borders do the structural work; the only shadow is the solid button edge.
"GDS Transport", Arial, sans-serif — GDS Transport is a bespoke Crown-copyright face (New Transport lineage) usable only on gov.uk; Arial is the shipped fallback. Preview substitutes Arial/Helvetica (the site's own fallback) — no open equivalent matches GDS Transport's proportions, and no webfont link is used.#0b0c0c (GDS default desktop body is 19px, not 16px). Weight is binary: 400 body, 700 for every heading/label — nothing between. Tracking is normal at every size.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1, hero) | 64 / 76.8 | 700 | normal |
| Section (h2) | 24 / 30 | 700 | normal |
| Sub (h3) | 19 / 25 | 700 | normal |
| Body (p) | 19 / 25 | 400 | normal |
| Logo / wordmark | 30 / 30 | 400 | normal |
| Button | 19 | 400 | normal |
| Nav / menu label | 16 | 700 | normal |
Pattern: no display font — one family everywhere. Hierarchy from the GDS type scale (16/19/24/27/36/48/64/80) + weight, never from tracking or colour.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.