Layout

Layout gives content a place to live. Where spacing decides how much space separates things, layout decides where things sit and how much room they get.

As interfaces get more dynamic, AI-generated surfaces, variable content lengths, panels that open and close, layout can't be hand-tuned per screen. It needs rules that hold regardless of what fills them. So the system is content-driven rather than device-driven: the same structure adapts to a dense dashboard, a single long-form article, or a narrow side panel, without a bespoke layout for each.

Rather than a set of fixed page templates, layout is one shared grid that everything draws from. At full width it is sixteen columns edge to edge, for dashboards, canvases, and anything that wants the whole viewport. For long-form content it becomes a reading grid: the middle twelve columns, with wider margins on each side, holding prose at a comfortable measure so it doesn't stretch too wide to scan.

The reading grid isn't a separate system. It is the same grid, just used with wider margins when the content reads better narrow.

Column count scales with the viewport, so the grid stays proportionate instead of cramming sixteen columns onto a phone. But the more interesting rule is what happens with panels. Layout doesn't just react to viewport width; it reacts to how much room is actually left for content once navigation and side panels are open.

When the content area gets too tight, a panel closes on its own, based on the share of the screen content still has rather than a fixed breakpoint. Navigation gives up its space before the supplementary right panel does. The layout protects the content, not the chrome.

A grid on its own doesn't make a page; content does, once it is organized into rows. Each row picks how to use its columns: full width for impact, the reading grid for most prose, a leading or trailing third when a label or a sidebar earns its own column, or a split down the middle for equal-weight comparisons. The narrower patterns are used with intent, when content genuinely has two roles to show, not to break up a page for decoration.

The vertical rhythm between rows isn't a new system either; it is the layout spacing scale doing its other job. The same scale that sets the gutters between columns sets the space between blocks, because a grid without rhythm is just coordinates.

Layout was the very first thing we built for the new tokens, and it stayed mine and Teryn's throughout.