Zetta v1.6

Zetta Design System · v1.6

The system your front end is built on.

One token foundation, three real themes — Light, Dark, and a high-contrast Accessibility theme — and 77 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.

Get started Get the plugin
3themes
79color tokens
878component specs
77component 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.

Primary 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.

Status icon legend

Success — action completed or status is healthy

Warning — attention required, not yet critical

Error — action failed or status is critical

Information — neutral notice or guidance

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 →