Design System
A cross-product design system built from scratch, with a Figma-to-React token pipeline.
Role :
Product designer
Year :
2024-2025
Client :
011h
Project Duration :
6 months
CONTEXT & PROBLEM
As the sole Product Designer at 011h, I was responsible for multiple digital products simultaneously - including Builder, a construction management tool, a product catalogue, and a Revit plugin. Each product had its own UI, built independently.
Over time, the inconsistencies became impossible to ignore. The team had been using Tailwind CSS as a foundation, but the products had grown complex enough that customising Tailwind was no longer optimal — and increasingly costly to maintain with licensing. It was clear we needed a shared design system.
APPROACH
I led the design system work together with the front-end developer — making it a true cross-disciplinary effort from day one rather than a handoff.
We started by defining the architecture: structure, naming conventions, and tokenisation principles. Only once the foundations were agreed did we move into building the components themselves.
The system, in full
We built the system layer by layer — starting with colour palettes and semantic tokens, through typography and spacing, all the way to fully documented interactive components. Everything a team needs to build consistently, without reinventing the wheel each time.
THE INTEGRATION THAT MADE IT WORK
We set up an automatic token export pipeline between Figma and React. When I updated a token in Figma, the front-end developer could pull the changes directly into React — updating components almost instantly, without manual handoff.
This meant design changes propagated through all products in near real-time. It fundamentally changed how we collaborated — and eliminated a whole category of handoff errors that had previously slowed the team down.
Impact
The design system brought consistency across all 011h products for the first time. Design decisions made once applied everywhere — reducing visual debt and speeding up both design and development work across the team.
The Figma-to-React token pipeline in particular eliminated a whole category of handoff errors and made the collaboration between design and development significantly faster and more reliable.
What I'd do differently
The biggest constraint was time — there were simply too many elements to cover as thoroughly as I would have liked. The scope grew as we built, and some areas had to be deprioritised to hit deadlines.
If I were starting again, I'd reserve more time upfront and invest more in micro-interactions: the state changes, transitions, and feedback patterns that make a UI feel truly polished. These were the first things cut when deadlines tightened — and the ones I'd most want back. A design system is never finished — but getting the foundations right from the start determines how far it can scale. The token pipeline was the best decision we made. The micro-interactions were the biggest thing we left on the table.
More Projects
Design System
A cross-product design system built from scratch, with a Figma-to-React token pipeline.
Role :
Product designer
Year :
2024-2025
Client :
011h
Project Duration :
6 months
CONTEXT & PROBLEM
As the sole Product Designer at 011h, I was responsible for multiple digital products simultaneously - including Builder, a construction management tool, a product catalogue, and a Revit plugin. Each product had its own UI, built independently.
Over time, the inconsistencies became impossible to ignore. The team had been using Tailwind CSS as a foundation, but the products had grown complex enough that customising Tailwind was no longer optimal — and increasingly costly to maintain with licensing. It was clear we needed a shared design system.
APPROACH
I led the design system work together with the front-end developer — making it a true cross-disciplinary effort from day one rather than a handoff.
We started by defining the architecture: structure, naming conventions, and tokenisation principles. Only once the foundations were agreed did we move into building the components themselves.
The system, in full
We built the system layer by layer — starting with colour palettes and semantic tokens, through typography and spacing, all the way to fully documented interactive components. Everything a team needs to build consistently, without reinventing the wheel each time.
THE INTEGRATION THAT MADE IT WORK
We set up an automatic token export pipeline between Figma and React. When I updated a token in Figma, the front-end developer could pull the changes directly into React — updating components almost instantly, without manual handoff.
This meant design changes propagated through all products in near real-time. It fundamentally changed how we collaborated — and eliminated a whole category of handoff errors that had previously slowed the team down.
Impact
The design system brought consistency across all 011h products for the first time. Design decisions made once applied everywhere — reducing visual debt and speeding up both design and development work across the team.
The Figma-to-React token pipeline in particular eliminated a whole category of handoff errors and made the collaboration between design and development significantly faster and more reliable.
What I'd do differently
The biggest constraint was time — there were simply too many elements to cover as thoroughly as I would have liked. The scope grew as we built, and some areas had to be deprioritised to hit deadlines.
If I were starting again, I'd reserve more time upfront and invest more in micro-interactions: the state changes, transitions, and feedback patterns that make a UI feel truly polished. These were the first things cut when deadlines tightened — and the ones I'd most want back. A design system is never finished — but getting the foundations right from the start determines how far it can scale. The token pipeline was the best decision we made. The micro-interactions were the biggest thing we left on the table.
More Projects
Design System
A cross-product design system built from scratch, with a Figma-to-React token pipeline.
Role :
Product designer
Year :
2024-2025
Client :
011h
Project Duration :
6 months
CONTEXT & PROBLEM
As the sole Product Designer at 011h, I was responsible for multiple digital products simultaneously - including Builder, a construction management tool, a product catalogue, and a Revit plugin. Each product had its own UI, built independently.
Over time, the inconsistencies became impossible to ignore. The team had been using Tailwind CSS as a foundation, but the products had grown complex enough that customising Tailwind was no longer optimal — and increasingly costly to maintain with licensing. It was clear we needed a shared design system.
APPROACH
I led the design system work together with the front-end developer — making it a true cross-disciplinary effort from day one rather than a handoff.
We started by defining the architecture: structure, naming conventions, and tokenisation principles. Only once the foundations were agreed did we move into building the components themselves.
The system, in full
We built the system layer by layer — starting with colour palettes and semantic tokens, through typography and spacing, all the way to fully documented interactive components. Everything a team needs to build consistently, without reinventing the wheel each time.
THE INTEGRATION THAT MADE IT WORK
We set up an automatic token export pipeline between Figma and React. When I updated a token in Figma, the front-end developer could pull the changes directly into React — updating components almost instantly, without manual handoff.
This meant design changes propagated through all products in near real-time. It fundamentally changed how we collaborated — and eliminated a whole category of handoff errors that had previously slowed the team down.
Impact
The design system brought consistency across all 011h products for the first time. Design decisions made once applied everywhere — reducing visual debt and speeding up both design and development work across the team.
The Figma-to-React token pipeline in particular eliminated a whole category of handoff errors and made the collaboration between design and development significantly faster and more reliable.
What I'd do differently
The biggest constraint was time — there were simply too many elements to cover as thoroughly as I would have liked. The scope grew as we built, and some areas had to be deprioritised to hit deadlines.
If I were starting again, I'd reserve more time upfront and invest more in micro-interactions: the state changes, transitions, and feedback patterns that make a UI feel truly polished. These were the first things cut when deadlines tightened — and the ones I'd most want back. A design system is never finished — but getting the foundations right from the start determines how far it can scale. The token pipeline was the best decision we made. The micro-interactions were the biggest thing we left on the table.