Overview

Control the CSS cascade with layers, tokens, and conventions. No specificity conflicts, no build step.

Zazz structures styles with CSS cascade layers and semantic tokens. You can extend and customize components without specificity overrides.

Cascade layers

Zazz defines layer order in _layers.css:

@layer variables, reset, legacy, zazz, migrations;

@layer zazz {
  @layer components, utilities;
}

Later layers override earlier ones regardless of selector specificity:

Layer	Purpose	Example
`variables`	Token declarations only	`:root { --ui-button-radius: var(--radius-md); }`
`reset`	Native element baselines (zero specificity)	`html`, `body`, `input`, `select` defaults
`legacy`	Pre-Zazz CSS during migration	`@import "old.css" layer(legacy)`
`zazz.components`	Component rules	`.ui-button`, `.ui-dialog`, `.ui-field`
`zazz.utilities`	Atomic override classes	`.text-primary`, `.gap-md`, `.rounded-full`
`migrations`	Temporary migration shims (highest author layer)	`.btn-primary { --ui-button-background: ... }`

Utilities in zazz.utilities override .ui-button in zazz.components without !important. See Layers.

Base files

Four core stylesheets form the system:

_layers.css: Declares cascade layer order (loads first).
_variables.css: Global tokens for color scales, semantic roles, spacing, typography, radius, and shadows.
_reset.css: Element defaults wrapped in :where() for zero specificity.
_utilities.css: Atomic utility classes wrapped in :where().

Tokens and theming

Components read var(--token). Restyle UI by updating variables:

:root {
  --primary: oklch(0.6 0.2 145); /* global brand override */
  --ui-button-radius: var(--radius-full); /* component-level override */
}

<button class="ui-button" style="--ui-button-background: var(--secondary)">
  Instance override
</button>

See Theme variables.

Typography

Zazz uses fluid clamp() sizing. A single text-* utility sets font size, line height, letter spacing, and weight. The .ui-prose class formats author-controlled HTML.

<span class="text-display">Headline</span>
<p class="text-sm text-muted-foreground">Caption text</p>

See Text and font and Prose.

Variants and sizes

Components expose styling through data-* attributes. Omitting the attribute renders the default variant:

<button class="ui-button" data-variant="primary" data-size="sm">Save</button>

Dark mode

:root declares color-scheme: light dark. Role tokens use light-dark() to resolve values automatically based on system preference or a .dark class. See Dark mode.