GOV.UK, end to end

The GOV.UK Design System is a real, public, independently-designed system — nobody on this project built it. This page compiles it, unedited, to eight ecosystems, and shows the whole thing: the source values, the human judgment calls, and the coverage report grading every output. Nothing here is narrated where it can be shown. Every number and value below is produced by running transtyle build on examples/govuk/.

What GOV.UK actually publishes

The source is its real functional and web-palette colours, transcribed verbatim into option.tokens.json. These are the values, straight from design-system.service.gov.uk:

Plus the GDS Transport font stack and — importantly — no border-radius at all. GOV.UK components are flat by design; radius.md is authored to 0rem, not left to a default.

The binding: your names in, catalog meanings out

GOV.UK keeps its own vocabulary. One small binding file aliases the catalog’s slots to GOV.UK’s functional colours — nothing is renamed, and the catalog names never leak into GOV.UK’s design language:

"primary": { "solid": { "$value": "{semantic.color.govuk.brand}" } },
"danger":  { "solid": { "$value": "{semantic.color.govuk.error}" } },
"ring":    { "$value": "{semantic.color.govuk.focus}" },
"radius":  { "md": { "$value": "0rem" } }

From there, one value fans out to every target in that target’s own dialect. The brand blue #1d70b8, as actually emitted:

Same decision; sRGB hex where Bootstrap wants it, OKLCH where the modern targets want it. And the flat aesthetic survives translation — Bootstrap’s $border-radius, $border-radius-sm, and $border-radius-lg all emit 0rem.

The judgment calls

A compiler shouldn’t invent design decisions the source never made. Where GOV.UK names a role, the mapping is mechanical; where it doesn’t, Transtyle either makes an explicit, recorded choice or leaves the slot to derivation — and says which. These are the real calls from this adoption:

Every one of these is inspectable after the fact — npx transtyle explain warning.solid prints the full rule and inputs, so a reviewer can audit each choice without reading code.

The coverage, unretouched

Eight targets build with zero diagnostics — no contrast failures against WCAG 2.1 AA, no dangling aliases. But zero-diagnostics is not the same as lossless, and the report says so per target. This is the real split from report.json for each build:

native — losslessderived — computed from GOV.UK's valuesapproximated — meaning bent, reason recordeddropped / unsupported — this target can't say it

Read the shape, not a single number. css-variables is 100% native because it is the conformance dump — it has a slot for everything. radix is 58% approximated because its 12-step alpha ramps are a fixed projection, not a colorimetric reconstruction of Radix’s real per-colour alpha — honest about the compromise rather than hiding it. bootstrap is 76% derived across 712 classified rows because GOV.UK authored a handful of colours and the standard rules coherently filled Bootstrap’s large variable surface from them — a low native share on that target means “few of its variables take an authored value verbatim”, not “poorly themed”.

The honesty is in the notes

The grey slice above — dropped and unsupported — is where a lesser tool would fake a value. Transtyle omits it, with a reason attached. These are real note fields from the reports:

Scope, stated plainly

Two things are deliberately not done, because doing them would mean inventing what GOV.UK never specified — and saying so is part of the honesty:

• No dark mode. GOV.UK publishes no dark theme; the config declares only light. A single-mode config is fully legal and every target handles it without special-casing.
• The type scale is left to catalog defaults. GOV.UK’s responsive 16–80px scale doesn’t map onto the catalog’s fixed steps without distorting one or the other; a production adopter would bind it properly. Out of scope for demonstrating the pattern.
• The real GDS Transport typeface is licensed to crown services only; the tokens name GOV.UK’s own public fallback stack (GDS Transport, arial, sans-serif), exactly as GOV.UK’s own CSS resolves for non-crown consumers.

See it running

Every target ships a demo project that renders this theme on the framework’s real components, consuming only the compiled dist/:

npm run dev -w govuk-demo-bootstrap    # GOV.UK's flat aesthetic on real Bootstrap
npm run dev -w govuk-demo-shadcn       # the same page, real shadcn/ui components

The takeaway

GOV.UK compiled to eight ecosystems with zero catalog amendments and zero diagnostics — evidence the role grid generalizes past the systems it was designed against. The mechanical mappings were free; the judgment calls were few, explicit, and recorded; and every compromise is a number you can inspect. That is the whole product: the coverage report is the trust mechanism, not marketing around it.

Do it for your own system next: You already have a design system.