Overview

A token in Zazz is not a styling decision. It is the contract between design and code.

You know how most design systems work: a Figma library, a CSS file, sometimes a Tailwind config, sometimes a Webflow style guide. Each one tries to be the source of truth. When a designer changes a corporate color in Figma, someone has to update the CSS. When a developer adjusts the spacing scale in code, the Figma file drifts. Rebrands turn into a manual sweep across tools. Dark mode arrives bolted on. The design tool and the codebase end up telling different stories about the same product.

This is what Zazz Foundations solves. The token system is built around the following principles:

• Variables-Driven: Every visible choice is a token. Nothing is hardcoded.
• Roles, Not Values: Tokens describe what a value is for, not what it equals.
• Derived, Not Duplicated: Themes, overlays, and scales derive from a small set of primitives.
• Themable by Mode: Light, dark, and other modes attach to the variable, not the layer.
• Portable Across Tools: Figma, Webflow, Tailwind, and CSS share the same names.

Variables-Driven

Zazz exposes every visible choice (color, type, space, radius, shadow) as a token. The token, not the value, is what your work references. This means:

• One source of truth. Change the token, the whole product changes with it.
• No hardcoded values. Components don't ship with literal hex codes or pixel sizes.
• One vocabulary. Designers and developers talk about the same --gap-md, not "the medium spacing" versus "16px."

In a typical setup, changing a corporate color is a search-and-replace across files. With Zazz, you change one variable and the rebrand is done: in Figma, in Webflow, and in code at once.

Roles, Not Values

Tokens describe roles. --color-text is a role, not a color. --gap-md is a role, not a measurement. You decide what each role points to.

• Adoption inherits structure, not look. Use Zazz's organization without inheriting Zazz's aesthetic.
• Components are agnostic. They consume --color-text and don't care what color it is.
• Customization is the default mode. Override at the token layer; never touch components.

If you want a louder rebrand, change the corporate scales. If you want denser layouts, change --spacing-interval. If you want softer corners, change --radius-multiplier. The components don't care.

Derived, Not Duplicated

Zazz layers tokens so a single change propagates instead of replicating across files.

• Semantic tokens reference primitives. --color-text points into the grayscale or corporate palette, not at a hex value.
• Derived tokens are computed. Shade and tint use oklch(from var(...) ...). They aren't separate values to maintain.
• Theme tokens follow modes. Light and dark are two values on the same variable.

:root {
  --color-text: var(--neutral-950);
  --gap-md: calc(var(--step-4) * var(--spacing-interval));
  --radius-xs: calc(2px * var(--radius-multiplier));
  --shadow-md: 0 4px 8px oklch(from var(--neutral-950) l c h / 0.08);
}

Change --neutral-950, and every shade overlay, every text color, every shadow that derives from it shifts in lockstep. No hunt-and-fix.

Themable by Mode

Light, dark, and any additional modes attach to the variable itself, not to individual layers.

• One variable, multiple values. --color-background resolves to the right value automatically when the mode switches.
• No mode-specific markup. Components don't branch on theme. They consume the token and trust it.
• Modes are extensible. Add high-contrast, brand-takeover, or holiday modes; they're all just additional values on existing variables.

Designers switch the Figma mode and the file recolors. Developers toggle a data attribute and the app recolors. Same variables, same outcome, no per-component logic.

Portable Across Tools

The Zazz token in Figma is the Zazz token in Webflow is the Zazz token in Tailwind is the Zazz token in CSS.

The same name lives in every tool. You're not learning four token languages. You're learning one.

The eight collections

Each collection is a category page.