How to read these docs

Two readers. Same docs. One token set.

These docs serve the designer working in Figma or Webflow and the developer working in code at the same time. Most pages run both tracks side by side.

The two tracks

Design lane shows the Figma variable name, the Webflow class, and where to find the matching piece in the kit. If you live in Figma or the Webflow Designer, this is your column.

Code lane shows the CSS variable, the Tailwind utility, and the markup. If you write code, this is the source of truth.

Same concept, two surfaces. The point of running them together is to prove the names match.

Section guide

The sidebar runs roughly in the order you'll need things.

1. Introduction. What Zazz is, why it exists, who it's for. You're here.
2. Quickstart. Get the kit installed in your stack.
3. Foundations. The token system. Every other page references these names.
4. Primitives. The atomic UI elements. Buttons, cards, inputs, dialogs, and the rest.
5. Components. Composed patterns built from primitives. Added as primitives stabilize.
6. Templates. Full presentation surfaces: design decks, brand guidelines, style guides.
7. Practices. Cross-cutting opinions. Light and dark, AI-friendly markup, customization, porting between tools.
8. Reference. The complete CSS variable export, naming conventions, the changelog.

Reading order

The minimum path:

1. Philosophy: what Zazz commits to.
2. Quickstart: pick your environment.
3. Foundations: learn the tokens before touching primitives.

After that, jump to whichever primitive or component you need.

Status

Zazz is at version 0.4.4. Foundations and primitives are stable. Components, templates, and Webflow alpha pieces are still being added; expect new pages over the next few months.