Foundations
Grid
A single-column card stack on a 390px reference frame. The grid is deliberately boring — all of the system's intelligence budget is spent inside the cards, none on layout acrobatics.
The frame
sticky header · 72px top bar + week strip
DailyFocusCard
FuelingCard
RecentTrendsCard
WhatNextCard
120px bottom clearance
fixed tab bar + floating [+]
Specification
| Property | Value | Notes |
|---|---|---|
| Reference frame | 390px | iPhone-class; desktop renders a centered phone-width column |
| Shell | max-width: 390px; margin: 0 auto | The whole app is one shell |
| Columns | 1 | Cards are full-width rows |
| Side margins | 16px (app) | Figma uses 24px — app is canonical, ruled in the divergence register |
| Multi-column moments | tile rows inside cards only | 2-up dial graphs, 3-up trend tiles, 2×2 onboarding options |
| Vertical template | header → card stack → clearance → tab bar | Sticky top, fixed bottom |
Why a single column
Peri's content is a prioritized narrative — focus, fuelling, trends, outlook, in that order. A grid with lateral choices would dilute the engine's prioritization. The column is the priority order.