Layout & grid

Every screen is drawn on the same mobile grid. It’s built to survive the smallest phone we support and to grow by filling, not by fixed widths. The same way Flutter lays out.

The floor: 360 × 667

We design to a hard floor of 360 dp wide × 667 pt tall. 360 comes from Android (every top-20 phone is ≥ 360 dp); 667 comes from the iPhone 7/8, the shortest screen with real traffic. If it works here, it works everywhere. Wide and tablet layouts are not in scope.

Keylines

Keyline	Value	Notes
Screen margin	20 dp	Left/right edge to content.
Gutter	16 dp	Gap between columns/cells.
Columns	4 × 68 dp	320 dp usable width. Grid is for true grids only (gallery, dialpad).
Vertical rhythm	8 pt	Vertical spacing steps in multiples of 8.

Do / Don’t

Do

• Default to a single column that fills the content width.
• Step vertical spacing in multiples of 8.
• Design at the 360 dp floor first, then let it grow.

Don’t

• Reach for a 12-column desktop grid. This is a mobile system.
• Export the grid to Flutter; it’s a design aid, not a token.
• Mix spacing hierarchies (internal vs between-blocks).