Tokis: A Performance-First, Token-Native UI Library for Building Modern Design Systems

Prerak Mathur — Sun, 15 Mar 2026 00:40:25 +0000

Tokis: An experiment in building a token-first UI library

Over the past few months I’ve been experimenting with a side project called Tokis.

It didn’t start as a UI library.

It started because I kept running into the same issue on frontend projects: styling slowly drifting out of control.

At the beginning everything feels organized. You have a couple of components, a few colors, and maybe some utility classes. But as the project grows, things start getting messy:

spacing values start diverging
colors get duplicated everywhere
components slowly become inconsistent

Eventually even simple design updates become annoying because the same values exist in dozens of places.

So I wanted to try something different: starting from design tokens instead of components.

That idea turned into Tokis.

Docs and playground:

https://prerakmathur20.github.io/TokisWebsite/

npm package:

https://www.npmjs.com/package/@tokis/tokis

Starting with tokens

The basic idea behind Tokis is pretty simple.

Instead of building components first, the system starts with design tokens.

Things like:

colors
spacing
typography
shadows
motion

These tokens become the foundation for everything else.

From there you can build primitives, and finally the actual UI components used in an app.

Conceptually it looks something like this:

tokens → primitives → components

This structure makes it easier to keep styling consistent as a project grows.

Avoiding runtime styling

One thing I wanted to experiment with was zero runtime styling.

Many UI libraries rely on runtime CSS-in-JS or style injection. That approach is flexible, but it also adds runtime overhead and sometimes increases bundle size.

Tokis tries to resolve styling ahead of time so the runtime stays small.

It’s a small architectural decision, but it can make a difference in larger applications.

Headless primitives

Another design decision was keeping the primitives headless.

They handle behavior like:

focus management
accessibility helpers
interaction patterns

But they don’t enforce a specific visual style.

This makes it easier to build your own design system on top instead of being locked into predefined styling.

Interactive docs playground

One thing I personally find frustrating about many UI libraries is documentation that only shows static code examples.

So I added a small interactive playground to the docs site where you can experiment with components directly in the browser.

If you want to try it:

https://prerakmathur20.github.io/TokisWebsite/

Still an experiment

Tokis is still very early and definitely more of an experiment in UI architecture than a finished framework.

The goal was mainly to explore a few ideas:

token-first design systems
zero runtime styling
headless primitives for UI behavior

If you’ve worked on design systems or component libraries before, I’d be really curious to hear your thoughts.

Feedback is always welcome.