The reference hero. Columns 1–6, vertically centred: mono uppercase eyebrow with dot separators, display headline at step 7 (weight 500, tight, ≤14 ch, about four lines), a lead paragraph at step 1 (≤50 ch), a row with the dark pill CTA and a text link with an arrow, then a mono footnote in `textMuted`. Columns 7–12: a square panel with a 1 px border and 12 px radius, no fill, holding a large isometric drawing (one big slab among a dozen small ones) and a tiny mono state label 16 px from the top-right corner. Phone: copy first, the square panel under it.

Top row: eyebrow and the display headline (step 7, weight 500, ≤17 ch) in 1–8; the muted lead and the CTA row bottom-aligned in 9–12. Below, one bordered object across 1–12: a 21:9 isometric drawing with a mono state label top-right, a full-width hairline, then four figure cells sharing hairlines (mono uppercase label, figure at step 5 weight 500, a small line). Two figure cells per row on phones.

Docs-like. Columns 1–3: a contents rail (mono eyebrow, a hairline, five or six rows of mono number + title at weight 500 separated by hairlines); hidden on phones. Columns 5–12: eyebrow, display headline at step 7 (weight 500, ≤16 ch), lead, the dark pill CTA beside a bordered secondary button with arrow, then a bordered strip of three key/value cells sharing hairlines (mono uppercase key, value at weight 500).

The whole hero is one bordered sheet with the 12 px radius. A 48 px header bar: the mono uppercase eyebrow left and a mono state label right, closed by a hairline. Then copy in 1–7 (display headline at step 7, weight 500, ≤15 ch; lead; dark pill CTA + arrow link; mono footnote) beside a square isometric drawing in 8–12, no inner border. A hairline, then three key/value cells sharing vertical hairlines (mono uppercase key, value at weight 500). Phone: the drawing drops under the copy, the cells stack.

Wordmark left (columns 1–3), plain links from column 4 at weight 400, a text link and a small dark pill CTA right-aligned in 9–12. A full-width 1 px hairline closes the bar edge to edge. Sticky with the page colour behind it. Phone: wordmark, pill CTA and a menu toggle only.

Two tiers, each closed by a full-width hairline: a 32 px status line (mono uppercase eyebrow left, mono note right, both `textMuted`), then the wordmark in 1–3, numbered links (01 Product, 02 Pricing…) in 4–10 and a small dark pill CTA in 11–12.

Section header: mono eyebrow and h2 (step 5, weight 500, ≤20 ch) in 1–6, a muted paragraph bottom-aligned in 8–12. Then one bordered object split into three cells by vertical hairlines. Each cell, top to bottom: a small isometric icon (about 96 × 72 px), a mono uppercase label, the title at step 2 weight 500, a muted line or an em-dash list, and a mono arrow link (dropped on phones).

Eyebrow and h2 (≤18 ch) top-left. Three separate bordered cards, 24 px apart. Each card: a drawing well (16:9 isometric drawing with the mono index top-right), a hairline across the card, then the body with 24 px padding: a mono uppercase chip, the title at step 3 weight 500, a muted paragraph and a text link with an arrow. On phones the cards scroll sideways, one and a bit in view.

Section header as in the shared cells. Then a ruled index between two hairlines: each row is a 12-column sub-grid with the mono number in column 1, the title (step 2, weight 500) in 2–5, a muted line in 6–10 and an arrow link right-aligned in 11–12. Rows have 20 px padding top and bottom, split by hairlines. Phones drop the muted line.

Opens on a full-width hairline with 64 px below it. Left 1–6: eyebrow, h2 (≤18 ch) and four guarantees as a ruled list (title at weight 500, muted line). Right 7–12: a bordered manifest panel: a header row with a mono file name left and a mono index right, a hairline, mono key/value lines (`key` in `textMuted` in the first third, value in `text`) split by hairlines like a JSON manifest, a hairline and a mono footnote (an address or file path).

Section header, then four figures in one bordered strip with shared hairlines: mono uppercase label at the top, the figure at step 6 weight 500 with tabular numerals, a muted one-line note. Two per row on phones with the hairlines kept between them.

Eyebrow and h2. Two quotes in one bordered object split by a vertical hairline. Each: a small isometric icon, the quote at step 2 weight 500 (tight, ≤48 ch, no quote marks bigger than the text), then the name at weight 500 and the mono role under it.

Section header, then three plans in one bordered strip with shared hairlines: mono uppercase plan name with a mono outlined chip on the same row, the price at step 6 weight 500, a muted line and a bordered button. A mono footnote under the strip ("Prices in EUR · billed monthly"). Never a lifted "most popular" card; the chip says it.

Columns 1–4: eyebrow, h2 (≤12 ch), a mono note and an arrow link, pinned to the top. Columns 6–12: a ruled list between hairlines; each row has the mono index (01) in its first column and the question at step 1 weight 500 with the muted answer under it. All answers visible, no chevrons.

Opens on a full-width hairline. Left 1–5: eyebrow, h2 at step 6 (≤14 ch), a muted line, the dark pill CTA + arrow link and a mono footnote. Right 7–12: two or three routes between hairlines, each a 32 px bordered mono letter or number chip, the title at step 3 weight 500 with a muted line, and an arrow at the far right.

The h2 left and an arrow link right on one row. Three posts in one bordered strip with shared hairlines: a small isometric icon (a stacked cylinder or plate), the mono date, the title at step 2 weight 500, a muted two-line summary.

A band between two full-width hairlines, 24 px padding: a mono uppercase label, then five or six customer names set in the mono face in `textMuted`, separated by vertical hairlines. On phones the names scroll sideways.

Left 1–5: eyebrow, h2, a muted line and a ruled list of mono key/value rows (EMAIL, PHONE, OFFICE). Right 7–12: a bordered form panel with a mono uppercase heading; inputs are 1 px bordered fields with the 12 px radius on the page colour, the submit is the dark pill.

Section header, then four people in one bordered strip with shared hairlines: a square grayscale portrait, the name at weight 500 and the mono role. Two per row on phones.

The single inverted band on a page: `heading` fill edge to edge with `bg`-colour text. Copy in 1–6 (eyebrow, h2, a line, a hairline, three short points in a row, then the inverted pill CTA and an arrow link); a bordered isometric drawing panel in 7–12 with light strokes and the mono state label.

Opens on a full-width hairline. Wordmark, tagline and a mono status line in 1–4; stacked links in 6–8; mono contact (label, email, address) in 9–12; a hairline, a mono legal row with a social link, then the site name at step 8 as a giant outlined wordmark (1 px stroke, no fill) bleeding off the bottom.

A 1 px hairline, then one row: wordmark, plain links and the mono legal line, space between.