Toky CSS is a desgin token-first CSS framework for building custom user interfaces with consistency built in.

The name Toky comes from tokens. Toky CSS is built around CSS variable tokens that define colors, typography, spacing, layout, theming, and other design decisions in a predictable way.

Instead of starting every project by creating color palettes, typography scales, spacing systems, theme variables, and component foundations from scratch, Toky CSS provides those building blocks from day one while still leaving the final design entirely in your hands.

It combines CSS variable tokens, sensible HTML defaults, automatic color scales, fluid typography, built-in theming, and a small set of utilities into a single CSS file.

No JavaScript. No build step. No framework-specific syntax.

Toky CSS is built around a simple idea:

Tokens first. Components second. Utilities last.

The framework handles common UI foundations so you can spend more time designing interfaces and less time rebuilding the same systems for every project.

Why Toky CSS?

Most frontend projects repeat the same setup process:

• Creating color scales
• Building light and dark mode support
• Writing responsive typography media queries
• Defining spacing systems
• Styling native HTML elements
• Maintaining visual consistency across screens

Toky CSS provides these foundations out of the box while remaining flexible enough for custom websites, applications, dashboards, landing pages, design systems, and component libraries.

Want to see everything included? Continue to the Features page.