Project design system

Three sources

• Workspace extracted — read-only tokens found in Tailwind, CSS variables, or tokens.json; the repo stays the source of truth.
• Catalog — a preloaded system selected for a greenfield project.
• Iterel Base — the default when no explicit system is chosen.

The design pack

Iterel turns the normalized tokens plus its hierarchy, spacing, state, and component guidance into a design pack. Design-touching runs receive that pack so Claude Code, Codex, and other engines work inside the project's visual language.

Codebase continuity

For a greenfield project, Iterel can write the selected system into the bound workspace as deterministic CSS tokens without overwriting an existing file. Scaffolded token edits write back to that file; repo token edits re-sync into Iterel. Repository systems remain repo-owned and can be re-extracted on demand.

The canvas detects off-system colors and offers a conform action. Project Map component scans add real component file paths and variants to the design pack, and Design components can bind to those code implementations. Figma frame import remains a separate project-bound Design + tool; it is not design-system import.