Layout structure

The rule

• One vertical column. Content stacks top-to-bottom in a single scroll. No side-by-side columns on a phone, no horizontal scrolling for primary content.
• A calm canvas. The page sits on the grey background (background.secondary); white cards lift off it. That contrast is what makes a card read as a card — so a white card needs no border or shadow on the grey page.
• Grouped into zones. Related content sits together under a quiet caption header with generous space between groups, so the screen reads by shape before words.
• Primary action in thumb reach. The one main action sits at the bottom of the screen or pinned above the keyboard — where a thumb rests, not at the top.
• Respect safe areas. Keep content clear of the notch, the home indicator, and the floating nav bar.
• Spacing from the scale. Use the spacing tokens for rhythm; consistent gaps are what make the column feel ordered rather than cramped.

When to use it

Every screen. This is the default skeleton before any content goes in: a scrollable column, zoned groups, one bottom-anchored primary action.

When NOT to use it

• A focused sub-task doesn't get its own full screen — it rises as a BottomSheet over the current one.
• A single blocking decision is a Modal, not a screen.
• A genuinely two-path choice may show two equal cards — but only when the user is truly choosing between two equally important paths.

What user problem this solves

Comprehension and speed. A predictable column means a first-time user never has to relearn where things are: the title is up top, the content stacks, the action is under their thumb. On a small, low-end screen, one column also avoids the cramped, mis-tap-prone layouts that side-by-side content creates.