Web Layout & Spacing

The definitive reference for layout and spacing in modern web design. Not "use flexbox" — the actual systems, principles, and math behind why good layouts feel right and bad ones feel off.

Spacing is the invisible skeleton of every interface. Color gets the glory, typography gets the respect, but spacing is what makes both of them work. A page with perfect type and color but broken spacing looks amateur. A page with mediocre type but perfect spacing looks professional. That is the power of getting this right.

When to Use

Use for:

• Building any web layout from scratch
• Establishing spacing tokens for a design system
• Debugging layouts that "look wrong" but you cannot articulate why
• Converting Figma designs to CSS with accurate spacing
• Making responsive layouts that feel right on every screen size
• Setting up vertical rhythm for long-form content
• Auditing existing sites for spacing inconsistencies
• Card layouts, form layouts, dashboard grids, content pages