#ffdd00) is exactly what the ring slot exists for. The best mapping in the whole adoption — no interpretation needed.#858686), the closest authored gray. A different reasonable choice existed (tint-25, #484949); the reason for this one is in the token's $description.#daa932, a defensible amber — coherent with the brand, but honestly not GOV.UK's own choice, because GOV.UK hasn't made one.desaturate-primary pulls the brand blue toward gray → #657d96. Bind it the day GOV.UK defines a secondary; until then, derivation tracks the brand automatically.primary.solid → the brand blue. A safe default when the source draws no accent/primary distinction.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: | Target | Item | Grade | The note | | --------- | --------------------------- | ------------ | -------------------------------------------------------------------------------- | | bootstrap | `$box-shadow-inset` | unsupported | no IR inset-shadow concept; Bootstrap default kept | | bootstrap | `$transition-*` (motion) | dropped | Bootstrap themes almost none of it | | echarts | candlestick / gauge series | unsupported | beyond catalog semantics; extend the emitted theme manually | | radix | `--primary-a1` (alpha ramp) | approximated | fixed alpha ramp, not a colorimetric derivation of Radix's real per-colour alpha | | primeng | structural components | unsupported | no severity-coloured surface; inherits Aura's own default untouched | ## 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](/transtyle/docs/examples/) that renders this theme on the framework's real components, consuming only the compiled `dist/`: ```bash 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](/transtyle/docs/language/) 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](/transtyle/docs/concepts/#5-provenance-and-coverage), not marketing around it. Do it for your own system next: [You already have a design system](/transtyle/docs/adopt-existing/).