Spacing, Grids & Layout

The Invisible Structure

When a design "just looks right", it is usually because of things you cannot see: consistent spacing, an underlying grid and generous whitespace. When a design feels messy, random spacing is often to blame, even if the colours and fonts are fine.

---

The 8-Point Grid

The 8pt grid is a simple rule: every size and space is a multiple of 8 (8, 16, 24, 32, 40, 48...). A 4pt half-step is allowed for small details such as icon padding or the gap between a label and its input.

Why 8?

• Most screen sizes divide cleanly by 8, so layouts scale well across Android and iOS densities.
• It removes decision fatigue. Is it 13px or 15px? Neither: it is 16.
• Engineers can implement it with a handful of spacing tokens instead of dozens of random values.

Google's Material Design, Apple's guidelines and most modern design systems use an 8pt (or 4pt) base.

Spacing expresses relationships

The law of proximity says elements close together are seen as related. Use spacing to group:

• Small gaps (4 to 8px): label and input, icon and text
• Medium gaps (16 to 24px): between fields in a form, between cards
• Large gaps (32 to 64px): between sections

If everything has the same spacing, nothing feels grouped.

---

Column Grids

A column grid divides the screen into vertical columns separated by gutters, with margins on each side.

Content spans a whole number of columns. On desktop, a sidebar might span 3 columns and the main content 9. On mobile, most content spans all 4.

Twelve columns is popular because 12 divides into halves, thirds, quarters and sixths, so almost any layout fits.

In Figma, add a layout grid to a frame (Shift + Ctrl/Cmd + 4 toggles its visibility) and set it to Columns with your count, gutter and margin.

---

Whitespace Is Not Wasted Space

Whitespace (or negative space) is the empty area around and between elements. Beginners often try to fill it. Experienced designers protect it.

• Whitespace improves comprehension. Content with enough breathing room is easier to scan.
• It signals quality. Premium brands use lots of it.
• It focuses attention. A button surrounded by space stands out more than one crammed between other elements.

Many Nigerian bank apps have historically packed a dozen tiles onto the home screen. Newer apps like Moniepoint and Kuda won users partly by showing less, with more space around the few actions that matter most.

---

Layout Tips

• Align everything to something: a grid line, an edge or another element. Misalignments of 2 to 3px look like mistakes.
• Keep consistent internal padding in cards and containers, for example 16px on all sides.
• Design mobile first, then expand to tablet and desktop.
• Respect touch targets: at least 44 to 48px tall for anything tappable.

---

Try It in the Lab

The grid visualizer shows a real layout on mobile, tablet and desktop with a column overlay. Change columns, gutters and margins and watch the content reflow. The spacing checker takes any value and snaps it to the 8pt grid, and the audit tells you whether your settings match common practice.