Internal tooling
Six measured decisions, not forty guesses.
The reference interface is measured in a real browser, resolved against contrast floors, then compiled once. Every value keeps its sample count — nothing here was eyeballed.
Tokens carry their sample counts — nothing here was guessed.
- 40deterministic rules run on the rendered page
- 7:1body text contrast enforced before compile
- 2rounds to convergence in the default loop
Four passes, each one testable.
Nothing is approved by vibes. Every pass ends in a value or a rule you can point at.
- 01
Measure
One headless pass records computed colour, type, spacing, radius, shadow and motion, weighted by how much of the page each value actually covers.
- 02
Resolve
Roles are assigned by area share, luminance and chroma, then every text pair is pushed to its floor. Corrections are reported, never silent.
- 03
Compile
A single page is generated from the resolved system: one h1, one action per screen, a real table instead of three identical cards.
- 04
Audit
The rendered output is measured again, at two widths, and scored. What you approve is the measurement, not the intent.
Resolved values
| Token | Resolved |
|---|---|
| Accent | #22c55e |
| Body | 16px / 1.55 |
| Radius | 8px |
| Grid | 4px |
Measured at 1440px. Hover states, focus rings and the mobile breakpoint are generated from the same variables, so one edit propagates.
If the next page does not cost less than the last one, it was not a system.
Build note
Point it at your own interface.
One command reads the reference, writes tokens.json, compiles the page and returns a scored audit with the exact selectors that failed.