Spacing
Generated from DESIGN_SYSTEM.md
Rules
8-point grid. Every margin, padding, gap, and fixed size must be a multiple of 8pt/px. 4pt/px is the only allowed exception — for micro-adjustments between tightly-coupled elements only.
| Token | Value | Tailwind | iOS (AppTheme.Spacing) | Android (Dimens) | Use |
|---|---|---|---|---|---|
space-1 | 4pt/px | p-1, gap-1 | xs (4pt) | spacing_xs | Micro-adjustment between coupled items |
space-2 | 8pt/px | p-2, gap-2 | sm (8pt) | spacing_sm | Items within a tight group |
space-4 | 16pt/px | p-4, gap-4 | md (16pt) | spacing_md | Standard gutter, card padding |
space-6 | 24pt/px | p-6, gap-6 | lg (24pt) | spacing_lg | Between groups, section gaps |
space-8 | 32pt/px | p-8, gap-8 | xl (32pt) | spacing_xl | Major section separation |
space-10 | 40pt/px | p-10, gap-10 | xxl (40pt) | spacing_xxl | Hero padding |
space-12 | 48pt/px | p-12, gap-12 | xxxl (48pt) | spacing_xxxl | Maximum section breathing room |
Standard gutters:
- Page horizontal padding:
16pt/px(space-4,px-safe/md) - Card internal padding:
16pt/px(space-4) - List item vertical padding:
8–12pt/px(space-2tospace-3) - Nav item vertical padding:
8pt/px(space-2) - Section gap:
24pt/px(space-6)
Section panel padding — two canonical tiers (web; do NOT hand-roll per section):
A content section in a widget-panel / card-panel uses exactly one of three padding utilities. widget-panel itself carries NO padding, so the tier is always explicit. This replaced the prior drift (p-4 / p-5 / p-6 / pt-5 pb-4 px-4 all coexisting).
| Tier | Utility | Value | Use |
|---|---|---|---|
| XS (tight strip) | section-pad-xs | p-3 (12pt) | Strip widgets whose own cards carry the weight; chrome must not waste space — finance index strip. Near the briefing player's tightness. |
| SM (compact) | section-pad-sm | px-4 pt-5 pb-4 (16 / top 20 / bottom 16) | Compact widgets — weather, profile completion. Matches the weather card's tuned balance (the 20pt top is a deliberate 4pt exception so a header doesn't kiss the edge). |
| LG (content) | section-pad-lg | p-4 md:p-6 (16→24pt) | Content sections — mate, hub, news, lens, charts. |
A tight strip section (XS) pairs with HorizontalCardRail bleed="xs" so the cards still reach the panel edge despite the small padding. Special chrome opts out of all three: the top briefing player and the prompt input (bespoke player/input shells), and naked panel-less sections like the series rail (w-full space-y-3, no panel to pad).
Anti-patterns:
- A
widget-panel/card-panelcontent section with hand-rolledp-4/p-5/p-6/pt-* pb-* px-*instead ofsection-pad-sm/section-pad-lg— prohibited. .padding(14),px-5,gap-5— not on the grid, prohibitedspacing: 10in SwiftUI VStack — use4(xs) or8(sm)- Arbitrary Tailwind values like
px-[18px]— extract tospace-4orspace-6
Live specimens
space-14pxspace-28pxspace-416pxspace-624pxspace-832pxspace-1040pxspace-1248px