Tokis: A Zero-Runtime UI Library Built Around Design Tokens
Tokis: A Token-Native UI Library
(Tokis Only Knows Its Styles)
Design systems are becoming a core part of modern frontend development.
Instead of repeating styles across components, teams now rely on design tokens and reusable primitives to create scalable UI systems.
Tokis is an open-source project exploring this architecture.
Docs playground:
https://prerakmathur20.github.io/TokisWebsite/
npm:
https://www.npmjs.com/package/@tokis/tokis
Design Tokens as the Foundation
Design tokens represent design decisions such as:
color palettes
spacing scales
typography
motion values
By defining these values once, developers can maintain consistency across an entire application.
Performance-First Architecture
Tokis is built around a performance-first philosophy.
The library focuses on:
zero runtime styling
token-native design
modular architecture
headless primitives
This allows developers to build UI systems without shipping unnecessary runtime code.
Headless UI Primitives
Tokis provides primitives that handle UI behavior but leave styling up to the developer.
This makes it easier to build custom components while maintaining accessibility and consistent interaction patterns.
Interactive Documentation
To make experimentation easier, Tokis includes a documentation site with a live playground.
You can explore the components and tokens directly in the browser.
Explore it here:
https://prerakmathur20.github.io/TokisWebsite/
Conclusion
Tokis is an experiment in building a token-driven, performance-first UI architecture.
If you're interested in design systems or headless UI tools, feel free to check it out and share feedback.