Primitives editor

Route: Library → Properties → Tokens → Primitives

Raw values — color hexes, radii, spacing steps. Referenced by semantic tokens.

This is the bottom tier of the three-tier token model. Edit a value here and every semantic and component binding that resolves through it updates instantly.

Layout

The page is a list of group sections. Each section header shows the group name and a token count; tokens render as rows with five columns:

Editing

• Click any cell (ID, Name, or Value) to edit inline.
• Press Enter to commit. Press Escape to cancel. Blur also commits.
• The swatch and every downstream preview update on commit.
• Changes are debounce-saved to localStorage after ~500 ms — no Save button.

Adding

Click + Add in any group header to create a new primitive in that group with an auto-generated ID (e.g. color-new-1). Rename and re-value it immediately.

Deleting

Click the × in any row. The token disappears. Semantic tokens that referenced it now resolve to an empty value — see them in the Semantic editor flagged as broken until you re-bind them.

Asking AI for a palette

The Ask AI button in the page header opens a modal that takes a brand prompt ("Calm marine palette inspired by a coastal town in Maine") and returns a TokenPatch — a structured set of adds, updates, and removes with rationale. Review the diff and click Apply to commit; the change lands in your undo stack so you can roll back.

When no API key is set, the modal runs in stub mode — it returns a deterministic mock so you can test the diff/apply flow. See Ask AI: generate tokens for setup and prompts that work.

Shortcuts

What changes when you edit a value

• Every semantic token whose references resolves to this primitive updates.
• Every component binding downstream of those semantics updates.
• The live preview iframes in the Components tab restyle (postMessage broadcast).
• The Documentation tab regenerates tokens.css, design-system.md, and design-system.json.

No build step. No refresh.