Skip to content

Letting the product grow without coming apart at the seams

A complete design system —components, tokens and documentation— so that adding a new screen does not mean reinventing the button all over again.

Who
Samuel Suárez Rodríguez
When
2026
Built with
TypeScript · React · Monorepo · Design tokens

Master's coursework, done together with Red Rivera, on the public specifications of an OpenAI design system. The code is public.

  • 1single source for colour, type and spacing
  • 3principles: consistent, accessible and semantic
  • 9GitHub stars from people outside the team

The situation

Every product that grows ends up the same way: four different buttons all called “button”, a blue that is not the blue, and a new screen that takes three days because things that were already settled have to be settled again.

What was built

A component library published as a package and consumed by the applications in the repository itself, with the colour, type and spacing values declared once and used everywhere. Living documentation next to the code, so that it gets read before anyone writes a new component.

What came out

Adding a screen becomes a matter of assembling pieces that already exist and are already accessible. Consistency stops depending on someone remembering.

What this has to do with you

It is what sits underneath our CRM and any bespoke tool we build: if a product is going to live for years, the discipline goes in at the start or it never goes in at all.

All case studies