Design Engine

One place for the design
When the direction was accepted, the design existed only as screens, and a screen shows a button in one state at one size. The values I had to protect were spread over dozens of frames, and the next round of changes was certain to come, so any correction would have had to be made in every frame by hand. I wanted one place where a value is decided once, so I built the controls as components and turned the screens into instances of them.

Every state decided
The screens showed every control at rest and nothing else, and the design knowledge on interaction states says a control is not designed until hover, pressed, focus and disabled are decided too. Leaving that to the code would have meant deciding it without review. So I built each control with every state and laid them side by side, and that view is what showed a focus ring in the same hue as the primary button, invisible until it sat next to the other states.

Both modes at once
Two modes double the number of color pairs, and a pair that passes in light mode can fail in dark. Checking that on screens would have meant switching every frame twice. By binding every component to the variables of both modes, one sheet shows the whole set in either mode, so I could measure contrast in one pass and know that no light value had leaked into dark.

A contract for the code
Code built from screenshots drifts, because a screenshot does not say which token or which pixel value it shows. I wrote the specification from the sheet, control by control, so the stylesheet had one document to follow and the tests had the same document to check against. It also means the next product starts from the same sets instead of from scratch.