Zazz
A variables-driven design framework that runs in Figma, Webflow, Tailwind, shadcn, and plain CSS using the same tokens.
Design tokens that survive the export.
Zazz is a variables-driven design framework. One token set drives Figma, Webflow, Tailwind + shadcn, and plain CSS, so the button you styled in Figma reads from the same --primary variable as the button you ship to production.
It exists because most modern projects span two or three of those environments. Keeping color, type, spacing, and radius in sync across them is the kind of work nobody wants and clients never see. Zazz makes it the platform's job.
What you get
- Eight token collections. Theme, corporate scales, neutrals, typography, spacing, radius, layout, shadows. Every primitive consumes them.
- Fourteen primitives. Buttons, cards, inputs, dialogs, a carousel, scroll animations. Atomic, accessible, theme-driven.
- Light and dark from day one. Every token has a paired value. Toggle the root and the product follows.
- Drop-in kits. Figma library, Webflow kit, shadcn + Tailwind setup. Same names, same shapes.
- No build step. Plain CSS variables. No PostCSS, no SCSS, no runtime.
Where to start
Philosophy
Why Zazz exists and what it refuses to do.
Quickstart
Get Zazz into your stack in under five minutes.
Foundations
The token system every primitive consumes.
Primitives
The atomic UI elements you compose into product.
Status
Zazz is at version 0.4.4. The token system and primitives are stable. Components, templates, and the brand presentation kit are still being added.