FoundationsLayout primitives

Five shells, four breakpoints, one canvas.

The site has five reusable shells. The shells are the only thing the page templates compose from; no page builds its own grid.

5 shells4 breakpoints90 rem max canvas

The four breakpoints

The breakpoints are standard Tailwind (sm 640, md 768, lg 1024, xl 1280, 2xl 1536), but the system only uses three of them meaningfully.2xl exists in the codebase but no rule is gated on it; the canvas is bounded at 90 rem regardless.

Name	Width	Behavior
Mobile	< 640 px	Single column, full-bleed, no nav
Tablet	640 → 1024 px	Two columns, condensed nav
Laptop	1024 → 1280 px	Three columns, full nav
Desktop	≥ 1280 px	Three columns, max canvas 90 rem

The four canvases

A canvas is a max-width container. The four canvases are the four places on the site that need to be width-bounded.

Canvas	Max width	Use
`site-canvas`	90 rem	The default. Top-level pages, case studies, articles
`ds-shell`	90 rem	The doc system. Same max, with left rail and on-this-page
`doc-page`	42 rem	Long-form prose. Case study body, article body
`study-canvas`	80 rem	The HCI study. Slightly tighter than the site canvas

The five shells

A shell is the fixed layout of header, main, footer for a kind of page. Every page on the site is one of these five. New shells are easy to add and hard to take away.

Shell	Use
`Site header + main + footer`	Home, work index, contact, articles
`Doc top + rail + main + toc + footer`	Design system, long-form docs
`Case hero + figure + body + diagram + figures + footer`	Case studies
`Article hero + body + footer`	Long-form writing
`Login (centered, 24 rem)`	Auth, gated study entry

The doc shell, in isolation

Three columns: rail (16 rem), main (flex), on-this-page (14 rem). Visible at desktop widths.

Demo

Main

Page title

Prose column, up to 42 rem, with a 4 rem gap below the title and a 2 rem gap between sections.

The recipe

css

.ds-shell {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 768px) {
  .ds-shell { padding: 0 2.5rem; }
}

@media (min-width: 1024px) {
  .ds-shell {
    grid-template-columns: var(--ds-rail) minmax(0, 1fr);
    gap: 3rem;
    padding: 0 3.5rem;
  }
}

@media (min-width: 1280px) {
  .ds-shell {
    grid-template-columns: var(--ds-rail) minmax(0, 1fr) var(--ds-toc);
  }
}

Why five shells

A shell is the visible structure of a page: the header, the columns, the footer, the rhythm. The fewer shells the system has, the easier it is to keep navigation consistent across pages, the easier it is to keep the responsive behavior consistent across pages, and the easier it is for a first-time visitor to learn the site.