4 Page
Give everything its place.
Arrange navigation, content and tools into a complete screen, on the same twenty-pixel grid.
Page
Navigation, work and context in one place.
Grid
A structure that everything shares.
Document
A quiet place for the words.
Panel
A home for supporting details.
Container
Keep content comfortably in view.
Page is the composition layer for the whole screen. It establishes regions, containment and alignment so content and controls share the same grid. It does not decide an application’s data model or access rules.
Choose a layout structure
Section titled “Choose a layout structure”| Topic | Responsibility |
|---|---|
| Container | Bound and align a region of content. |
| Grid | Place content using shared units and columns. |
| Overlay | Everything over the page: a modal, a sheet, a drawer, a popover or the whole screen. |
| Page | A standard page: navigation, content and supporting areas in six layouts. |
A page can contain navigation, a working area and supporting content. Give each region a clear purpose, and let its contents determine which Units and Core components belong there.
Follow the foundation
Section titled “Follow the foundation”Use Root’s scale, spacing, type and theme. Reflow regions for narrower screens without inventing another control scale or losing keyboard access. A layout should preserve the controls’ native behavior, accessible names and reading order.
Keep application behavior outside the layout
Section titled “Keep application behavior outside the layout”The application owns routing, loading, permissions and persistence. A Page composition arranges what may be shown; it does not authorize access. Public documentation, authenticated libraries and private workspaces can share components while keeping their data and routes separate.