Tight not loose layout principle

Summary

A layout-principle page arguing for tight, consistent spacing so elements feel locked into place, pairing correct examples on top with red-struck loose and inconsistent versions below.

Visual description

Cream (#F4F0E8) page with the standard header (title "Tight not loose", page "155"). The left column explains that layouts should feel locked into place rather than floating, that white space is a deliberate element, and that channels of empty space should relate in a tight way. The main area is a 3-column do/don't comparison over a faint grid. The top row shows correct examples: "Always use tight and consistent spacing" (evenly spaced grey blocks), "Always construct uniform stacks" (aligned grey bars), and "Type should be tight" with a sample news block ("Raikkonen 'steering wheel rant' voted Team Radio moment of 2017") set with tight leading. The bottom row shows the same arrangements broken and crossed by red diagonal strikes: "Don't over space", "Don't use mixed margins, gutters and padding", "Don't mix and match heights or widths", and a loose, over-leaded version of the news block.

Key takeaway

The top-row-right, bottom-row-wrong grid that pairs each correct layout directly above its failure for instant comparison. Treating white space as a controlled element with an explicit "tight not loose" rule. Demonstrating the rule on both abstract blocks and a real text block so it covers structure and typography at once.

Reuse notes

A reusable do/don't template for layout and spacing principles in a guideline. The paired correct-above-wrong-below grid with red strikes is a clear teaching device. Pairs with the visual-principles and activating-space pages. Demo news copy is F1-specific; the spacing rule transfers anywhere.