Overview

The editor is a three-pane workspace. Left rail navigates the token tree, center renders the live preview, right rail runs the validator continuously. Every edit is auto-saved every 5 seconds; every commit is versioned.

The token tree

Every section under Editor reference — Colors, Typography, Spacing & layout, Shadows, Components — maps to a node in the left rail. Pick a node, edit values in the form, see the preview update.

You can expand a node to edit the underlying scale (e.g. spacing has 6 stops; you can rename, reorder, or insert new ones). The form fields validate on blur — invalid CSS values revert to the previous valid input.

The preview

The center pane renders a sample UI styled with your current token values. It includes:

• A button row (primary / secondary / ghost) so you see the primary color in context.
• A card with a heading + body so you see the type ramp.
• A small palette strip showing the full color set.
• Spacing markers visible when you click the Inspect toggle.

Resize the preview pane to see how your tokens hold up at different widths. The mobile viewport (375 px) is one click away in the toolbar.

The validator

The right rail runs a continuous lint over the current token tree. It reports:

• WCAG contrast failures (AA + AAA, body + large text).
• Empty required tokens (any role missing from light or dark themes).
• Round-trip integrity issues (a CSS value that wouldn't survive export to Tailwind / DTCG).
• Tone drift between light and dark (e.g. dark theme has 4 muted tokens but light only has 2).

Each issue links back to the responsible field so you can fix without hunting.

Save, version, export

Save persists the current state to your workspace as a draft. Publish flips it to a versioned URL (immutable). Export writes the bundle (DESIGN.md / CSS / Tailwind / DTCG) for download or commits the bundle directly to a connected repo.