The frame

GdAppShell is scaffolding for a page of CONTROLS — the certify wizard, the tracker, the certifier desk, account. A document gets the docs chassis instead: a reading column, a contents rail, a display line on a bleeding band.

Width

Certify

Lodge a certificate

Building work on Lot 14 on RP80432, Brisbane City.

Certificate details

Class 1a dwelling · form 15 and form 16 attached.

Certifier

A1 certification, licence 12048.

A 1280px demo viewport that scrolls sideways, because under about 1100 every uncapped variant is the same picture — scroll it to find the column's other edge. This is the real shell, so the specimen brings its own main and its own h1 into a page that already has both: what documenting a page template on a page costs.

Four widths

Four, because there are four jobs. Three cap a column; the fourth states the same column as a gutter instead.

narrow · 480px — the one-decision column: a sign-in card, an invite. It also sits higher on the page than the others, because a single card floating in the vertical middle of a tall viewport reads as an error state.
wide · --gd-size-form — the form column, and the default: a wizard step, the tracker. The token means exactly this, the width a form column is set to.
portal · 1024px — the desk. Two working columns and a table between them, which stops being usable somewhere under this and stops being readable somewhere over it.
full · --gd-size-container — account: the same column the bar above it uses, so the page's content edges meet the toolbar's.

The skip link

First in the tab order, off-screen until it takes focus. The one at the top of this page is a GdSkipLink — press Tab.

<GdSkipLink /> → <a href="#main">Skip to content</a> <GdAppShell> → <main id="main" tabindex="-1">

The tabindex is the half that gets left out. A fragment link moves the reading position in every browser but moves FOCUS only to something focusable, so a skip link pointing at a plain main leaves the keyboard exactly where it was — it has skipped nothing for the person who needed it. Point to somewhere else and whatever it names has to take the same attribute.

It goes before the bar, not after: a skip link that comes after the navigation it skips is only reachable once you have tabbed through it. And it carries no styles of its own — .gd-skip-link is defined in base.css beside the focus ring, because a skip link is a global behaviour and has to work on a page that has not adopted these components yet.

The footer

Brand and disclaimer on the left, caps-labelled link columns on the right, on the ink ground.

Live, and pointed at real pages — this is the docs site's own sitemap. Hover a column link, then tab to it.

The ink surface is the rule. A marketing page runs two background tones and the footer is where it STOPS. A hairline over the same white says the content merely ran out — which is what the two hand-rolled footers this replaces both were, and by the time they were read side by side they disagreed on the font size, the link ink and the border.
The disclaimer is furniture, not fine print. It sits beside the mark at reading size. Shrunk into the copyright line it reads as something we would rather you did not notice.
A column is a nav with a heading. The links are the app's business — they are routes — while the caps, the rhythm and the hover ink are the system's, so the footer styles the slotted structure rather than taking a list of links as a prop. Same split, same reason, as the nav links in the bar.
Links keep their underline inside prose. In the disclaimer and the copyright line a link that differs from the words around it only by ink is not distinguishable to anyone who cannot see that difference. A column has no prose to be distinguished from, so its links drop the underline.

Page shell