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:
Audience
The issue was not the design system itself. It was the workflow around it.
The GOV.UK Prototype Kit uses Nunjucks and static templates.
This created friction:
The system supports basic UI patterns.
It does not support:
To move from design to production, I had to:
This slowed delivery and increased inconsistency.
I owned the project end to end:
Constraints
This was a side project alongside client work.
I created a Figma library aligned with the updated GOV.UK branding.
Key changes:
This created a reusable design foundation.
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
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
I built a Chakra UI-based system styled to match GOV.UK.
Why Chakra UI
I implemented:
I added Storybook to document components.
This gave:
I linked Figma components to code equivalents.
This removed ambiguity in handoff.
The final system includes:
This creates a unified workflow:
This is an early-stage project with measurable signals of adoption.
This shows early demand for a React-first GOV.UK workflow.
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.
Leave a Response
Sign in for a easier response