Skip to content

Design system

Documentation

DesignFoundations / Layout & Grid

Foundations / Layout & Grid

Stable

Layout & Grid

A page should reveal its hierarchy through width, columns, and breathing room before it reaches for decoration.

On this page

Page structure

The docs shell uses a readable content column, a stable navigation rail, and an optional table of contents. The shared values live in --layout-* tokens.

TokenValueRole
--layout-content-max90remMaximum page frame.
--layout-readable-max52remComfortable measure for documentation and long-form copy.
--layout-column-gap2rem → 5remBreathing room between navigation and content.
--layout-gutter1remMinimum outer page gutter on larger screens.
--layout-sidebar-width14remStable documentation navigation rail.

Twelve columns

Use a 12-column grid when content has a real relationship to communicate. The example shows a main span and a supporting span rather than a collection of equal cards.

Main content · 8
Support · 4
3
3
3
3

Responsive rules

  • Keep the readable measure stable; change columns and gutters before shrinking body text.
  • Collapse secondary navigation before allowing the main content to become cramped.
  • Keep a growing region scrollable instead of clipping it; fixed headers and actions stay visible.
  • The document viewport keeps the platform scrollbar; bounded regions use scrollbar-hover-reveal and do not introduce one-off widths or colors.
  • Use a full-width layout only when the content benefits from it, such as a data table or wide preview.