TL;DR
I built a React-based implementation of the GOV.UK Design System to remove friction between design and development workflows.
In the first 10 days:
- 547 npm downloads.
- 378 downloads in the first week.
This project turns a template-driven system into a reusable, component-driven workflow aligned with modern frontend development.
Introduction
While working at CGI, I supported public sector teams using the GOV.UK Design System.
The system is strong in accessibility and consistency. It works well for standard service journeys. It breaks down when teams build more dynamic, interactive products.
I have worked previously on a Figma Design System and meantioned some issues I have encountered previouly, take a look here.
My goal was to extend the system into a workflow that supports:
- Component-driven development.
- Faster iteration from design to production.
- Richer interaction patterns.
Audience
- Designers working in Figma.
- Frontend engineers building React applications.
The Problem
The issue was not the design system itself. It was the workflow around it.
Prototype to production gap
The GOV.UK Prototype Kit uses Nunjucks and static templates.
This created friction:
- Manual refresh cycles.
- Page-based templating instead of reusable components.
- No clear path to production React code.
Limited component capability
The system supports basic UI patterns.
It does not support:
- Searchable inputs like comboboxes.
- Rich interactive states.
- Advanced loading patterns such as skeleton screens.
Fragmented tooling
To move from design to production, I had to:
- Reinterpret Figma designs.
- Rebuild components in a different paradigm.
- Cross-reference multiple documentation sources.
This slowed delivery and increased inconsistency.
Role and Constraints
I owned the project end to end:
- Defined the problem.
- Designed the system.
- Built the component library.
- Set up documentation.
Constraints
- GOV.UK visual and accessibility standards had to remain intact.
- No team support or dedicated time.
- Needed to balance fidelity with flexibility.
This was a side project alongside client work.
Process
Step 1: Fix the design foundation
I created a Figma library aligned with the updated GOV.UK branding.
Key changes:
- Built a full colour scale from 50 to 950.
- Moved styles into primitives and theme variables.
- Introduced viewport-based typography.
- Expanded missing components.
This created a reusable design foundation.
GOV.UK functional colours
How I started
text
#0B0C0C
secondary-text
#484949
link
#1A65A6
link-hover
#0F385C
link-visited
#54319F
link-active
#0B0C0C
border
#CECECE
input-border
#0B0C0C
template-background
#F4F8FB
body-background
#FFFFFF
focus
#FFDD00
focus-text
#0B0C0C
error
#CA3535
success
#0F7A52
hover
#CECECE
brand
#1D70B8
surface-background
#F4F8FB
surface-text
#0B0C0C
surface-border
#8EB8DC
Chakra color palette with GOV.UK colors
How I ended.
brand
50
#f4f8fb
100
#d2e2f1
200
#8eb8dc
300
#5694ca
400
#3d7ebc
500
#1d70b8
600
#1a65a6
700
#0e4d88
800
#0f385c
900
#052c53
950
#021c37
brown
50
#faf8f6
100
#e7ddd3
200
#ccb8a5
300
#c4a78b
400
#b39477
500
#99704a
600
#8f6845
700
#84603f
800
#6a4c31
900
#563d27
950
#442f1d
yellow
50
#fffdf2
100
#fff8cc
200
#ffee80
300
#ffe640
400
#ffe22c
500
#ffdd00
600
#c7ab00
700
#aa9200
800
#8d7900
900
#695a00
950
#534700
teal
50
#f3f9f9
100
#d0e6e7
200
#8ac0c3
300
#50a1a5
400
#3b9297
500
#158187
600
#137278
700
#106165
800
#0b4144
900
#073437
950
#04282a
red
50
#fcf5f5
100
#f4d7d7
200
#e59a9a
300
#d76868
400
#d15353
500
#ca3535
600
#b32f2f
700
#982828
800
#651b1b
900
#521414
950
#400e0e
green
50
#f3f9f7
100
#cfe7de
200
#88c3ad
300
#4da583
400
#389771
500
#0f7a52
600
#0f7850
700
#105840
800
#09442d
900
#063723
950
#042a1a
grey
50
#f3f3f3
100
#cecece
200
#858686
300
#6c6d6d
400
#484949
500
#434444
600
#3d3e3e
700
#303030
800
#262626
900
#191b1b
950
#0b0c0c
orange
50
#fcf0f2
100
#fde4d7
200
#fabb9c
300
#f7996a
400
#f68955
500
#f47738
600
#f35a10
700
#d14909
800
#ab3906
900
#842b04
950
#752503
magenta
50
#fcf5f8
100
#f4d7e5
200
#e59abe
300
#d7689d
400
#d1538e
500
#ca357c
600
#b32f6e
700
#98285d
800
#651b3e
900
#521432
950
#400e26
purple
50
#f6f5fa
100
#ddd6ec
200
#aa98cf
300
#7f65b7
400
#6c50ac
500
#54319f
600
#4a2b8d
700
#3f2577
800
#2a1950
900
#211341
950
#180d32
voodoo
50
#F7F2F6
100
#E5D5E1
200
#C4A9C0
300
#9E7A98
400
#77516F
500
#532A45
600
#47223B
700
#391A2E
800
#2A1221
900
#1C0B15
950
#12060D
Step 2: Translate to a React system
I built a Chakra UI-based system styled to match GOV.UK.
Why Chakra UI
- Mature React component model.
- Familiar styling approach.
- Faster to extend than building from scratch.
I implemented:
- GOV.UK styling through theme recipes.
- Component-level overrides where needed.
- Additional patterns not present in GOV.UK.
Step 3: Create a shared reference
I added Storybook to document components.
This gave:
- Live examples.
- Clear usage patterns.
- A shared reference for engineers.
I linked Figma components to code equivalents.
This removed ambiguity in handoff.
Key Design Decisions
Use Chakra UI instead of building from scratch
- Alternative: Custom component library or GOV.UK Prototype Kit.
- Trade-off: Less control over low-level implementation.
- Why: Reduced build time and ensured scalability.
Move from templates to components
- Alternative: Keep Nunjucks-based approach.
- Trade-off: Increased complexity for simple services.
- Why: Enabled reuse and consistency in complex products.
Extend GOV.UK component set
- Alternative: Strict adherence to existing components.
- Trade-off: Risk of divergence from official system.
- Why: Supported real product needs such as search and dynamic states.
Solution
The final system includes:
- A Figma design library aligned with GOV.UK branding.
- A React component library built on Chakra UI.
- Storybook documentation for all components.
- Direct mapping between design and code.
This creates a unified workflow:
- Designers use structured tokens and components.
- Engineers use matching React components.
- Both work from the same system.
Impact
This is an early-stage project with measurable signals of adoption.
Adoption signals
- 547 npm downloads in 10 days.
- 378 downloads in the first week.
- 30 to 40 weekly Figma views.
- 14 to 30 duplications.
Workflow improvements
- Reduced repeated design setup through reusable tokens.
- Reduced translation effort between design and code.
- Faster implementation of complex UI patterns.
This shows early demand for a React-first GOV.UK workflow.
Reflection
Strong design systems fail when workflows do not support them.
The GOV.UK Design System solves consistency and accessibility. It does not fully support modern product development patterns.
This project extends the system into a component-driven workflow.