The Design Moves Into the Code

The design system moved off the canvas and into the app's real code — then eight AI reviewers tried to break it.

Design systems die in the gap between the mockup and the code. Closing that gap — same numbers, same names, same rules in both — is what makes the next feature default to looking right. One honest gap remains for a design decision: the status tags are tuned for the dark theme, and the admin's light mode needs its own version of them.

The goalYesterday's design system existed on paper (well, on the design canvas). Today it had to become real — every value in the app's actual code pulled into line with it, with zero new design decisions along the way.

• One rulebook, wired in. The app's "control panel" file now carries the whole system: the type scale, the one 4px corner radius, the three button/input heights (32/40/48), the form breathing room (8px label gap, 24px between fields), and the new status-tag colors — so future changes are one-knob edits, not scavenger hunts.
• The font switch went live. Oswald is fully gone from the app (and from the embeddable gallery widget); headlines now use the heavy Archivo Black. Two dead font packages deleted — guests literally download less.
• Forms got their rhythm and a new one-way-to-do-it building block (a "Field" — label + input, correctly spaced, every time).
• A robot review crew audited the whole change — eight AI reviewers, each hunting from a different angle. They caught real problems: the round theme-toggle button getting squashed into a rectangle by a styling rule, "retry" links turning gray and oversized inside red error messages, and a three-button bar that couldn't fit on a phone screen once the wider font landed. All fixed, with before/after screenshots as proof.
• Checked against the design canvas, not memory — one catch: the little tab buttons were about to get the shouty ALL-CAPS button treatment, but the design canvas shows tabs as quiet, lowercase things. The canvas won, as it should.