The bands a page is assembled from — a hero, a row of features, a wall of work, the closing ask. Each owns its own container and surface, so a page is a list of these rather than a pile of markup.
These are full-width sections, so the specimens below each one are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.
The closing ask — one heading, one sentence, one button, in a band. Bare it is neutral, drawn in the page's own ink; fill paints it. The accent fill is deliberately the loudest thing on a page, which is the argument for having exactly one of them.
A row of short claims, each an icon, a title and a sentence. The column count is a field rather than a variant because the right number is decided by how many claims you have, not by which design you picked.
Copy with a picture in it — the sibling of prose, which is copy alone. arrangement names where the figure sits relative to the reading measure: plate gives the picture its own turn at the full measure, image-float floats it in the copy and the lines shorten around it, hanging-image floats it half out into the margin so they shorten by less, margin-image puts it wholly in the margin where the text never re-flows at all, bleed-image gives up the column entirely and spans the band. How wide that measure is stays the band's own width field, never the arrangement's.
A masonry wall of works, each rendered by the artwork card. Items need no image: a numbered canvas preset stands in (1–8 painterly, 9–16 photographic), so a gallery can be laid out and reviewed before a single photograph exists.
Two (or three) introductions standing side by side — each column an eyebrow, a heading and a lead, sharing a top line. The shape the landing page used to present Accent CMS and Mark Design as equals: not a comparison table, not feature cards — two section headers holding the same rank.
The scrolling band — repeated items on an infinite track, the post-hero energy strip. Pure CSS motion — pauses on hover, honors reduced motion, freezes deterministically.
A titled set of links to whole pages, each with an optional badge. Built for a gallery of examples or templates — the "here is what exists" band, where the thing being linked to is a page rather than an article.
A photograph that holds still while the page moves over it, carrying a heading and one button. The effect is background-attachment: fixed, which iOS declines — there it degrades to a plain fixed image, which is why the scrim is on by default rather than being part of the motion.
A band of words — eyebrow, heading, and rich body copy. The plain-text page: about, contact, services, policies, anything that is mostly writing.
A list of people or things, each one a mark beside a paragraph, alternating side down the page. The barbershop's five barbers, the florist's occasions, the market's aisles — one shape that four sites had each written out by hand.
Email capture — a heading, a line of pitch, one field and a button. A plain HTML form, so it works with no JavaScript and posts wherever action points: a list service, an internal route, anything that accepts a POST. Without an action it renders complete but inert, which is what an announced-but-unwired form should look like rather than one that silently swallows an address.
Numbers, given room, as a band of their own — a section header over a stats row. When you want the figures WITHOUT the band (beside prose in a split, say), reach past this for the stats component directly; that is what it is for.
A numbered sequence — do this, then this — with a rule drawn through the markers. The count is the order, so it is generated rather than typed.
Quotes with an attribution. An avatar is optional — supply initials instead and the card draws its own monogram, so a row stays even when only some people sent a photo.
Eyebrow, heading, lead — the three lines that introduce a band. Nearly every pattern in the system had grown its own copy of this trio; this is the one they should all be reaching for. It brings its own measure (a heading that runs the full width of a wide screen is unreadable) and its own space below, so a band can drop it in and get on with its content.