Design system

Design tokens, a deterministic resolver, a theme schema and component libraries for React, Angular, Svelte and Vue, published to npm under Apache-2.0. Every consumer resolves its values through the same engine, so a change to the tokens reaches the code, Figma and the docs together.

Role
Sole designer & developer
Platform
React, Angular, Svelte, Vue
License
Apache-2.0
FeatureThe UI Organized wordmark on a grid, surrounded by sample components — tabs, inputs, a date picker, radio buttons and a dialog — and cards for React, Figma, and Free & Open Source.

One source of truth

Every value in the system starts as a DTCG token. The resolver reads those tokens and works out the final value for each one, following references, doing the math and applying color modifiers, and it is the same resolver whether the caller is the theme builder, the Figma plugin or the published CSS. That is what stops the code, Figma, the docs and the marketing site from drifting apart.

Diagram: you pick a brand color and a few preferences; generators turn them into a full rulebook of tokens — one standard file, the single source of truth — which feeds the website, other platforms, Figma, the marketing site and the documentation. One shared resolver computes the final value for every consumer, so nothing drifts out of sync.

Theming, import & export

A theme is a full set of design tokens that defines one look. Themes import from Tokens Studio or plain DTCG files and export straight to CSS, or to Figma as native variables, where the export updates what it already created instead of making duplicates.

The library

The React library is 70 components built on Ark UI’s headless primitives, so the work here goes into the tokens, the states and the variants rather than into keyboard handling. Angular, Svelte and Vue libraries sit on the same tokens, with a set of table packages beside them.

The CLI applies a theme bundle to a project and then checks that it actually works: token coverage, font loading and cascade conflicts, so a missing token turns up at apply time. This portfolio is built on the library and the tokens package, which is a quick way to find out what the system is still missing.