TL;DR
I rebuilt the GOV.UK Figma design system used by internal public sector teams, reducing static page design time from 2 to 3 days to 1 to 2 days.
The system is now:
- Downloaded 367 times via Figma Community
- Used by 50 active weekly designers
- Adopted in 5 Ministry of Defence projects
This improved design consistency and reduced rework across teams working to GOV.UK standards.
Previous
After
Project Overview
CGI teams working on public sector services rely on GOV.UK standards for accessibility and consistency.
Despite this, there was no maintained Figma design system aligned with the latest GOV.UK components.
Designers worked across multiple projects with no shared, reliable source of truth.
This created inefficiency and inconsistency across services that should follow the same standards.
The Problem
The lack of a maintained system created repeated friction across teams.
I observed this across 8 design reviews over 6 months.
Common issues:
- Designers rebuilt standard GOV.UK components from scratch.
- Static pages took 2 to 3 days to complete.
- Outdated components were shipped to production.
- Inconsistencies were frequently flagged in reviews.
Community demand reinforced the issue. Designers repeatedly requested updated versions of the GOV.UK Figma file, with no clear ownership or roadmap.
This was not a tooling gap. It was a system ownership and scalability problem.
Current state of GOV.UK design system across all the public sectors
Same GOV.UK components but implemented differently.
UK Intelligence Community's Design System
Department for Education
Ministry of Defence
NHS
Ministry of Justice
Home Office
Role and constraints
Role
I led the work end-to-end:
- Audited the existing system, extended Joe Horton’s file.
- Defined system architecture.
- Rebuilt around 80 percent of components using modern Figma features.
- Published and drove adoption.
Constraints:
- GOV.UK Design System evolves faster than design tooling.
- No central ownership or governance model.
- Work delivered alongside billable client commitments.
- Needed adoption without formal mandate.
Process
Audit and gap analysis
I audited the existing Figma file by Joe Horton against the latest GOV.UK Design System and branding updates.
Key issues:
- Missing components.
- Outdated styles and tokens.
- No structure for scaling or reuse.
- High duplication across files.
This explained why designers rebuilt components instead of reusing them.
System redesign
I rebuilt the system to reduce duplication and support scaling.
Key changes:
- Replaced static styles with token-based primitives and theme variables.
- Built a full GOV.UK colour scale from 50 to 950.
- Introduced viewport-based variables for responsive typography.
- Removed fixed mobile variants and replaced them with scalable components.
This reduced the number of variants designers needed to manage.
Validation
I tested the system with 5 designers across 3 teams.
Focus areas:
- Component discoverability.
- Ease of use.
- Speed of page creation.
Feedback led to:
- Simplified component naming.
- Clearer structure by page and function.
- Removal of redundant variants.
Adoption
I published the system to Figma Community to remove access barriers.
Adoption was driven through:
- Direct sharing across teams.
- Use in live Ministry of Defence projects.
This allowed the system to scale without formal governance.
Key design decisions
1. Move to token-based colour system
I replaced static colour styles with primitives and theme variables.
Why:
Static styles created maintenance overhead and blocked theming.
Alternative:
Keep static styles.
Trade-off:
Lower upfront effort but higher long-term maintenance and no support for themes.
2. Remove device-specific variants
I removed separate mobile and desktop variants and introduced viewport-based scaling.
Why:
Multiple variants increased duplication and inconsistency.
Alternative:
Maintain device-specific components.
Trade-off:
Easier mental model short term, but harder to scale and maintain.
3. Rebuild instead of patch
I rebuilt most components rather than updating incrementally.
Why:
The existing system had structural issues that blocked scaling.
Alternative:
Patch existing components.
Trade-off:
Faster initial delivery, but preserves inconsistency and technical debt.
Solution
I delivered a scalable GOV.UK-aligned Figma system with:
- Components mapped to current GOV.UK standards.
- Token-based colour and theming system.
- Responsive typography using viewport variables.
- Structured component architecture for reuse.
The system allows designers to start from production-aligned components instead of rebuilding UI.
Primitives collection
Viewport Sizes collection
Theme collection with Light & Dark theme variables
Impact
Adoption
- 367 downloads via Figma Community.
- 50 active weekly users.
- Used across 5 Ministry of Defence projects.
Efficiency
- Reduced static page design time from 2 to 3 days to 1 to 2 days.
- Reduced need to recreate standard components.
Quality
- Fewer inconsistencies flagged during design reviews.
- Improved alignment with GOV.UK standards.
- Smoother handoff through alignment with frontend tokens.
- Adaptive Type scale & Spacinge, automaticly set the size of the spacing or fontsize depending on the screen size mode.
- Reduced & Optimised the components as now it will be possible by using the Viewport Collection resulting in a smaller file size.
System scalability
- Enabled theming through token structure, example: Light & Dark Theme.
- Improved organisation for faster navigation.
Reflection
This project exposed a structural issue.
Design systems fail without ownership, even when standards exist.
I solved the immediate problem through system design and distribution, but long-term success depends on governance.
If I extended this further, I would:
- Define ownership and contribution model.
- Track adoption and usage across teams.
- Align more tightly with engineering implementation.
- Measure reduction in rework and iteration cycles.