Course Directory
0 / 7 completed
Lesson 5

Spacing System

Creating consistent spatial rhythm

A spacing system is based on a base unit (typically 4px or 8px), with all spacing being multiples of this unit. This creates visual rhythm and consistency.

Key Points
  • Base Unit — 4px provides finer control, 8px is simpler
  • Spacing Scale — 4, 8, 12, 16, 24, 32, 48, 64...
  • Usage Types — Component internal spacing, spacing between components, layout spacing
  • Responsive — Different screen sizes may need different spacing scales
4px Base Grid
/* 4px Base Grid System */
--space-1:  4px;   /* Extra small */
--space-2:  8px;   /* Small */
--space-3:  12px;  /* Small-medium */
--space-4:  16px;  /* Standard */
--space-6:  24px;  /* Medium */
--space-8:  32px;  /* Large */
--space-12: 48px;  /* Extra large */
--space-16: 64px;  /* Section spacing */

Use browser pixel grid overlays during development to ensure all elements align to the grid.

PreviousComplete & Continue