One library. Five brands. One source of truth.
sourceA single, scalable design library that powers five vehicle marketplaces. One component feels native to every brand, buyer and vocabulary, all from one centralized source.
Five marketplaces, one company, zero shared parts.
The Junction family runs five vehicle marketplaces under one roof. Each has its own audience, business goals and buying journey. But every product page is built from the same parts: a listing card, a spec table, an EMI tool, a review block.
Those parts had been built separately for each product. This project centralized them into one design library, designed solo, end to end, in three weeks.
The same parts, five different ways.
Farmers, families, fleet owners, riders and contractors all shop through the same underlying components.
HP & CC, cc & kmpl, payload, bucket capacity. Same card, different words.
Cards, buttons and grids were rebuilt per product. Inconsistency by default, and maintenance multiplied.
Every new screen was built from zero, and a fix in one product never reached the others.
One library that stays consistent and flexible at once.
Identical structure, spacing and behaviour on every product.
Room for each brand's colour, language and CTA to stay its own.
New screens assembled from ready parts, not built from zero.
A new product can join by supplying tokens, not screens.
Build the card once. Theme it per brand.
The insight that made one library survive five brands: separate what must stay the same from what is allowed to differ.
Three weeks, three moves.
Collected every existing screen across the six products, mapped the overlap, and set the shared tokens (colour, spacing, radius, type) as Figma variables.
Built the container grid, the button primitive and the listing card as slot-based components, then themed each to every brand to stress-test the model.
Extended the system across the full product page: chrome, detail modules, the rail and discovery. Every module inherits the same tokens.
One button primitive, five brand themes.
One structure: primary, outlined and linking, each with a hover state. Only the colour token changes between products.
One container. One content and rail split.
Every product page sits on the same width. Content and rail keep the same split across all six brands.
One source of truth. Five products, faster.
The hard part wasn't the components. It was deciding what six brands were allowed to disagree about.
Locking the skeleton is what let six brands move without drifting apart.
Theming by variable meant a brand change was a token swap, not a rebuild.
Built so a future vertical can join by supplying tokens. The system is ready before the product is.