Layout & spacing indicators

Last updated

March 23, 2026

Uiprobe visualizes layout and spacing findings directly on the canvas using lightweight visual indicators.

These indicators show where a layout differs from the design, by how much, and in which direction an element should change. They are designed to be readable without requiring knowledge of CSS or implementation details.

Layout and spacing indicators are used specifically for findings related to spacing and size.

Spacing findings

Spacing findings occur when the distance between two elements differs from the design.

How spacing findings are shown

Spacing differences are visualized using:

a distance line drawn between the relevant edges of two elements
a distance label showing the numeric difference (for example −10 or +8)
subtle reference outlines around the affected elements

The line indicates where the spacing is measured. The label indicates how much the spacing differs from the design.

How to read spacing values

−10 means the gap is 10 pixels too large
+8 means the gap is 8 pixels too small

When the same spacing difference appears repeatedly across similar elements — such as navigation items — Uiprobe may group these visually to indicate a recurring spacing finding.

Size findings

Size findings occur when an element's own dimensions differ from the design.

This includes:

incorrect width or height
incorrect padding
incorrect internal spacing

How size findings are shown

Size differences are visualized using:

an outline around the live element
a design reference edge or reference box showing where the element should end
a distance line connecting the live edge to the design reference
a distance label showing the required adjustment

One-sided size differences

If only one edge differs from the design, the distance line and label are shown on that edge only.

This typically indicates that padding or size needs to be adjusted on one side.

Symmetric size differences

If both sides differ equally, a single centered distance label is shown together with a design reference box.

This indicates that the element needs to grow or shrink symmetrically.

How to read size values

−10 means the edge needs to move inward by 10 pixels
+20 means the element needs to grow by 20 pixels in total

Principles behind layout indicators

Layout and spacing indicators follow a small set of consistent principles:

distance lines show relationships, not scale
distance labels show the true numeric difference
very small differences are rendered with a minimum visual size to remain readable
color indicates direction, not correctness
all measurements are based on geometry, not CSS properties

Once you understand how one layout indicator works, all other spacing and size indicators follow the same logic.