Grid systems

Build product screens from these patterns instead of inventing per-page grids. The global header spans the full width. The app nav and the assistant are part of the shell and come in from off canvas. The page is a page header plus content blocks; a rail on the page is a drawer, inline or off canvas, not the assistant.

Dashed: shell panels that come in from off canvas. The rows show the most slots: five on a dashboard, four on a form or record.

<div className="layout-app">
  <header className="layout-header">{/* global header, full width */}</header>
  <div className="layout-canvas">
    <aside>{/* app nav */}</aside>
    <div className="layout-workspace">
      <main className="layout-content">
        {/* page header, then content blocks */}
        <section className="layout-metrics layout-metrics--fixed-5">…</section>
        <section className="layout-split layout-split--quarters">
          <div className="layout-stack">…</div>
          <div className="layout-stack">…</div>
          <div className="layout-stack">…</div>
          <div className="layout-stack">…</div>
        </section>
      </main>
      <aside>{/* page rail: an inline drawer */}</aside>
    </div>
    <aside>{/* assistant */}</aside>
  </div>
</div>

KPI rows. Fixed variants keep equal columns. The default auto-fits from --layout-metrics-min. A dashboard row holds up to five slots.

.layout-metrics--fixed-3

.layout-metrics--fixed-4

.layout-metrics--fixed-5

Panels inside .layout-content. Primary is the default table plus activity layout. Form and record views hold up to four slots.

.layout-split--primary

.layout-split

.layout-split--thirds

.layout-split--quarters

A column of Sections inside another layout, such as the side of a split. The same 24px gap as .layout-content, without its page inset.

The widest one column of fields or FormDisplay rows gets in a record or form view: a 234 label, a 12 gap and a 308 field. Up to 3 columns; past them the page stays empty.

Space between columns and cards.

Page inset around content. 2xl is for wide, high-resolution screens.

Centered max-width shells for docs and marketing. Prefer the product patterns above for app screens.