GOV.UK

The GOV.UK Design System publishes comprehensive HTML/CSS guidelines and component documentation online, but has no officially maintained Figma library from GDS. Community-built kits exist, but they carry no guarantee of accuracy or maintenance cadence, and anything drifting from the live frontend is a liability. Accessibility regressions, incorrect interaction states, and mismatched spacing can all propagate downstream into delivered code.

The response was to go back to the source and reverse-engineer directly from the live GOV.UK website, building a faithful Figma component library that designers and developers could share with confidence.

The Approach

Rather than relying on documentation alone, I inspected live GOV.UK service pages in DevTools, capturing exact spacing tokens, typographic scale, colour values, and state variants (default, hover, focus, error, disabled). Each component was then replicated in Figma with full variants, and cross-referenced against the GOV.UK Design System documentation and real service pages before the library was shared with design and development teams.

As part of the setup, existing Figma colour and typography styles were migrated into Figma variables. This aligns the library with how GOV.UK Frontend works in code (using CSS custom properties throughout), makes design-to-dev handoff more precise, and means brand theming can be applied through mode switching rather than manually overriding individual components. For the MOD adaptation in particular, switching between GOV.UK and MOD brand values became a single variable mode change rather than a file-wide find-and-replace.

The Projects

Cabinet Office: Property Insite. Designs for an internal property management service at property.insite.cabinetoffice.gov.uk. The reverse-engineered Figma library enabled rapid, high-fidelity design handoff, giving developers screens they could build against with confidence.

MOD: Defence Serious Crime (DSCC). A service for armed forces personnel (Army, Navy, and RAF) to report crimes and access help and information. The project adopted GOV.UK as a structural foundation, then adapted it to the MOD brand through adjusted colour palette, typography, and header and footer branding, all while maintaining full WCAG compliance.

Brand Adaptation

The core GOV.UK interaction patterns were retained wholesale: task list flows, error states, form patterns, summary pages, and navigation conventions. These patterns exist because they work for users; changing them without evidence would be counterproductive, and in a sensitive service like DSCC, consistency with established government patterns also builds trust.

What changed was the visual expression: the primary colour palette shifted from GOV.UK black and blue to MOD navy (#1a2744) and red (#c0392b), with updated typography and defence-appropriate branding in the header and footer.

AI Prototyping

An emerging area of exploration is using AI to iterate on prototypes directly in the browser rather than in Figma. Browser-based prototypes can run real GOV.UK Frontend CSS, simulate conditional logic, and behave more like a live service, which can be valuable for early-stage flow testing and concept exploration.

The benefits are real: entire user journeys can be scaffolded quickly, the feel is more realistic than a Figma prototype, and ideas can be discarded cheaply. But the limitations are equally real: visual accuracy is not guaranteed (even with explicit instructions, AI introduced errors such as rendering the GOV.UK header bar black rather than the correct blue), the output is not reliable enough to serve as a dev specification, and the handover process from AI prototype to production code still needs a defined answer.

The honest verdict: a useful tool for exploring ideas quickly and getting something in front of users early, but not a replacement for accurate design handoff.

Outcomes