From one product to a system built to scale.
Creating a consistent, accessible design language for complex utility software, from a single product to a growing library of reusable foundations and components.
A growing design system — reusable components, patterns and foundations
01 / THE CHALLENGE
One product. A much bigger opportunity.
What started as establishing a visual direction for Product Builder revealed a wider challenge: creating consistent, accessible experiences across a growing collection of complex utility products.
THE CONTEXT
Different products. No shared design language.
Gentrack's products had evolved over time, with different visual styles, interaction patterns and approaches to building interfaces. While working on Product Builder, I started creating reusable foundations rather than designing everything as a one-off. As the work expanded across Gentrack's products, I took ownership of developing those foundations into a wider design system, establishing the tokens, components and standards that would support the team.
WHAT I WAS WORKING WITH
THE OPPORTUNITY
Build beyond the immediate brief.
Rather than treating each new interface as a separate design exercise, I began expanding the foundations I'd created for Product Builder into a reusable system. The aim was to establish a consistent design language while retaining the flexibility needed for different products, use cases and light and dark themes.
02 / FINDING THE DIRECTION
Testing the brand against the experience.
When moving beyond the existing dark-led brand direction met resistance, we brought user evidence into the conversation. Four visual approaches helped us examine whether the interface could be clearer without losing its identity.
Compare, don't assume.
The UX team ran unmoderated, task-based comparisons of dark and light visual styles, examining task success, time on task and perceived ease of use.
The original brand style struggled.
The original dark treatment performed weakest in the study. The new light approach performed strongest overall, giving us evidence to challenge a one-theme-fits-all approach.
Balance evidence and brand.
The team recommended an adjusted dark experience as the primary direction, with a new light theme as an alternative. This created a clearer rationale for flexible, theme-aware foundations.
The takeaway: a product interface needed room to adapt, not a single visual treatment applied everywhere.
03 / BUILDING THE FOUNDATIONS
Designed for consistency. Built for flexibility.
A design system needed to do more than make interfaces look consistent. It had to provide foundations that could adapt to different products, workflows and visual themes without starting from scratch each time.
FOUNDATIONS
Core colour values and scales form the starting point for the system.
SEMANTIC TOKENS
Purpose-driven tokens define colours for surfaces, text, borders and states.
COMPONENT TOKENS
Component-specific decisions bring consistency to reusable interface patterns.
Contrast wasn't an afterthought.
I checked colour combinations against accessibility contrast requirements, refining the palette to balance brand expression with legibility and clarity.
Different appearances. Shared foundations.
A shared token structure made it possible to support light and dark experiences without maintaining two disconnected sets of components.
04 / COMPONENTS IN CONTEXT
From foundations to functional interfaces.
With the foundations established, I began translating them into reusable components that could support the complexity of enterprise workflows. The goal wasn't simply to create a library of UI elements, but to make designing consistent experiences easier without limiting flexibility.
DESIGNED TO ADAPT
One component. Multiple possibilities.
I built components with variants, properties and interaction states, allowing them to adapt to different contexts without creating unnecessary duplicates. From form fields and navigation to more complex patterns, each component was designed with reusability in mind.
THE SYSTEM IN PRACTICE
Building a library the team could rely on.
As the design system grew, other designers contributed components from their product work. I reviewed each addition before it entered the shared library, refining properties, responsiveness, frame structure and naming to keep everything consistent and reusable. I also continued improving existing components and creating custom icons where our library didn't cover what the products needed.
05 / EVOLVING THE SYSTEM
Making room for the work that matters.
Building components is only part of maintaining a design system. Documentation, updates and consistency across a growing library all require time — something that's often in short supply on a small design team. I began exploring how AI-assisted workflows in Figma could help reduce repetitive documentation work.
A system needs more than components.
As the library grew, keeping documentation up to date became an ongoing challenge. Each component needed guidance on its purpose, structure, properties and appropriate usage. Creating that guidance manually was time-consuming alongside active product design work.
From repetitive writing to a repeatable workflow.
I developed a reusable prompt for Figma's AI tools to generate initial documentation across predefined sections, including component descriptions, variants, properties and usage guidance. The output provides a starting point for designer review and refinement — not a replacement for design judgement.
Designing the system — and how it's maintained.
The aim isn't to automate design judgement. It's to reduce effort spent on repetitive tasks so more time can go towards accessibility, component quality and the needs of the products using the system. This remains an evolving workflow, rather than a fully automated documentation process.
06 / OUTCOMES & REFLECTION
More than a library of components.
What began as a design foundation for Product Builder grew into a shared system that I took ownership of and continued developing across Gentrack's products. Beyond the components themselves, the biggest achievement was establishing a more consistent approach to interface design, with reusable foundations, clearer standards and a library that could evolve alongside the team's needs.
What I established
A shared visual foundation
I established the token architecture, including semantic colours, component tokens and support for light and dark themes.
A maintained component library
A growing collection of reusable components, patterns and custom icons, reviewed and refined to maintain quality as the system evolved.
A more consistent way of designing
A shared approach that designers could contribute to, with standards for structure, responsiveness and reuse.
A design system is never really finished.
Establishing the foundations was only the beginning. As the library grew, I found that maintaining components, reviewing contributions and keeping documentation up to date required just as much attention as creating new components. This work reinforced the importance of balancing structure with flexibility — and making sure a design system remains practical for the people maintaining and using it.
Looking ahead
I'm continuing to explore ways to make documentation and maintenance more efficient, including AI-assisted workflows, while keeping accessibility, usability and design quality at the centre of the system.
07 / KEEP EXPLORING
There's more to the story.
Every project brings a different kind of challenge. Take a look at what I worked on next.
