Zetta Design System · v0.10
The system your front end is built on.
One token foundation, three real themes — Light, Dark, and a high-contrast Accessibility theme — and ~70 components, delivered as a Claude Code plugin. This site is the reference; your AI builds the components in your own stack. Flip the theme in the header — everything below reskins live.
3themes
55color tokens
269component specs
13component groups
Live in every theme
These previews use the same tokens and component styling the whole system does — switch the theme to see them re-skin.
Brand Success Warning Danger Info
Heads up
Meaning is carried by text, icon and border — not color alone — so this reads clearly in the Accessibility theme too.
Explore
Foundations
The brand, color, typography, iconography and accessibility principles behind the system.
Browse foundations →Tokens
Every color, type, spacing, radius, shadow and motion value — with all three theme values side by side.
Browse tokens →Components
Each component live in all three themes, with its resolved spec and a build-with-the-skill recipe.
Browse components →