Spatial Systems
Grid Anatomy
A layout canvas where every element sits on a grid, and the grid talks back. Toggle overlays for baseline alignment, visual weight, spacing measurement, and rhythmic notation. Drag elements. The grid reveals what free-placement hides.
The Principle
"Whitespace is not emptiness. It is structural." That is this studio's second observation. Grid Anatomy is the proof.
Every professional layout rests on an invisible structure: a grid unit that every measurement resolves to. 4px. 8px. The specific number matters less than the consistency. When every margin, every gap, every inset is a multiple of the same unit, alignment becomes automatic. The eye stops noticing the spacing — which means the spacing is correct.
The moment you use a value that is not a multiple — a 13px gap, a 7px margin — you introduce dissonance. You cannot see it. Your users can feel it. This tool makes the dissonance visible.
Four Overlays
Baseline Grid
Horizontal lines at every grid unit. When elements sit on the grid, the lines pass through them. When elements float between lines, the misalignment is immediately visible. Configurable: 4px, 8px, 12px, or 16px.
Visual Weight
Each element shows its weight score: size × weight × position.
Elements ranked by dominance. The heaviest element should be your focal point.
If a caption outranks your heading, your hierarchy is inverted.
Spacing Measurement
Annotates the vertical gap between every pair of adjacent elements, in pixels. When consecutive gaps form a harmonic ratio (golden section, musical fifth, major third), the tool flags it. Intentional ratios produce rhythm. Random values produce noise.
Rhythm Notation
Gaps expressed as multiples of the grid unit, rendered as musical notation: ♩ (1×), ♪ (2×), ○ (4×). When your spacing reads like a beat — quarter, half, whole — the layout has rhythm. When it reads like random integers, it does not.
What Designers Miss
The gap between a heading and its body text is not the same as the gap between a body paragraph and a caption. But most layouts use the same value for both. This creates equal spacing where unequal spacing is needed — and the result feels flat.
Gestalt's proximity principle: things that are closer together appear related. When a heading is equidistant from the text above it and the text below it, it belongs to neither. When it is closer to the text below, it belongs to the paragraph it introduces. This tool lets you see that relationship in numbers.
Try the presets. Article, card, hero. Each encodes a different spacing strategy. Drag elements to break the rhythm, then restore it. The moment the grid lines pass through every element again, you will feel the difference.
Who Uses This
Front-end developers translating design specs to CSS — verifying that their
gap, margin,
and padding values resolve to grid multiples.
Design system maintainers auditing spacing tokens — checking whether the token scale actually produces harmonic relationships in real layouts, or just looks good in a spreadsheet.
Anyone learning layout who wants to understand why some pages feel "tight" and others feel "off" — and wants a tool that shows the answer instead of describing it.