Resources
Downloads
The Zetta foundation, generated straight from the 0.10 spec — 90 tokens across 3 themes. These are the only artifacts you consume directly; components are generated per project by the skill, not shipped as a package.
The full token layer as CSS custom properties — :root plus the Dark and Accessibility data-theme scopes. Drop it in and reference var(--color-*), var(--radius-*), and the rest.
The same tokens machine-readable: every value resolved across all three themes, grouped by color, typography, spacing, radius, shadow, motion and icon. For build tooling and editors.
Using the token layer
Link the stylesheet, set a theme scope on the root, and self-host the fonts. That's the whole runtime.
<!-- 1. Link the tokens -->
<link rel="stylesheet" href="/tokens.css" />
<!-- 2. Set the active theme on <html> (light · dark · accessibility) -->
<html data-theme="light">
<!-- 3. Reference tokens in your own components -->
.thing { color: var(--color-ink); border: 1px solid var(--color-border-strong); border-radius: var(--radius-base); }Full setup — font self-hosting, the Material Symbols gotchas, and stack recipes — is on Get started. To generate components in your stack, install the Zetta skill (see Get started) and apply it with the tokens as reference.