In a typical fileDrawn, and usually the frame everything else is judged against.
What we doTaken from the file as the source of truth for spacing, type and colour tokens.
In a typical fileUsually drawn, sometimes only as a colour swap in a comment.
What we doImplemented, and suppressed on touch devices: a sticky hover state on a phone reads as a bug.
Missing
In a typical fileAlmost never drawn. Frequently removed later because it “looks like an outline”.
What we doAlways visible, always meeting contrast against both the component and the page behind it. This is the one state we will not remove on request without saying why.
Missing
In a typical fileRarely drawn. Assumed to be “the hover state, but more”.
What we doDerived from the hover treatment along the same axis, so the component feels like one object rather than three.
Missing
In a typical fileOccasionally drawn, usually as reduced opacity.
What we doOpacity alone fails contrast. We use a defined disabled token, and we ask what the user is meant to do instead: a disabled control with no explanation is a dead end.
Missing
In a typical fileNot in the file. Discovered during integration, decided in an afternoon.
What we doSpecified up front: does the control hold its width, does the label persist, is the wait announced to a screen reader.
Missing
In a typical fileSometimes a red border in one frame, without the message.
What we doMessage text, its position, and whether the field keeps or clears its value, the last of which is the difference between a small correction and a retyped form.
Missing
In a typical fileDesigned with realistic content, so the empty case never appears.
What we doSpecified for every list, table and search result, because the empty state is the first thing a new user sees and the last thing anyone designs.
Every state above, rendered on one page, at the breakpoints the design defines. It is faster to review than a staging link, and it is the artefact that ends the “that is not what I drew” conversation. If a state is wrong, it is wrong in one visible place rather than three screens deep inside a flow.
