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

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.

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]

See also: Responsive, Density, Tokens.