Spacing

Gelium spacing is a small, named rhythm shared by components and compositions. The live bars below use --ui-space-1 through --ui-space-8; the labels are generated in HTML so the page remains useful with JavaScript disabled.

Scale

space-1.25rem

space-2.5rem

space-3.75rem

space-41rem

space-61.5rem

space-82rem

Composition

This small server-rendered composition shows the distinction between a layout gap (space-4), component padding (space-3), and text rhythm (space-2). It is deliberately plain: spacing should clarify grouping, not become decoration.

Queue12 open itemsReview queue

Review3 need attentionOpen review

Done48 completedSee history

Rules

SPACE-SCALE: use --ui-space-1, 2, 3, 4, 6, or 8; do not create a second numeric scale in feature CSS.
SPACE-GROUP: use smaller gaps inside a component and larger gaps between groups; whitespace communicates hierarchy.
SPACE-COLLAPSE: at narrow widths, stack compositions instead of forcing a minimum width or hiding overflow.
SPACE-TARGET: spacing never shrinks the interactive hit area below --ui-touch-target.

Sources and Gelium adaptation

GOV.UK spacing: Gelium adapts a constrained rhythm and responsive composition to the --ui-space-* family.[1]
USWDS spacing tokens: Gelium keeps spacing semantic and reusable across components.[2]
W3C WCAG 2.2, 1.4.12 Text spacing: compositions must survive increased user spacing.[3]