A design system that halved design‑to‑dev back‑and‑forth

The problem

Qube had many products, most of them legacy. Each looked and behaved differently, engineers rebuilt the same components every time, and the same users had to relearn every tool.

A full redesign of every product was never going to happen.

What I found

The blocker was not the components. It was the missing rule for when to use them.

A component library without documentation does not get adopted.

Key decisions

New work uses the system

New products and full-page rebuilds used Pixel. Small patches kept the old patterns. No big migration, just a clear rule for every piece of work.

Prove it on a real product

Pixel was built alongside Qube Slate, so it served a shipping product from day one.

Documentation people would use

Five tabs per component: overview, usage with real product context, a full variant matrix, props, and content rules.

Keep pushing

Team restructures deprioritised it more than once. I kept it on the roadmap until engineers saw how much faster they shipped with it.

How it's built

A solid base

Started from BlueprintJS because it fit our data-heavy screens, overrode its styling, and built cinema-specific components on top, such as dense tables.

Refactored as Figma grew

Tokens, variants and component structure were rebuilt several times as Figma's features matured.

Searchable docs

Near the end of my tenure, the documentation was loaded into NotebookLM so anyone could ask it a question.