Components
Grid
The layout grid: 1200px max width, spare columns, wide gutters.
Layout grid
12 columns, 16px gutters. Content maxes out at 1200px.
<div class="mx-auto grid max-w-[1200px] grid-cols-12 gap-4">
<div class="col-span-4">…</div>
<div class="col-span-8">…</div>
</div>Guides
Solid cells fill a slot with bg-bg-elevated;
crosses mark the guide intersections.
Hidden row and column guides — same cells, outer border only.
<div class="relative border border-separator">
<div class="grid grid-cols-4">
<div class="border-b border-r border-separator" />
<div class="border-b border-r border-separator bg-bg-elevated" /> {/* solid cell */}
…
</div>
{/* cross marker on an intersection */}
<span class="absolute left-1/4 top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-text-tertiary">+</span>
</div>Empty & overlaid cells
Grid without cells — just the structural guides, no filled tiles.
Overlaying cells occupy the same slots with span notation
(column="2/4"), stacking atop one another.
A responsive grid passes objects to
columns={{ sm: 1, md: 2, lg: 3 }} so cells reflow per
breakpoint. Responsive guide clipping and
specific guide clipping mark individual cells
solid so guides hide behind just those tiles — per breakpoint,
or per cell.
Dashed grid cross
Dashed grid cross: dashedGuides on the
GridSystem plus GridCross markers at intersections. The
dashed grid page wraps this in GridPage to
extend the dashed structure across a full-page template.
Radius scale
Markdown for agents: /design/grid.md · spec: /design.md