You've chosen the right template. The fonts look good. The images are strong. But something still feels off — the page doesn't hold together the way a professionally designed site does.

The difference is almost always spacing.

Professional designers don't pick spacing values by feel. They use a system. Every gap, every margin, every bit of breathing room on the page follows a scale — and in Squarespace, that scale is built into the grid you already use every time you edit a section.

The interactive tool below teaches you four things that will change how you build in Squarespace:

The Grid — You already drag blocks across 12 columns. But do you know what those columns actually measure in pixels? And did you know your default column gap of 11px is fighting against every other spacing decision you make?

The 8pt System — Every spacing value on your page should be a multiple of 8. Section padding, block gaps, card padding — all of it. When everything shares the same base unit, the page feels resolved even before you've added a single image.

Visual Rhythm — Section padding and block gaps are two different controls in Squarespace. When they follow the same scale, the page has rhythm. When they don't, it feels random — even if each section looks fine on its own.

White Space — The space between elements isn't empty. It's doing work. The question is whether you placed it with intention or whether it's just what was left over.

Play with the diagrams. Change the sliders. Click the grid. Everything is interactive because spacing is something you need to see and feel, not just read about.

Loading module...

Design Logic: Spacing, Scale & Structure - Interactive