The Lab
The systems we build are meant to be touched. Change a production token and watch this page follow. Hand the real constraint engine something broken and read its refusal. Nothing here is a mockup; every verdict is computed when you ask.
Viewing the Lab without a lens. Pick one if you'd like the framing to match your seat.
The Token Lab
Change a production token and watch every consumer follow, with the diff as the receipt.
The Constraint Engine
Send a real artifact to the live validator and read back the rule it cites.
Reads the Room
One status card that reads its audience: same facts, rendered for whoever is looking.
The Antifragile Loop
Throw an edge case at a component and watch the fix cover the whole class, diff included.
The Token Lab
One semantic token, bound to every accent on this page. Change it and watch production follow.
01. Tension
A designer updates a color. An engineer opens a PR to change a hex code. The same value lives in forty-seven places, and three of them never get the memo. Drift starts here, in the gap between intent and what shipped.
02. What you're looking at
A single token, --color-accent, feeding buttons, borders, hover states, and the X-Ray grid. The swatch panel stands in for your design tool. The page is real production. The change record below is the actual diff, written the moment you act.
03. Proof
Change the color. Every consumer updates in the same frame, with a receipt. No redeploy, no handoff meeting. Nothing on this page got access to the token by default; every surface earned it. At HeyHi that principle has a name: Earn the Room.
Infrastructure that listens.
This page is bound to --color-accent. When the token changes, every consumer follows. The work of keeping them aligned belongs to the system, not to memory.
The Constraint Engine
Bring the engine something broken and read its refusal, rule cited. Then fix the artifact and earn the pass.
01. Tension
Generated output is fast, confident, and sometimes confidently wrong. An agent will hand you a neon button with no focus state and call it done. Reviewing that by eye works until the third pull request, and then it quietly stops happening.
02. What you're looking at
A live endpoint running the same deterministic validator that backs HeyHi's design system work: nine rules covering tokens, contrast, touch targets, labels, focus states, variants, component scope, copy constraints, and output format. You send an artifact. It answers with a verdict, the rules it cited, and a confidence score. No model in the loop.
03. Proof
Submit the seeded example and read the refusal. Then fix it: pick a legal variant, swap the raw values for real tokens, give it a focus state, and submit again. Evaluation before deployment is one of the three invariants every HeyHi build carries, and here it is running where you can poke it.
The seeded draft trips both checks in Rule 8: the standalone word "AI" and the em dash budget. The rest of the voice rulebook lives in a separate process layer, on purpose. Paste your own draft to see what the engine catches.
The engine is waiting. Validate the seeded example, or break it your own way first.
Reads the Room
One status card, three readers. Toggle the lens and watch it re-read its audience without changing its facts.
01. Tension
The same dashboard bores the executive, starves the engineer, and patronizes the designer. One rendering for every reader means nobody is actually being read to, and the people the data was for quietly stop looking at it.
02. What you're looking at
A status card fed by your visit: the tokens you changed and the verdicts you pulled in the experiments above. No demo dataset. The persona control re-renders the same facts for a different reader: what is shown, what it is called, and what gets the large type.
03. Proof
Change a token above, run the engine, then come back and toggle the lens. The numbers move because you moved them, and the card reads differently because someone different is reading it. Contextual adaptation built into the interface, not bolted on as a second build.
The lens control at the top of the page drives this card. Pick a different seat up there and the card re-renders down here.
No activity yet, so the counters read zero. Change a token or run the engine first; this card reads your visit, not a script.
- accent token
- #FF3B30
- engine verdicts
- 0
- last verdict
- none yet
Counting only what you have actually done on this page.
The Antifragile Loop
Throw an edge case at a component and walk it through the loop that turns the break into a rule. The nastier case you throw afterward never breaks it at all.
01. Tension
Most systems meet their edge cases in production, file a ticket, and meet the same case again next quarter. The bug gets fixed, and the system stays exactly as fragile as the day it shipped.
02. What you're looking at
A replay of the Design System Care loop, compressed to seconds and advanced by you. In an engagement the edge case arrives from real usage; here you throw it yourself. The four steps are the real mechanism: captured into a feedback channel, encoded as a token rule, re-rendered into a stronger system.
03. Proof
Run the loop, then throw the nastier case. It never breaks the card, because the fix landed as a rule covering the class, not a patch covering the instance. Every production edge case becomes the system's next version: Design System Care makes that promise on the home page, and this loop is the mechanism behind it.
- 1Edge case entersA production-shaped anomaly hits the component.
- 2Into the feedback channelCaptured as a logged case, not a ticket that dies.
- 3Becomes a rule updateThe fix lands as tokens, shown as a diff.
- 4StrengthenedThe case passes, and so does its whole class.
Owner: design systems · Due: Friday
Everything above runs on the same invariants we build into client systems: earn the room, evaluation before deployment, build it in. If you want this kind of infrastructure under your team's work, let's talk about what fits.