A shared design system for multiple products

The company was growing. The design was falling behind. This placeholder case study is about building one shared system across several products, and the unglamorous work of getting people to use it.

The problem

We had components. We did not have a system. Every product had its own version of the same button, its own spacing, and its own idea of what a “small” heading was.

Seeing what we already had

Before building anything new, we audited what existed. We counted the duplicates, compared the variants, and found that most differences were accidental rather than intentional.

Agreeing on the rules

The first release was small: colour, type, spacing, and a handful of components. The point was not coverage. The point was a shared vocabulary that designers and engineers could use in the same sentence.

Making it usable

A system that lives in a Figma file is a suggestion. We documented the components beside the code, added examples, and made the default path the easiest path.

“

The documentation answered the question I was about to ask in Slack. That is the whole job.

”

The result

Most products migrated, and handoff got faster. The placeholder numbers in this case study are here to show the layout; replace them with your own.

• Products migrated to the shared system.
• Faster design-to-development handoff.
• Fewer one-off components added per quarter.

Takeaways

A design system is less about the library and more about the agreement. The work that made the difference was social: sessions, examples, and a clear place to ask.