Storage prefix: zfb-tailwind-example-tokens

Live token tweaking, in zfb + Tailwind v4

Every visible element on this page is driven by a --zfbtw-* CSS custom property, consumed via Tailwind v4 utility classes. Open the panel from the button above and drag any slider — the change applies before the next paint.

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

Cards (spacing + radius + surface)

Card A. Padding driven by px-hsp-md py-vsp-md (→ --zfbtw-hsp-md / --zfbtw-vsp-md), corners by rounded-md (→ --zfbtw-radius), background by bg-surface.
Card B. Stack gap driven by gap-vsp-lg; outline by border-muted.

Buttons (accent / primary)

Easing demo

Click the card below to animate it. The motion uses transition-timing-function: var(--zfbtw-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 --zfbtw-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.

Font scale tokens (raw tier)

Raw --zfbtw-scale-* values exposed astext-scale-* utilities for slider debugging only. Open the Font tab and drag any scale slider — each row below tracks one scale token directly. Production code should NOT usetext-scale-*; use semantic tokens (text-page-title, text-body, etc.) instead — see the Prose page, where the same scale sliders flow through Tier 2 into rendered prose.

2xl — text-scale-2xl → --zfbtw-scale-2xl

xl — text-scale-xl → --zfbtw-scale-xl

lg — text-scale-lg → --zfbtw-scale-lg

md — text-scale-md → --zfbtw-scale-md

base — text-scale-base → --zfbtw-scale-base

sm — text-scale-sm → --zfbtw-scale-sm

xs — text-scale-xs → --zfbtw-scale-xs