khe-design-tokens
Design tokens
You own the contract from finding it to a UI where every value resolves to a token. An agent that invents a color beside an existing token has failed the job.
A construction skill. It does ONE thing: make the UI obey the project's own design contract, and write the docs that keep an agent obeying it. It does not design a palette, a contrast pair or a type scale, review a screen for craft, or finish a screen whose tokens are right and which still feels flat (all three are khe-ui).
The one idea
Every value in the UI resolves to a name in the project's own contract, on the role that name was given, and anything the contract lacks is reported, never guessed.
Five ways it fails:
- Guessed. A raw hex, a 6px radius, Inter: a value typed because it looked close. A guess looks exactly like a decision.
- Invented. A name the contract does not hold:
var(--radius-xl),variant="outline", a documented variant no code has. - Misbound. The token resolves and it is the wrong one: the accent on a card because its hex matched the mockup. No script catches this.
- Forked. Two sources of truth: a
.designand a DESIGN.md with no stated order, a:rootthat drifted from the contract, a second styling system, a hand-built twin of a catalogued component. - Silent. A contract edited without a yes, a literal left with no reason, a system invented where there was no contract, or the contract's silence taken as permission to default.
The fix: find the one contract, read its intent before its tokens, map each value to a token by the role it plays, land the tokens in the system the project already uses, and report every gap, drift and leftover literal in writing.