Extensible Design System for Multi-Client Projects
A flexible design system built for multiple clients and platforms.
What is an extensible design system?
When working in a software-house environment, I often hit the same problem: every new client meant building a fresh design system from scratch. It took a lot of time, and most of that time wasn’t spent designing the interface, it was spent rebuilding basics.
Fig 1. Image header
Eventually I realized the design system itself can be made extendable. Think of it like a car manufacturer building a base model: the structure stays the same, but the engine, interior, and colors can be customized based on buye needs.
My design system works the same way, the components are fully functional out of the box, and the styling (color, typography, spacing, radius, etc.) can be adjusted per project.
Why does it matter?
Handling multiple clients means each project need to feel unique. Normally that leads to completely rebuilding the component to match the brand. Whit this design system I start with solid base of tested component and shifted focus more towards styling and building required UI pages
In real cases, this lets me kick off new projects much faster. Instead of spending weeks building core components, I get to spend time on what actually matters: the brand expression and the UI details that solve client problems.
The Concept
Fig 2. Interface Example
The idea is simple: separate the component from the style. Figma’s variables make this possible through variable modes, this modes let us switch one set of tokens to another. At first it is widely used as light and dark modes, but I explore and learn it can be more that light and dark. It can be swapping primary colors, swapping corner radius, and many more.
How it works?
Start by import the library into the new project. And then we can start adjusting the styles. Just by swapping the token we can get component with different props that match our need.
Future Concept
I’m currently experimenting with a style layer on top of the token layer. Some visual styles like gradients or raised surfaces that can’t be achieved by tokens alone.
This extra layer lets me build more complex and unique design expressions while keeping components maintainable. It’s still a work in progress, but the potential is big.
Bottom Lines
This extensible design system has significantly improved my workflow. What used to take two weeks of rebuilding components now takes a few days. By separating style from structure, I get consistency, speed, and the freedom to adapt the system to any client.