Token Reference

All design decisions live in --cdz-* CSS custom properties. Components never hard-code values — they reference these tokens, so re-theming is a single source change. Swatches below reflect the active theme (use the switcher on the Theming page).

Brand scale

brand-100

brand-300

brand-500

brand-700

brand-900

Semantic

primary

success

error

warning

info

Surfaces & text

bg-default

bg-paper

text-primary

text-secondary

text-muted

Spacing

Built on an 8px grid: --cdz-space-1 (4px) through --cdz-space-30 (120px).

Radius

--cdz-radius-sm (4px, buttons) · --cdz-radius-md (8px, cards/inputs) · --cdz-radius-lg (12px) · --cdz-radius-xl (16px) · --cdz-radius-pill.

Typography

--cdz-font-sans (UI), --cdz-font-display (headings), --cdz-font-body (long-form). The type scale runs from --cdz-type-display-size (56px) down to --cdz-type-caption-size (12px).

Elevation

Subtle card shadows (--cdz-shadow-card) through premium elevations (--cdz-shadow-xs … --cdz-shadow-xl) and ambient brand glows (--cdz-glow-primary).