Spatial Design
Composition Lab
Drag elements on a canvas. Watch the structure reveal itself: visual hierarchy, spacing ratios, APCA contrast, harmonic relationships. The tool measures what your eye approximates. If the numbers disagree with your intuition, trust the numbers.
The Problem
Most designers place elements by feel. The eye is good enough for early drafts. It is not good enough for production. A 4px misalignment is invisible at design time and obvious at review time. A heading that "looks right" at 42px might fail APCA contrast against the background color you chose by instinct.
Composition Lab makes the invisible visible. Every element gets a visual weight score (size × weight × position). Every gap between elements is measured against harmonic ratios — golden section, musical fifths, major thirds. Every text/background pair is checked with both WCAG 2.1 and APCA.
The result: you see structure where you used to see aesthetics. You see numbers where you used to see "it looks fine."
What It Measures
Visual Hierarchy
Each element gets a weight score: fontSize/16 × fontWeight/400 × positionBias.
Higher elements carry more weight (western reading order). The hierarchy panel ranks
all elements and flags inversions — when a caption outweighs a heading, something
is wrong.
Spacing & Harmonics
Vertical gaps between sorted elements are measured in pixels and compared against six harmonic ratios: golden (φ), octave (2:1), fifth (3:2), fourth (4:3), major third (5:4), minor third (6:5). Adjacent gaps that form a recognized ratio produce a badge. Random gaps produce silence.
APCA Contrast
Every text color is checked against the canvas background using APCA (Accessible Perceptual Contrast Algorithm). Unlike WCAG 2.1's simple luminance ratio, APCA accounts for polarity (dark-on-light vs light-on-dark) and maps to real usability: body text needs Lc 75+, content Lc 60+, large text Lc 45+, UI Lc 40+.
Grid Snap
Elements snap to the configurable grid unit (default 8px). The grid is the spine — it makes alignment automatic rather than effortful. When everything snaps, you stop thinking about position and start thinking about relationship.
Four Presets, Four Problems
Article — Long-form hierarchy. Headline, subhead, body, caption. The challenge: making four levels feel like a single voice, not four competing speakers.
Card — Constrained space. Eyebrow, title, description, CTA. Everything fights for attention. The challenge: one element wins. The rest serve.
Hero — Display scale, dark background. Polarity-aware contrast matters here — APCA and WCAG diverge most on dark backgrounds. The challenge: drama without noise.
Dashboard — Data hierarchy. A single metric dominates. Supporting text recedes. The challenge: the number must be the loudest thing on the page.
Who Uses This
Designers validating layout before handoff. Developers debugging "why does this look wrong." Anyone who has ever said "just move it up a few pixels" and couldn't explain why.
This is not a layout tool. It is a measurement tool. It does not generate good composition. It exposes bad composition that you cannot see yet.