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

Starting with tokens

Avoiding runtime styling

Headless primitives

Interactive docs playground

Still an experiment 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: 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 The basic idea behind Tokis is pretty simple. Instead of building components first, the system starts with design tokens. 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. 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. Another design decision was keeping the primitives headless. They handle behavior like: 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. 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/ 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: If you’ve worked on design systems or component libraries before, I’d be really curious to hear your thoughts. Feedback is always welcome. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or - spacing values start diverging - colors get duplicated everywhere - components slowly become inconsistent - focus management - accessibility helpers - interaction patterns - token-first design systems - zero runtime styling - headless primitives for UI behavior