Design · Structure

Page structure

Structure is how routes assemble existing roles — not a second spacing scale. Every interior page shares one shell; the landing page is the only route that uses .hero and .band.

Shell

Shared document frame

website/app/layout.tsx owns the skip link, masthead, and colophon. Each route supplies main#content. The skip target must stay on that element.

body
  a.skip → #content
  header.masthead          … shared chrome
  main#content             … route body
  footer.colophon          … shared chrome

.skip: First focusable control. Jumps to #content.
.masthead / .colophon: Shared chrome. Specimens live on the Actions and Navigation catalog pages.
main#content: The route body. One per page.

Interior

Default page recipe

Interior routes wrap content in frame page, open with PageMast, then place collections or reading columns below. Spacing tokens are on the Space page.

<main id="content" className="frame page">
  <PageMast kicker="…" title="…">
    <p className="lede">…</p>
  </PageMast>
  …body…
</main>

Column

`.frame`

Centers the route inside --frame. Every interior page uses it on main.

Padding

`.page`

Vertical rhythm for interior routes (--space-7 top, --space-8 bottom). Omit on the landing page.

Opening

`PageMast` / `.intro`

Kicker, one h1.title, optional children — normally a single .lede.

PageMast.kicker: Route family or catalog label. Not decorative Latin.
PageMast.title: The page's only h1. Do not repeat it inside Markdown prose.
PageMast.children: Supporting copy under the title — usually one lede paragraph.

Specimen

Interior page mast

This block is the live PageMast output: same classes as /status, /syntax, and the catalog.

Regions

Stack and group

A .stack separates sibling regions. Each .group keeps its heading, supporting copy, and one related cluster together.

Region one

One introduction, then its content

Use a group per catalog section or doc chapter.

Region two

Another group

Prose and collections stay inside the group they belong to.

.stack: Vertical gap --space-6 between major regions.
.group: Local kicker → section → lede → specimen/content. No nested stacks.
.prose: Reading column at --measure. See Content.

Recipes

Production patterns

Pick the smallest shell that fits the route. These match live pages today.

Prose document

Example: /status

<PageMast … />
<article className="prose" />

One reading column after the mast. Markdown h1 is stripped so the page title stays unique.

Stacked sections

Example: /syntax

<PageMast … />
<div className="stack">
  <section className="group">…prose…</section>
  <section className="group">…prose…</section>
</div>

Use when a route has two or more named regions with their own section titles.

Tile index

Example: /learn

<PageMast … />
<div className="tiles">…</div>

PageMast, then a single equal-track grid. No stack wrapper unless another region follows.

Catalog page

Example: /design/typography

<PageMast … />
<div className="stack">
  <section className="group">…</section>
  …
</div>

Most catalog routes: mast, then a stack of groups. The design layout adds catalog subnav first.

Landing

Hero and band

Only / uses this recipe. main#content has no .page class. Each region is section.frame with either .hero or .band.

Research language · incomplete

Tensors that know their shape.

Display title, actions, then factual chips — one thought.

Current status Examples

Typed tensorsTextual MLIR

Next region

A band continues the landing rhythm

Figures, maps, and featured collections each get their own band.

.hero: .display title — not PageMast. One per site, on the home route only.
.band: Sibling landing sections. May include an .intro block or jump straight to content.

Catalog layout

Design routes

website/app/design/layout.tsx wraps every catalog page in main#content.frame.page, renders DesignNav, then the route body. Individual catalog pages still use PageMast — do not duplicate the layout shell inside a page file.

<main id="content" className="frame page">
  <DesignNav />
  <PageMast … />
  <div className="stack">…</div>
</main>

Avoid

Common mistakes

Two heroes on one route, or a hero below the fold.
A Markdown-generated h1 when PageMast already supplies the page title.
Masonry for maps and catalogs — use tile grid instead.
Nesting .stack inside .group unless the inner stack is the group's single content cluster.
Moving masthead or colophon markup into a route file.