Layout

Layouts should match the job of the page. Documentation needs room for reading and navigation, dashboards need dense comparison, and landing surfaces need strong first-viewport signals.

Grid#

Use grids to align related content and make scanning predictable. Define column behaviour explicitly so cards, tables, and navigation do not shift unexpectedly between viewports.

Margin#

Margins separate regions. Use them to create rhythm between sections, not to repair component internals or compensate for unstable content size.

Padding#

Padding protects content inside a component. Keep it stable across states so hover, focus, badges, and longer labels do not resize the layout.

Responsive#

Responsive behaviour should preserve purpose, not merely shrink the desktop page. Keep navigation reachable, avoid overlapping text, and use constraints that make the same content work at small and wide sizes.