Blog

Spacing, Layout Grids and Alignment: a 4/8 Spacing System, Whitespace and Responsive Grids

A consistent interface takes its spacing from a limited scale of multiples of 4 and 8, and keeps the space inside a group smaller than the space between groups. In Bookstore's catalogue we measure 12 arbitrary spacing values, card padding wider than the gap between cards and 19 borders, fix them with spacing tokens, a single left edge, background tone and a content-out auto-fill grid, compare it with a 12-column grid and add a compact density.