Explore the current in-repo build of zdtp.

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 --zfb-* tokens that the panel controls. The English and Japanese prose pages are useful for seeing those choices across longer content.

STATIC TOKEN REFERENCE

Read the defaults on a plain page

The token dashboard lists the same manifest as a static Preact page, with light and dark inventories and a compact embedded example. It shows declared defaults and references, independently of saved panel edits.

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 play 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.

KEEP EXPLORING

Documentation and source

Read the zdtp documentation for installation and API guidance, or browse the GitHub repository behind this demo.