eye-of-the-beholder

Screenshot after every layout change, then describe what you see before reading the CSS. Scan clockwise from top edge, name the nearest element at each edge, check rhythm between repeating elements, and express every measurement as a ratio against a threshold such as 2.5x body-font padding.

Compute relative luminance per channel with the WCAG 2.1 formula, then divide the lighter luminance plus 0.05 by the darker plus 0.05. Body text needs 4.5:1 for AA, large text and UI components need 3:1, and adjacent surfaces need at least a 1.07x luminance ratio.

SVG defaults to overflow hidden, so any path extending outside the viewBox is silently clipped. For stroke-based icons add half the stroke-width to the path bounds, then fix by enlarging the viewBox or shrinking the path rather than using overflow visible.

The element is usually occluded in the z-axis, not mispositioned. Check sibling source order in stack containers, modifier chain order, and material layers like backdrop-filter or glass effects that promote themselves above overlays, then reorder or add a compositing boundary before touching offsets.

Common tells include purple gradients, decorative glow, emoji as icons, cards nested in cards, meaningless status dots, and colored accent ribbons that encode nothing. Credible products group with typography and whitespace, reserve color for meaning on text, and use monospace for data values.

Review is a continuous working method, not a final step. After writing each block of layout CSS or a transition, capture a screenshot or recording, observe it against the inspection questions, compare with intention, fix, and repeat until the rendered result matches the design intent.