Documentation

How to work with this design system, and how to hand it off.

working with the system
Change a component by name or ID

CID-057: make the corners rounder. Only that component changes; every page using it follows, and pages that do not use it must render pixel-identically.

Change a token

--primary: a warmer shade. Every component built from the token follows.

Change something on one page only

If a component or token is shared, your agent asks first: a new component (or token) just for that page, or update it everywhere.

Add a component

Describe it and where it goes. It gets the next free ID and appears here with a preview.

Undo

Say "undo that": only the files of that edit are restored, byte for byte.

handoff
Tokens for developers

npx coherent export tokens --format dtcg (also: css, tailwind)

For AI agents

npx coherent mcp --profile agent (inventory, IDs, governed edits)

Component source

Every component lives in components/ with its ID in a comment above it.

Coherent Design MethodGitHubDesign system read from this app's code