Skip to content

Spacing and Layout

Visual language
Space creates hierarchy.

Geometry of Trust relies on rhythm rather than decoration. Consistent spacing allows structure to emerge naturally.

Whitespace is not empty.

It separates concepts, groups related information and guides attention before color or typography become necessary.

Foundation

Base unit ### 8-pixel system Every spacing token is derived from an 8 px rhythm. Only **4px** exists as an optical correction.
Philosophy ### Rhythm before density The goal is not to minimise whitespace. The goal is to make relationships immediately obvious.

Spacing scale

Token Value Typical use
--space-1 4px Optical corrections
--space-2 8px Tight controls
--space-3 12px Compact groups
--space-4 16px Standard component spacing
--space-6 24px Card interiors
--space-8 32px Component groups
--space-12 48px Section interiors
--space-16 64px Compact section spacing
--space-24 96px Default section rhythm
--space-32 128px Marketing hero rhythm

Spacing in context

16px Related controls inside one component
Control
16
Control
32px Independent component groups
Group A
32
Group B
64px Separate content sections
Section A
64
Section B

Visual rhythm

4px Optical correction
8px Tight control spacing
16px Standard component spacing
24px Card content gap
32px Component groups
48px Section internals
64px Compact section gap
96px Standard section rhythm
128px Large marketing rhythm

Page layouts

Context Width Columns Gutter
Marketing 1280px 12 24–48px
Documentation 1440px Navigation + content 24–40px
Application Fluid 12 24px
Dense data Fluid 16 16–24px

Composition

Marketing ### Tell a story Prefer 5/7 and 4/8 asymmetric layouts. Use large vertical rhythm. One dominant visual.
Documentation ### Explain Stable reading width. Predictable spacing. Minimal distractions. Hierarchy through rhythm.
Application ### Operate Repeatable grids. Consistent alignment. Information density without visual clutter.

Principles

Do
  • Group related information before styling it.
  • Keep spacing consistent across similar components.
  • Use whitespace to reveal hierarchy.
  • Align components to the underlying grid.
Do not
  • Invent arbitrary spacing values.
  • Fill empty areas because they feel unused.
  • Reduce spacing to fit more information.
  • Mix unrelated spacing scales.

Philosophy

Spacing ### Space communicates relationships. Objects that belong together move together. Objects that represent different concepts remain visually independent. Good spacing makes the interface understandable before a single word is read.
Knowledge graph