UI Core Kit

UI Core is a Figma-based UI component kit powered by design tokens. Launched in 2023, it was an early adopter of design tokens in commercial UI kits, production-ready way.

Role

Solo builder

UI Core Kit overview

Launch & validation

UI Core launched in 2023 as a Figma UI kit centered on design tokens and practical brand customization. It reached early validation with 2 paid users in the first month through organic distribution.

The project gave me a stronger foundation in design systems, token architecture, and scalable UI decisions. It later informed my writing on Figma Variables and follow-up tooling experiments like tw-scale.

The challenge

UI Core started from agency work. Every new client needed the same foundation rebuilt before real product design could begin: colors, typography, spacing, inputs, buttons, states, and responsive rules.

That setup work looked small in isolation, but it repeated across projects. The cost was not only time. It pushed designers back into component rebuilding when they should have been solving product problems.

Research and insights

I studied mature design systems including Adobe Spectrum, Salesforce Lightning, Shopify Polaris, IBM Carbon, and Goldman Sachs to understand how large teams organize scalable interface foundations.

Key finding

Most UI kits sold finished components. The real need was adaptation: a way to change brand, mode, density, typography, and radius without rebuilding the interface from scratch.

Solution

01

Design tokens, the source of truth

Design tokens are the solution for multi-brand systems. With the right setup, one UI kit can adapt dynamically across brand color, radius, font family, type scale, and spacing.

Design tokens
Design tokens - Source of truth

02

Naming convention and design token structure

I defined a naming convention with two or three layers: primitive tokens, semantic tokens, and when needed, component-level tokens.

Naming convention
Naming convention

Design

Takeaway

UI Core was a discovery path I began after seeing Six Jan introduce Token Studio and frame tokens as a source of truth. It taught me to look at design systems through a more technical lens: JSON files, token transformation, and how one source can be converted into different formats.

Looking back, it was a pity that I did not continue promoting the kit after it found buyers through organic traffic. Still, with AI development today, that foundation has become something I can apply more broadly.

More projects