Page header
A full-bleed band opening a document: title and standfirst on the grid, art at the right. Every page here opens with one.
Anatomy
The band is the region; the words are on the grid. The ground runs edge to edge, and the content inside aligns to the layout's column — the title starts exactly where every paragraph below it starts. Scroll up: the header of this page is doing both.
Colour
One indigo accent does all the interactive work. Everything else is a calm neutral.
The title is the display step — the one 40px line a surface gets; if a page seems to need two display lines, it is two pages. The standfirst caps at the reading measure, the title steps down to the h1 size below the compact breakpoint, and the band's tint plus its hairline are what separate the opening from the body — generous padding gives it the air a document's cover deserves.
With actions
Actions sit on the title line, right-aligned — the design's own docs shell puts "Changelog · Get an API key" exactly there. One primary at most, as everywhere.
Documentation
Two audiences share one shell: homeowners reading how approvals work, and developers reading the API.
With art
The piece standing on the band, right of the title. GRIDD has no photography and no illustration library; its art language is the cadastral one — the mark, a plaque row, a drawn figure. It hides on compact viewports: on a phone, the words are the header.
How approvals work
Who has to say yes, in what order, and what each authority actually decides.
Header or bar
This is deliberately not GdNavbar, and the split is the point.
A bar is persistent chrome a page scrolls under; a header is the top of the document itself. Products get bars; documents — docs, news, marketing, a console content page — get headers. The two sharing a component is how a docs title ends up 17px.