# Zudo Token Panel

> 

## Docs

- [Reference](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference): Per-section reference for the @takazudo/zudo-design-token-panel portable contract.
- [v0.1.0](https://takazudomodular.com/pj/zudo-design-token-panel/docs/changelog/v0.1.0): Released 2026-04-27. Initial OSS port of the design-token panel + bin
- [Welcome](https://takazudomodular.com/pj/zudo-design-token-panel/docs/getting-started): Welcome to Zudo Token Panel
- [Custom color cluster](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes/custom-color-cluster): Wire a non-default palette plus a semantic token table into the panel's Color tab.
- [configurePanel](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/configure-panel): configure-once init, the PanelConfig shape, and the lifecycle helpers (show / hide / toggle / reapply).
- [Architecture](https://takazudomodular.com/pj/zudo-design-token-panel/docs/architecture): How the design-token panel separates panel UI, host-adapter, and apply-pipeline so it stays portable across hosts.
- [/CLAUDE.md](https://takazudomodular.com/pj/zudo-design-token-panel/docs/claude-md/root): CLAUDE.md at /CLAUDE.md
- [Install](https://takazudomodular.com/pj/zudo-design-token-panel/docs/getting-started/install): Install @takazudo/zudo-design-token-panel into any pnpm, npm, yarn, or bun project.
- [Custom token manifest](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes/custom-token-manifest): Add or remove tabs, coin custom group ids, and control group ordering in the token manifest.
- [Token manifest](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/token-manifest): TokenManifest, TokenDef, group ordering, and the section-title overrides that drive the spacing / typography / size / color tabs.
- [Quickstart](https://takazudomodular.com/pj/zudo-design-token-panel/docs/getting-started/quickstart): Configure the panel, declare a tiny cssVar manifest, and toggle it from the devtools console.
- [Secondary cluster: configure or disable](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes/secondary-cluster-or-disable): Three-state semantics: undefined (hidden), null (hard opt-out), or a ColorClusterConfig (host-supplied).
- [Color cluster](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/color-cluster): ColorClusterConfig, palette + base roles + semantic table, optional secondary cluster, and host-supplied scheme presets.
- [Three Frameworks](https://takazudomodular.com/pj/zudo-design-token-panel/docs/getting-started/three-frameworks): Side-by-side wiring for Astro, Vite + React, and Next.js — what changes, what stays the same.
- [Apply pipeline setup](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes/apply-pipeline-setup): Wire the design-token-panel-server bin into a non-Astro host's dev script — CORS, --write-root sandboxing, and the routing JSON.
- [Apply pipeline](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/apply-pipeline): applyEndpoint, applyRouting, the request/response envelopes, atomicity guarantees, and validation rules for the Apply button POST.
- [Lazy color presets](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes/lazy-color-presets): Defer a large preset library out of the SSR config blob with setPanelColorPresets.
- [Panel CSS tokens](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/panel-css-tokens): --tokentweak-* private variables, the var(--host, fallback) indirection ladder, the modal data-attribute selector, and the paired stylesheet/host-adapter import obligations.
- [design-token-panel-server CLI](https://takazudomodular.com/pj/zudo-design-token-panel/docs/reference/cli-design-token-panel-server): Reference for the design-token-panel-server bin: every flag, the HTTP endpoint contract, and complete invocation examples.
- [Recipes](https://takazudomodular.com/pj/zudo-design-token-panel/docs/recipes): Practical how-tos for wiring `@takazudo/zudo-design-token-panel` into a host app.
- [Examples](https://takazudomodular.com/pj/zudo-design-token-panel/docs/getting-started/examples): Reference integrations for  across three popular
- [Changelog](https://takazudomodular.com/pj/zudo-design-token-panel/docs/changelog): Notable changes to . Format loosely follows
- [Claude](https://takazudomodular.com/pj/zudo-design-token-panel/docs/claude): Claude Code configuration reference.
- [zudo-doc-design-system](https://takazudomodular.com/pj/zudo-design-token-panel/docs/claude-skills/zudo-doc-design-system): Project-specific CSS and component rules for zudo-doc. Must be consulted before writing or editing CSS, Tailwind classes, color tokens, or component markup in this project. Covers: component-first str...
- [zudo-doc-translate](https://takazudomodular.com/pj/zudo-design-token-panel/docs/claude-skills/zudo-doc-translate): Translate zudo-doc documentation between English and Japanese with project-specific conventions.
- [zudo-doc-version-bump](https://takazudomodular.com/pj/zudo-design-token-panel/docs/claude-skills/zudo-doc-version-bump): Bump package version, generate changelog docs, commit, tag, and create GitHub release. Use when: (1) User says 'version bump', 'bump version', 'release', or 'zudo-doc-version-bump', (2) User wants to ...