interfacing

Thirty-six labs. Thirty-one deviations. Seventeen dark patterns. One argument. You don’t understand a guideline until you’ve broken it on purpose and watched what fell out.

I. What this is

An interface phenomena laboratory — which is a long way of saying you get to break the rules and see the bruise. Not a textbook, not a research report, not the thing that will get you certified. Interfacing will not teach you the rules. It lets you violate them, in real time, with a knob, and it measures what happens to you while you do.

Interface guidelines aren’t rules. They’re compressed research. Someone spent years measuring what happens when targets get too small, when options multiply, when color carries all the meaning. The guideline is the compression. This app is the decompression.

II. The labs

Pick one from the sidebar. Each lab is one principle, knobs to break it, a reading to take, and a candid note about how this app uses it against you. Lab 01 Fitts has a second surface: flip on ambient mode and a live cone follows your cursor over the whole page, sized to the Fitts ID for the next click against whichever element is nearest. Same law, different geometry.

An earlier attempt at a fourth pack tried to hold three physics sketches from Gemini’s Forma — Galileo’s drop, the Lorenz and Rössler attractors, a double pendulum — plus an ambient Fitts cone from Gooey. The physics went; the cone stayed. Real physics isn’t an interface principle, and the labs grid isn’t the place for it. If the physics come back it will be as their own app. The cone you see in Lab 01 is what survived, and it lives where it belongs.

III. The deviations wing

The other half of the book — thirty-one principled rule-breaks the renato.design suite commits on purpose, with the rule, the reason for the rule, the reason we broke it, and the cases where you should not copy us. Open the wing.

IV. The critique wing

Drop a screenshot and the browser reads it back through five pixel-level lenses — contrast ratios, color independence under simulated CVD, information density, element count, banner-shaped blind spots. Your image never leaves the tab. The native app runs twenty-four lenses including a local LLM. Open the wing.

V. Reading room

The Concordance holds the citations. The Help holds the knobs. The About page holds the argument.

VI. Native vs. web

The native macOS app has FidgetUI, the GhostPerformer walkthrough, Nerd Mode, the full Concordance, nineteen additional critique lenses (including fourteen backed by a local LLM), and a Konami code that does something we won’t spoil. This page is its reading room — enough to argue with, not enough to replace it.