§ Corrective
/arrange
Spatial discipline — scale, rhythm, hierarchy through space.
What it does
Spacing is the design layer that’s invisible when it works and cumulative when it doesn’t — every gap arbitrary, every section crowded, hierarchy weak because proximity isn’t doing the work. /arrange brings systematic spatial discipline to existing code while keeping the structural layout decisions with you.
Like the other correctives, it uses a smart-default autonomy model. Small scale-conformance fixes — rounding arbitrary values to scale steps, fixing symmetric heading margins, adding measure caps to body text, normalizing section padding — get applied directly. Character-level shifts — establishing a spacing scale where none exists, density adjustments that cascade across the whole interface — are surfaced for your approval before executing.
Interactive
Practice preferences
Default session length
Voice guide
Pick the voice that feels most calming. You can change this any time, even mid-practice.
Reminders
On Stillpoint
Stillpoint’s home doesn’t include a settings form — this demo illustrates /arrange’s principle on a related Stillpoint surface rather than on something currently shipped. The actual section spacing on Home.tsx is calibrated by /foundations + the Section component; /arrange’s work on Stillpoint is verification, not incremental change.
When to use it
- Spacing feels arbitrary — gaps that don’t relate to each other, no visible rhythm.
- Hierarchy is weak because proximity relationships don’t communicate grouping.
- The interface feels cramped in some places and excessive in others.
- Content runs edge-to-edge without breathing room, especially body text and helper labels.
- Headings have symmetric margins that make it ambiguous which content they introduce.
- A /survey has flagged spatial issues and you want them addressed systematically.
How to use it
By default /arrange runs a full pass — scale adherence, vertical rhythm, proximity relationships, breathing room, density. Pass a scope to focus on one area, or describe what you want fixed in plain language. Layout-structural problems — three-equal-cards that should be asymmetric, missing grid alignment — get flagged for /refine or /design rather than restructured here.
- /arrange rhythm
- /arrange hierarchy
Anti-patterns it addresses
- Spacing values pulled from nowhere — 13px here, 22px there, 31px somewhere else. No scale, no rhythm, just numbers.
- Symmetric heading margins. The h2 has the same space above and below; it floats between sections instead of belonging to the content underneath.
- Body text running container-edge to container-edge with no measure cap, producing 90+ character lines that fall apart by the third one.
- Cards crammed flush against page borders or each other — no horizontal padding, no gap.
- Sections separated by the same gap as form rows, making the whole page read as one continuous list with no architectural rhythm.
- Density that contradicts the product’s character — generous whitespace in a data-heavy dashboard, or cramped layouts in a premium consumer product.