Spacing & Layout
A base-4 spacing scale with fine 2px steps, four semantic spacing roles, and a responsive grid that adapts from mobile to desktop XL — keeping visual rhythm predictable across every government service interface.
Base spacing scale
The primitive ramp every spacing token aliases. Built on a 4px rhythm with 2px fine steps for tight adjustments.
Semantic spacing
Role-based tokens that alias the base scale. Reach for these first — they describe intent (Inline, Stack, Padding, Section) rather than a raw number.
Inline
Horizontal gaps between elements on the same line.
Stack
Vertical gaps between stacked elements.
Padding
Inner padding for components and containers.
Section
Large gaps between page sections.
Corner radius
Five radius tokens keep rounding consistent across components.
None
0px
Small
4px
Medium
8px
Large
12px
Full
Full
Pills & circular avatars
Grid visualization
The 12-column grid at desktop, and common column spans.
Layout principles
Guidelines for consistent page structure across government services.
Content width
Max content width caps at 1200px on desktop and 1320px on desktop XL. Body text should not exceed ~720px (65–75 characters per line) for readability.
Vertical rhythm
Use Section spacing between major sections, Stack between related blocks, and Inline for on-line gaps — never raw pixel guesses.
Touch targets
Minimum 44×44px touch targets on mobile, with at least 8px (Inline S) spacing between interactive elements.
Density
Default density is optimized for citizen-facing services to ensure readability and accessibility.