// Interactive design lab
Make layouts explain themselves.
Change one visual relationship at a time. The demonstrations below turn proximity from an abstract principle into something you can see, break and repair.
Spacing, forms and responsive UI
Keyboard and screen-reader states
Design clarity, not SEO folklore
Use the full lab immediately
Start by looking
How many groups do you see?
No boxes, labels or colour changes create the three groups.
01 / The operation
Change the gap, change the meaning.
More space does not automatically improve a layout. Proximity gives distance a job: bind these items; separate those items.
The useful unit is the contrast between space inside a group and space between groups.
02 / Pairing
Which caption belongs to which image?
Equal vertical gaps make captions hover between rows. Repairing the spacing changes no colour, border, typeface or wording.
Research notes
Interface map
Prototype states
03 / Forms
Every label needs a home.
Each field should form a compact unit. A larger inter-field gap marks the next boundary.
Semantic labels still carry the relationship in code.
04 / Containment
A border should reinforce a group, not invent one.
Remove the card borders. The plan names and prices should remain attached because the internal rhythm is tighter than the gap between plans.
Solo
For one active project
$12
per month
Studio
For a small design team
$28
per month
Company
For several workspaces
$64
per month
05 / Competing cues
Do not make distance and colour argue.
Colour asks you to collect matching dots across the canvas. Distance asks you to see three local clusters. Interfaces should not force that negotiation.
06 / Responsive layout
Wrapping changes who stands next to whom.
Move the slider. Controls inside each group stay close even when the two groups stack. The outer gap preserves their meaning.
07 / Accessibility
Spacing is a cue, not a contract.
Visual proximity helps sighted readers. HTML must still preserve the same relationships programmatically.
Proximity is not a documented Google ranking factor. Use it for comprehension, not as ranking folklore.
<fieldset>
<legend>Notification frequency</legend>
<label>
<input type="radio" name="frequency">
As updates happen
</label>
</fieldset>The fieldset and labels keep their meaning in both states.
08 / Audit
Break the surface. See what survives.
Blur detail to expose grouping, remove frames to reveal weak spacing, and narrow the canvas to catch accidental adjacency after reflow.
Capture
Save ideas from any project.
Organise
Group related notes and files.
Review
Compare changes with context.
Share
Invite the right collaborators.
// Implementation rules
Make space carry meaning.
- 01Define conceptual groups before choosing spacing tokens.
- 02Keep gaps within a group visibly tighter than the next boundary.
- 03Make alignment, type, colour and containment reinforce one structure.
- 04Wrap related controls together so responsive layout preserves them.
- 05Encode relationships with labels, fieldsets, lists, headings and tables.
- 06Test without borders, with blurred detail and at narrow widths.
// Continue with context