Storage prefix: zfb-example-tokens

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

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

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

Cards (spacing + radius + surface)

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

Buttons (accent / primary)

Easing demo

Click the card below to animate it. The motion uses transition-timing-function: var(--zfb-easing-tab-open). Open the panel, switch to the Easing tab, and change the semantic "Tab Open" role — the perceived animation speed changes live.

Palette swatches

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

Each swatch reads --zfb-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.