Puzzle: a Storybook design system for a whole product organisation

The problem

When several product teams each build their own buttons, modals and form fields, the product stops looking like one product and every accessibility fix has to be made several times. A shared library only solves that if teams actually adopt it, which makes documentation and stability part of the engineering problem.

How it was built

• Built a shared component library and documented every component in Storybook, so adoption did not depend on asking the author how something worked.
• Kept the API surface deliberately small and versioned changes carefully — a breaking change in a shared library is a breaking change in every product at once.
• Contributed to Dispatcher, a custom state-management tool used alongside the library.
• Maintained the library over time rather than shipping it and moving on, which is the stage where most design systems quietly die.

Result

• One component library adopted across product teams instead of several divergent ones.
• Interface consistency and accessibility fixes applied once, centrally.
• A documented, versioned dependency other engineers could use without support.

Services involved

• React & Next.js Development

  React frontends that stay fast as the product grows.