Build Assets
Brand Guideline

Spacing and Grid System

The base spacing unit and grid that creates visual rhythm across all surfaces.

Platform: bothTags: spacing, grid, layout, rhythm, brand

The Rule

All spacing values must be multiples of the base unit (8px). No arbitrary values (7px, 13px, 19px). Use a defined scale: 4, 8, 16, 24, 32, 48, 64, 96. Page layouts align to a 12-column grid with 24px gutters.

Rationale

Spacing consistency creates visual rhythm — the sense that a design was made by one careful hand. Arbitrary spacing is immediately perceptible as "off" even to non-designers. A base unit eliminates thousands of micro-decisions.

Specifications

base Unit8px
scale4, 8, 16, 24, 32, 48, 64, 96, 128
grid Columns12 columns
gutter Width24px
max Content Width1400px
page Margin32px (desktop), 16px (mobile)

Source Topic

design systems

Building a Visual Language

A concrete vocabulary of type, color, spacing, and motion that scales