One Component Library for Three Surfaces
Article by Deyvid Bardarov
How we keep a website, a customer app and an internal tool looking and behaving like one product, without slowing any of them down.
Many of our clients run the same business through several screens: a public website, a mobile app for customers and an internal tool for their own team. Left alone, each one grows its own buttons, colours and quirks, and the product starts to feel like three different companies.
Start with tokens, not components
We begin with design tokens (colour, type, spacing, radius, motion), defined once and shared by every platform. Components come next, built from those tokens, so a change to the brand red or the base font size reaches all three surfaces at the same time.
Share behaviour, adapt layout
A date picker should work the same way everywhere, but it doesn’t have to look identical on a phone and on a wide admin screen. We share the logic and the states, and let each surface choose the layout that fits it.
Keep design and code in sync
The Figma library and the code library use the same names and the same variants, and every component has a short page explaining when to use it. It’s a small habit that saves long conversations, and it lets a new designer or developer ship something consistent in their first week.
