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 (Column Gap, Row Gap, Padding, Gap) rather than a raw number.
Column Gap
Horizontal gaps between elements on the same line (column-gap).
Row Gap
Vertical gaps between stacked elements (row-gap).
Padding
Inner padding for components and containers.
Gap
Layout and section gaps between elements.
Corner radius
Eight radius tokens keep rounding consistent across components.
(--ux4g-radius-none)
0px
(--ux4g-radius-xs)
2px
(--ux4g-radius-sm)
4px
(--ux4g-radius-md)
8px
(--ux4g-radius-lg)
12px
(--ux4g-radius-xl)
16px
(--ux4g-radius-2xl)
24px
(--ux4g-radius-full)
Full (Circular)
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 Gap tokens between major sections, Row Gap between related blocks, and Column Gap 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.