shared/references/layout-grid-and-spacing.md

# Layout, Grid, and Spacing

Choose structure from the content and format, not from a favorite grid

## Select a grid behavior

Use one of these as a starting model

### Single-axis
Good for one hero plus one text group

Define one dominant alignment axis and one counterweight

### Split field
Good for image and copy relationships, comparisons, or bilingual divisions

Do not default to 50/50; allocate space according to visual weight and content length

### Modular grid
Good for editorial, information-rich, or multi-item compositions

Use repeated columns and rows to create rhythm while allowing selected elements to span modules

### Radial or centered
Good for ceremonial, iconic, product-as-monument, or symmetry-led concepts

Do not center everything merely because it feels safe

### Freeform with anchors
Good for expressive advertising and manipulation

Define at least two clear anchors so freeform does not become random placement

## Alignment anchors

Keep a small set of strong anchors

Typical anchors

- hero edge or center
- headline edge
- logo safe edge
- product base line
- horizon
- major vertical axis

Avoid unrelated elements each creating their own alignment rule

## Spacing rhythm

Use a spacing family instead of arbitrary gaps

Express spacing relatively, for example `1x, 2x, 3x, 5x`, and reuse the same relationships across related groups

Tighter spacing indicates stronger grouping

Larger gaps indicate a new information group or compositional pause

Do not use boxes to compensate for weak spacing logic

## Optical alignment

Geometric equality is not always visually equal

Adjust for

- round letters and shapes overshooting flat edges
- asymmetric logos
- punctuation
- triangular forms
- visual weight of photographs
- cap height versus bounding box

Use optical correction only after a stable structural alignment exists

## Edge and tangent control

Scan the frame perimeter and every major intersection

Reject

- object edges barely touching text boxes
- limbs or products cropped at awkward joints or functional features
- circles kissing frame edges accidentally
- text nearly aligning but missing by a small amount
- two unrelated contours creating an accidental shared edge
- decorative lines ending just short of an intended anchor

Intentional overlap should look decisively intentional

Intentional separation should have enough space to read as separation

## Crop logic

Crop to strengthen scale and focus

Preserve

- faces and critical facial features
- hands when they carry meaning
- product labels and distinctive geometry
- functional product parts
- meaningful gaze or motion direction

Avoid cuts through joints unless the framing clearly supports it

Give faces and moving subjects breathing room in the direction of gaze or movement unless tension is deliberate

## Density

Set density from viewing context

A phone-feed ad needs faster grouping and fewer simultaneous messages than a large-format editorial spread

A dense design can work when the groups are obvious and the primary focal point remains dominant

Do not equate density with quality or emptiness with sophistication

## Safe zones

Reserve space for platform overlays, crop variants, text, logos, and legal copy when applicable

Treat safe zones as constraints in the composition, not as an afterthought after generation