Get started

The model

Zetta ships the DESIGN.md spec (tokens + component specs) and the token layer generated from it, packaged as the zetta-design plugin. In AI-assisted development your assistant loads the zetta-design-md skill and generates each component in your project's own stack and conventions (React, Angular, Tailwind — whatever you use), referencing the Zetta tokens. The only maintained source is the spec — there is no shared component package to version or keep in sync.

Get the plugin

Zetta's agents, skills, rules and the design system live in the private marketplace repo ZettaByte-SG/Zetta_Agent_Skills. You'll need access to the ZettaByte-SG GitHub org (run gh auth login if a clone fails).

In Claude Code:

/plugin marketplace add ZettaByte-SG/Zetta_Agent_Skills
/plugin install zetta-design@zetta     # the design system

# optional — the rest of the standards
/plugin install zetta-core@zetta             # base agents + commands (install first)
/plugin install zetta-frontend-react@zetta   # or zetta-frontend-angular / zetta-backend
/zetta-init                                  # copy the coding rules into your project

Once installed, the design skill triggers on prompts like "apply our design system", "add dark mode", or "make this on-brand" — and builds to spec.

The three themes

• Light — the default, on a white canvas.
• Dark — a slate canvas with heavier shadows; the brand stays lime.
• Accessibility — a high-contrast pure-black theme where meaning is carried by label, icon and border, never by color alone. An explicit choice, never auto-applied.

Flip between them with the L / D / A control in the header — every page reskins live.

Using the tokens

The one artifact you consume directly is the generated token layer (CSS variables). Add it to your app and reference the variables:

Download tokens.css / tokens.json from the Tokens pages, or have the skill emit them for your stack.

Workflow

• 1Install the zetta-design plugin and add the token layer to your app.
• 2Find the component here; read its spec + guidance and flip the themes.
• 3Copy its Build with the skill prompt.
• 4Your AI implements it in your codebase via the skill, referencing the tokens.
• 5Verify in Light, Dark, and Accessibility, and against the guardrails.

Next