Colors

Color in Zazz is role-first. Semantic roles adapt across light/dark themes; numeric scales serve as escape hatches.

Zazz structures color around roles (primary, muted-foreground, card) rather than static color values. Roles resolve through light-dark(), making them theme-ready by default.

<div class="bg-card text-card-foreground border border-border p-md rounded-lg">
  <p class="text-muted-foreground">Role classes carry their own light/dark values.</p>
</div>

Every role ships text-{role}, bg-{role}, and border-{role} utilities.

Role reference

Surface and text pairs

Each surface pairs with a high-contrast foreground:

Surface	Foreground	Use
`background`	`foreground`	Page background
`card`	`card-foreground`	Cards and raised containers
`input`	`input-foreground`	Form input controls
`muted`	`muted-foreground`	Dimmed surfaces and secondary copy
`faded`	`faded-foreground`	Faded surfaces and tertiary copy
`border`	`border-foreground`	Dividers and borders

The popover role (--popover, --popover-foreground) is consumed directly by popover and dialog components without separate bg- utilities.

Brand roles

primary, primary-foreground
secondary, secondary-foreground
tertiary, tertiary-foreground

Status roles

info, info-foreground
success, success-foreground
warning, warning-foreground
destructive, destructive-foreground

Numeric scales and overlays

Use numeric scales when you need a fixed color that does not switch with the theme:

Scales: --primary-50 to --primary-950 (along with secondary, tertiary, neutral), --white, and --black. These exist as tokens only, without generated utility classes.
Overlays: --shade-* (darken, derived from neutral-950) and --tint-* (lighten, derived from white). These include bg-shade-* and bg-tint-* utility classes for modal backdrops and image scrims.
Static colors: text-white, text-black, bg-white, bg-black, bg-transparent.

OKLCH color space

Zazz defines colors in oklch(). Relative colors (oklch(from ...)) and color-mix() generate hover tints and translucent overlays with perceptual uniformity.

Element opacity vs color opacity

Element opacity (opacity-*): Sets CSS opacity on the element and all descendants.
Color opacity (bg-opacity-*, text-opacity-*, border-opacity-*): Sets --_background-alpha (or text/border alpha) without fading child elements.

<!-- surface is translucent, text remains 100% opaque -->
<div class="bg-primary bg-opacity-25 text-foreground">...</div>

Changing brand colors

Update the --primary token on :root:

:root {
  --primary: oklch(0.6 0.2 145);
}

See Theme variables and Adding custom styles.

Colors

On this page