Design Review Terms a Designer and Developer Share

A comment that says "the spacing looks off here" travels badly. The designer means the gap between two cards. The developer changes the padding inside one card. Now the fix is wrong and there is a second round. Half of the friction in a design review comes not from disagreement but from words that mean one thing to the person writing and another to the person reading.

Below are the terms worth agreeing on before you start. Each one has a one-line definition and a note on when the ambiguity actually bites.

Spacing terms

Spacing is where reviews go wrong most often, because three different concepts all read as "space" to the eye.

Margin is the space outside an element, between it and its neighbors. When you say "give this more room," a developer will usually reach for margin first. Say which side: top, bottom, left, right.

Padding is the space inside an element, between its edge and its content. "The button text is cramped" is a padding note. "The buttons are too close together" is a margin note. These get swapped constantly, and the fix for one does nothing for the other.

Gap is the space between items in a list, grid, or row. If four cards sit too tight, that is the gap, not the padding of any single card. Naming it gap tells the developer to change one value that affects the whole set.

Alignment is whether edges or centers of elements line up. "This is misaligned" needs a reference: aligned to what? The label above it, the column to its left, the container edge.

Hierarchy terms

Hierarchy is how a layout tells the eye what matters first. When a reviewer says something "gets lost," they are almost always describing a hierarchy problem, and the fix depends on which lever you name.

Type scale is the set of font sizes used across the screen, and the ratio between them. "Make the heading bigger" is vague. "This heading should be one step up in the type scale from the body" is a change someone can make without guessing.

Weight is how bold a font is (regular, medium, semibold, bold). Weight and size are separate knobs. A label can be small and heavy, or large and light. Say which one you mean.

Contrast is the difference in lightness between text and its background. Low contrast is both a hierarchy issue and an accessibility one, which is why it also belongs in an accessibility review. If gray text on a gray card is hard to read, call it a contrast note so the developer checks the ratio, not just the color name.

Visual weight is how much an element pulls attention overall, combining size, color, contrast, and position. "The secondary button competes with the primary one" is a visual-weight note. The fix might be color, size, or spacing, and the developer will pick once you have framed the problem correctly.

State terms

A screenshot shows one moment. Most interface bugs live in the states you did not capture, so the words for state need to be exact.

Default is the resting state, nothing hovered, nothing clicked, nothing entered.

Hover is what happens when a pointer is over an element. It does not exist on touch screens, so a hover-only cue is a real bug worth flagging.

Focus is the state when an element is selected by keyboard, usually shown with an outline or ring. Missing focus styles break keyboard navigation. This is separate from hover and often forgotten.

Active (or pressed) is the state during the click itself.

Disabled means the control is present but cannot be used, usually dimmed. This is different from read-only, where the value shows but cannot be edited, and different from hidden, where the element is gone. A comment that says "grey this out" could mean any of the three.

Empty state is what a list, table, or screen shows when there is no data yet. Loading state is what shows while data is on its way. Error state is what shows when something fails. If a review only covers the happy path, say so, because the developer needs to know the other three are still open questions.

Making the words stick to the pixels

Agreeing on vocabulary only helps if the comment stays attached to the exact spot it describes. Words like "top right" drift as soon as the layout changes on a different screen. This is why a still image with the comment on it beats a written location every time, and why a cropped still beats an annotated live page that keeps moving.

With Cobalt Capture you open a browser tab, capture the screen, drop a numbered pin on the exact element, and type or dictate the note using the right term. No install, no extension, no signup. Publish and you get a public link plus a PDF, a Word doc, and clean markdown, so the same review reads correctly whether a designer, a developer, or a coding agent picks it up.

Pick one screen, capture it, and write your next three comments using padding, focus, and empty state by name. The person fixing it will thank you by getting it right the first time. Start a review and try it on the screen in front of you.

Send us feedback

Stuck, or want to do something it won't let you? Tell us what you're trying to do and we'll reply by email as soon as we can. This isn't a live chat.

Powered by AcornReply