Theming

One surface

Parts reference only var(--k-…) tokens. To restyle everything, redefine tokens after tokens.css loads — never edit a part’s CSS. An accent change is five lines:

:root{ --k-accent:#4f46e5; --k-accent-ink:#4338ca; --k-accent-bg:rgba(79,70,229,.08); --k-accent-bg-strong:rgba(79,70,229,.1); --k-accent-line:rgba(79,70,229,.18); }

The Themes page ships five presets in exactly this form, each as a small CSS file you can download or copy.

Shape and motion are tokens too

Radius (--k-radius, --k-radius-lg), durations (--k-dur-1…3) and the easing curve are tokens. Tighten the whole product by tightening the mold; loosen one part and it stops matching its siblings.

One token is off-limits by design: --k-core, the vermillion at the center of active controls. It is the signature, not a setting.

More docs

Getting Started · Dark Mode · Accessibility · Installation · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog