Live token tweaking, in zfb (zudo-front-builder)

Every visible element on this page is driven by a --zfbexample-* CSS custom property. Open the panel from the browser console and drag any slider — the change applies before the next paint.

Console API: window.zfbExample.toggleDesignPanel(). Storage prefix: zfb-example-tokens.

View Prose Demo →

Cards (spacing + radius + surface)

Card A. Padding driven by --zfbexample-spacing-md, corners by --zfbexample-radius, background by --zfbexample-color-surface.
Card B. Stack gap driven by --zfbexample-spacing-lg; outline by --zfbexample-color-muted.

Buttons (accent / primary)

Palette swatches

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Each swatch reads --zfbexample-palette-{n}. The cluster's paletteCssVarTemplate is the only thing that decides this name — change it in config/default-cluster.ts and the apply pipeline writes a different variable on the next palette tweak.