Paubha: one system, from Figma to production.

Design systems usually live in two places. Designers work from a Figma file, engineers work from a code library, and over time the two drift apart. A colour gets updated in one and not the other. A button looks one way in the mockup and another in the product.

Paubha started with a simple question: what if there was only one source of truth?

I started with the foundations, not the components. Get the tokens right and everything built on top of them stays consistent.

1. 01Every colour, space and radius is defined once, and named for what it does rather than how it looks.
2. 02Figma and code use the exact same names, so designs hand off without translation.
3. 03Light and dark themes are built into the tokens, so every component supports both by default.
4. 04One sizing scale keeps buttons, inputs and selects aligned whenever they sit side by side.
5. 05Every interactive element shares the same soft focus ring, so the whole system feels like one product.
6. 06Components install with a single command and live in your codebase, so teams fully own them.
7. 07Accessibility is built in, with keyboard support and screen reader labels on every component.

With Paubha, a button’s colour lives in one place: --bg-brand-solid. Change it once and every screen updates, in the design file and in the product.

Switching a whole product to dark mode, or to a new brand colour, becomes a token change instead of a redesign.

Paubha is open source and still growing. Next up: a published Figma library, more real-world examples, and room for others to contribute.