The Guardian Design System
June 2019 - March 2020
Transforming Design at The Guardian:
From Fragmentation to System Thinking
In 2019, I joined The Guardian’s Digital Design team at a pivotal time: they had recently completed a major visual brand refresh, but digital and editorial platforms were still operating largely in silos. I was brought on to help build and scale Source — The Guardian’s first comprehensive digital design system — into a central, living resource that could empower teams across product, editorial, and engineering.
Drawing on my deep experience building systems for brands like Nissan and Three, my focus at The Guardian was not just delivering a library of components, but creating the structures, workflows, and culture needed to sustain and evolve a true design system at scale.
Defining a modular, sustainable system
From the outset, I championed the idea that a design system is not a static deliverable — it’s a living product in itself.
Our mission was simple but bold:
Capture solutions to problems once and steadily improve — creating space for teams to focus on creativity and craft.
To make this real, we anchored Source around three interconnected pillars:
UX and Design Assets — reusable Figma libraries and templates with consistent grids, typography, color, and spacing.
Source Website — a centralised documentation site with diagrams, component guidance, and live code snippets.
React Component Library — a scalable, token-driven set of components for engineering teams, built as CSS-in-JS.
Discovery and challenges uncovered
Through early audits and interviews, we uncovered systemic challenges:
Duplicated efforts across teams, leading to inefficiency and rising costs.
349+ Figma components scattered across projects with inconsistent usage.
11 different button sizes and 14 border radius variations across the site.
Outdated or inconsistent typography files in circulation.
Fragmented language — components were often referred to by local team-specific nicknames like "Thrasher" or "Nugget," causing confusion.
Rather than starting from scratch, our strategy was to codify what worked, streamline redundancies, and build a system flexible enough to grow.
Just a handful of the styles uncovered in the inventory.
Building trust and evangelising the system
Adoption was as much about changing mindsets as delivering assets. Throughout the process, I led stakeholder engagement efforts, including:
Evangelism Sessions — working with editorial, UX, and engineering leadership to demonstrate how a system could enable, not restrict creativity.
Workshops — co-creating a shared vocabulary and taxonomy for components.
Cross-functional collaboration — embedding product, UX, and dev voices early into the system’s evolution.
We made it clear that Source was a tool for them — not just for the "design system team" — helping them own and shape its future.
“The design system team has been approachable, open-minded and collaborative. Pairing with a digital designer on a team level feels much cleaner as we’re singing from the same hymn sheet”
- Iona (UX)
“The implementation of the CMP was completed faster because some of the components already existed, despite using them for the first time. The quality of the UI was also improved, and the UI was more in line with the Guardian design.” - Zeek (Engineering)
Process, delivery and scaling
Roadmapping and Prioritisation
Breaking down the system into epics like "Foundations," "Core Components," and "Patterns."
Definition of done
Setting success criteria for each asset (e.g., accessibility checks, documentation, responsiveness).
Clear contribution paths
defining what small fixes vs large enhancements vs new features would look like.
Clear contribution paths
Syncing Figma practices with GitHub repositories and React libraries.
Outcomes and measured impact
The work quickly showed measurable results:
10 product teams adopting Source components across live projects.
349 Figma components available and version-controlled.
7 core React components built and extended by engineering teams.
15 documented patterns live in Zeroheight.
Consistent accessibility improvements baked into every release.
Early adopters reporting faster prototyping, better cross-team collaboration, and stronger visual consistency.
Long-term governance and sustainability
Before my time at The Guardian concluded, I focused heavily on building a sustainable ecosystem around Source:
Governance Model — enabling contribution through clear documentation, processes, and review paths.
Tracking Usage — putting in place metrics via Source website analytics, Figma library usage stats, and NPM download tracking.
Promoting Ownership — instilling a co-author mindset across teams, based on models from organisations like Spotify.
“Our product teams see their role as contributors and co-authors of a shared family of design systems — one that they have ownership of.”
Inspired by Spotify’s Encore model of "systems of systems," the long-term vision was to evolve Source beyond a single repository into a family of interconnected design systems — each tailored to serve the specific needs of The Guardian’s diverse portfolio of digital products, editorial platforms, and mobile apps.
Looking to the future
My time leading the evolution of Source remains one of the most fulfilling chapters of my career.
It wasn’t just about building components — it was about building trust, structure, and a shared culture that empowered teams to move faster, design better, and maintain a unified Guardian brand across a growing digital landscape.
After successfully embedding the system foundations and governance practices, I moved on to my next challenge: joining ustwo, a studio known for its systemic thinking, to lead major design system work for BlackRock and iShares at an even greater global scale.