Foundations
Spacing
A 4px base grid with one loud constant: 16px. Card padding, card-to-card rhythm and the shell's side inset are all 16 — one number gives the whole app its calm, even pulse.
Scale, visualised
space-14pxDot gaps, icon-to-label micro gaps
space-28pxChip gaps, intra-group gaps
space-312pxButton stack gaps, chip padding-x
space-416pxTHE system constant: card padding, card-to-card margin, shell inset
space-520pxCard inner padding (larger cards)
space-624pxTop-bar padding-x, sheet padding
space-728pxOnboarding side padding
space-832pxHeadline-to-content separation
space-1040pxOnboarding dots-to-headline
space-1248pxOnboarding top inset
Layout rules (enforced in code)
| Rule | Spec |
|---|---|
| Card width | Cards are width: 100% with no side margins — the shell owns the inset |
| Shell inset | padding: 0 16px 120px |
| Vertical rhythm | Every card carries margin-bottom: 16px |
| Bottom clearance | 120px — clears the floating tab bar + FAB |
| Content width | 390 − 2×16 = 358px (app canonical; Figma's 24px margins are visual intent) |
Why one constant matters
Spacing decisions are the most common source of drift in a scaling system. Peri avoids drift by giving contributors almost nothing to decide: if you are placing a card, the answer is 16. Whitespace luxury comes from the generous interior padding (16–20px) and the restraint of a single column — not from bespoke gaps.