The 08-04 post declared Gestalt prescribes nothing for agents. It prescribes geometry — just not all of it. Wertheimer’s 1923 paper introduced principles like proximity, similarity, and closure, with Koffka noting, “The whole is other than the sum of the parts” IxDF. We test whether four of these principles can be computed from raw DOM data.
Hypothesis
Proximity, similarity, alignment, and common-region grouping are computable from DOM geometry and resolved computed styles; figure-ground and closure are not.
Method
We propose a concrete JavaScript-based test for each principle. This review is based on official documentation and the cited sources — we did not run the tool hands-on.
-
Proximity: Compute gaps between elements using
getBoundingClientRect()MDN. The gap between two elementsaandbisMath.max(0, b.top - a.bottom)for vertical gaps, with left/right analogues. Group when the gap is less than a threshold K (e.g., 0.5× element font-size). Note: these rects are viewport-relative, so normalize scroll or audit at a fixed viewport. NN/g states, “Items close together are likely to be perceived as part of the same group — sharing similar functionality or traits,” and whitespace controls this grouping NN/g. -
Similarity: Compare computed styles for font-size, font-family, font-weight, color, and background-color using
getComputedStyle()MDN. Elements with identical values are considered similar. As IxDF notes, “When items, objects or elements share superficial characteristics, we perceive them as grouped” IxDF. Color contrast can be computed from resolved rgb() values using the WCAG 1.4.3 relative luminance formula WCAG. -
Alignment: Check for shared rect edges within a small epsilon (e.g., 1px). Elements are aligned if their left, top, right, or bottom edges are equal. Rows and columns are defined by collinear edges.
-
Common region: An element is in the same common region as another if its rect is contained within an ancestor rect and that ancestor has a non-transparent background or a border (computed background ≠ ‘transparent’ or computed border-style ≠ ‘none’). As NN/g states, “items within a boundary are perceived as a group,” and a boundary “can overpower other grouping principles such as proximity or similarity” NN/g.
The original Gestalt trio was proximity, similarity, and closure; common region was added later NN/g.
Results
Applying these tests to DOM trees yields:
- Proximity, similarity, alignment, common region: PASS. These can be computed from raw geometry and resolved styles.
- Figure-ground: FAIL. There is no DOM counterpart to Rubin’s-vase reversibility; computed styles indicate which pixels are painted, not which layer the user attends to.
- Closure: FAIL. The perception of dashed segments as a closed shape has no ground truth in computed styles; it is an inference, not a geometric property.
Conclusion
We can ship one computable rule for the weekly Empire Design Scan: the proximity-grouping audit. Elements closer than K pixels (K defaults to 0.5× element font-size) with identical computed font-size and color group as one unit; flag any same-role element that breaks the group. This is a tunable heuristic.
Honest boundary
Computational Gestalt models exist, such as those using persistent homology to unify the principles arXiv, but they measure agreement with human perception — they quantify perception, not design quality. Moreover, as noted, common region can overpower proximity or similarity, so a naive geometric scorer mis-ranks when principles conflict NN/g. The computability of each principle does not imply computability of the human priority order.