Introduction

Zazz is a variables-driven design framework built on native web standards: tokens, cascade layers, and browser APIs. It requires no build step, avoids framework lock-in, and eliminates selector specificity conflicts.

Principles

• Tool-agnostic: Shared tokens and structures work across Figma, HTML, and web frameworks.
• Precision: Spacing, color, radius, and typography resolve from CSS variables on :root.
• Defaults: Ready-to-use component styling with built-in light and dark theme support.
• Standards-based: Uses native HTML elements and CSS features (Popover, <dialog>, Invoker Commands, @layer, and container queries).

Architecture

1. Tokens: Semantic variables (--primary, --muted-foreground, --gap-md) control the theme.
2. Cascade layers: Later layers (utilities) cleanly override earlier layers (components) without !important.
3. Data attributes: Variants use attributes like data-variant="primary" and data-size="sm" instead of modifier classes.
4. Fluid scales: Fluid clamp() typography and spacing scale with the viewport without breakpoint jumps.