Disciplines layout space - the two-tier spacing system (4/8px micro-scale capped at 64px, then section cliffs at 96px and above), reading measure of 45-75 characters, container and target minimums, a grid-violation budget of at most one deliberate break per view, and smallest-surface-first verification at favicon and thumbnail scale. Use when someone asks "how much space should go between sections", "our spacing feels cramped and random", "how wide should the content column be", "does this design survive at thumbnail size", "why does this page feel like one continuous scroll of stuff", or a layout uses the same medium gap everywhere. Do NOT use to decide what the eye should see first within one view - use visual-hierarchy instead; for breakpoint-by-breakpoint adaptation specs, use responsive-spec.
---
name: spatial-composition-discipline
description: Disciplines layout space - the two-tier spacing system (4/8px micro-scale capped at 64px, then section cliffs at 96px and above), reading measure of 45-75 characters, container and target minimums, a grid-violation budget of at most one deliberate break per view, and smallest-surface-first verification at favicon and thumbnail scale. Use when someone asks "how much space should go between sections", "our spacing feels cramped and random", "how wide should the content column be", "does this design survive at thumbnail size", "why does this page feel like one continuous scroll of stuff", or a layout uses the same medium gap everywhere. Do NOT use to decide what the eye should see first within one view - use visual-hierarchy instead; for breakpoint-by-breakpoint adaptation specs, use responsive-spec.
---
# spatial-composition-discipline
Uniform medium spacing - 48px between everything - is the hallmark template tell. Rhythm is perceived pre-attentively: a 13px gap next to a 22px gap registers as off before anyone consciously sees either, and a page without section cliffs reads as one continuous scroll of stuff instead of a sequence of scenes. The expensive failure this skill prevents is hero-first polish: perfecting the layout at full desktop width while it quietly dies at the 16px favicon and 240px thumbnail sizes where most impressions actually happen.
## Operating procedure
Work the steps in this order because each output is the next step's input: scale membership comes before cliffs (component space must be capped before scene space means anything), cliffs before measure (the column sits inside the field the cliffs structure), and the smallest-surface battery runs last because it verifies everything upstream at the sizes that matter most.
### Step 1: Gather the measurements and the charter
Gather five inputs. If a number is a guess, label it a guess and move on.
1. **Spacing inventory** - every padding, margin, and gap value in the artifact. Grep the CSS or measure the mockup; do not sample a few values and extrapolate.
2. **Container** width and column structure.
3. **Body font size** - the measure math in Step 4 keys on it.
4. **Smallest real surfaces** the artifact will render on: favicon, social thumbnail, feed card, launch-gallery tile.
5. **Charter** - the client charter's spacing decisions. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values. Spacing enforced against house taste instead of a recorded charter is drift with extra steps. The house numbers below are the charter-conditional defaults; the 44px target floor is universal and no charter may waive it.
### Step 2: Snap micro-space to the 4/8px scale