Zazz Design Framework
Quickstart

Webflow

Clone the Zazz Webflow kit to start a new project.

The Zazz Webflow kit is the fastest path to a Zazz-based site in Webflow. Variables, classes, and a starter set of components are pre-wired. Clone the kit, then customize.

1. Clone the kit

Open the Zazz Webflow Kit on the Webflow community and use the Clone button to bring it into your account as a new site.

2. What's included

  • Every Zazz variable (theme, corporate, grayscale, typography, spacing, radius, layout, effects) configured as Webflow Variables with light and dark modes.
  • The composed text styles as classes (text-display, text-h1text-h6, text-xltext-xs, text-eyebrow).
  • Spacing, padding, margin, and gap utility classes (p-md, gap-lg, mx-auto, etc.).
  • Container and article wrapper classes for the self-padding semantic widths.
  • A starter library of components built from the system.

3. Customize

Update the variables at the project level to rebrand without touching any class. Webflow's Variables panel resolves through every class instantly. Change --primary to your client's brand color and every button, link, and accent surface follows.

For per-page or per-section overrides, scope a variable change to a parent element. The override cascades to descendants the same way it does in CSS.

See Customization for the full override patterns.

Where to next

On this page