DEFAULT MANIFEST
A compact tour of every control
The playground manifest is designed for exploration. It exposes the main control kinds and connects them directly to the tokens used by this page.
FULL FIRST-PARTY DEMO
Explore the workspace panel with zudo-wind.
This Wind demo exercises the workspace panel on a ZFB site. Card padding, radius, surface, and ink go through zudo-wind utilities. The same tokens in CSS Modules live at the CSS Modules demo.
TRY THE PANEL
Change a token and watch the page respond
Press Open token panel, then experiment with the Color and Palette tabs or adjust the typography roles. Every component here uses the --demo-* tokens that the panel controls. The English and Japanese prose pages are useful for seeing those choices across longer content. The card uses p-card, rounded-card, bg-surface, and text-ink.
Numeric padding on this line is fixed decoration.
STATIC TOKEN REFERENCE
Read the defaults on a plain page
The token dashboard lists the same manifest as a static zudo-react page, with light and dark inventories and a compact embedded example. It shows declared defaults and references, independently of saved panel edits.
ZUDO-DOC MANIFEST
A real consumer configuration
Open ?manifest=zudo-doc to run the real, vendored zudo-doc PanelConfig. Use it to inspect a production-scale token model instead of the playground tour.
APPLY IS LOCAL DEV ONLY
Why Apply is disabled here
Apply writes token changes to source files through a local development sidecar. A static host has no sidecar or writable source tree, so this deployed demo disables the action. Clone the repository and run pnpm demo:wind to try the complete write-to-disk workflow. The Apply pipeline setup guide explains how it works.
PALETTE → SEMANTIC ROLES → COMPONENTS
Four groups, one palette
Each row is a group; each column is a stable, zero-based step. The raw palette stays identical in light and dark mode. Components use semantic roles from the Color tab: backgrounds, text and primary colors pick a different ramp step for each mode through light-dark(). State colors are decorative, with labels outside the chips.
Try editing a ramp in the Palette tab, then switch the page theme to see its semantic roles respond. In the Color tab, per-mode var() defaults currently open the picker at black. Opening changes nothing; editing replaces that mode with a concrete color and detaches it from the ramp. Reset restores the configured defaults. Reference-aware picker tracking.
Base
0
1
2
3
4
5
6
Brand
0
1
2
3
4
Accent
0
1
2
3
State
0 · Success
1 · Danger
2 · Warning
3 · Info
KEEP EXPLORING
Documentation and source
Read the zdtp documentation for installation and API guidance, or browse the GitHub repository behind this demo.