How it looks:

• Desktop: flat, on the page ground. A centred heading at display scale, then a line or two of body centred under it. Below, the whole of the section's parts in a single box: one keyline rectangle, inset from both edges, filled with the accent, divided by keylines into equal columns — one per part — that share their rules, so it reads as one table, not cards. Each column is built the same: a name at display scale, a one-line subtitle under it, then a centred paragraph; the columns differ only in how far their paragraphs run, and the box takes the height of the longest. Under the box, a short slogan line at display scale and the page's button.
• Phone: the box reflows to two columns, the keylines kept, an odd last part spanning the full width; the heading and body above it, the slogan line and the button below.

Fits: a method or a way of working with four to six named parts, each with a name, a one-line subtitle and a paragraph of similar length; no photos; an accent that can carry body text at reading size; the direction structured, editorial or bold.

Not fit: fewer than three parts, or parts of very unequal length, which leave most cells empty; parts that each need a photo; the direction soft, photographic or airy.

How it looks:

• Desktop: a flat band on the page ground. The heading top-left at display scale, an intro paragraph in the middle column, a small dot-and-label in the left gutter. Then the steps as rows, each separated from the next by a hairline that runs from the middle column to the right margin. Every row is the same build: a two-digit numeral at the row's left, the largest thing in the row and set in a tint of the ink, so tall that it overshoots the row and is cut by the rule above and the rule below — you see the middle band of each figure, never the whole of it; the step's short title in caps and its paragraph in the right column, both fully inside the row. The rules read as edges the numerals pass behind. One large sentence at the foot, running right.
• Phone: the rows stack at full width; each numeral keeps its overshoot and its cut by the rules, the title and paragraph beneath it.

Fits: a process of three to six steps, each with a short title and one or two sentences; the direction hard-edged, typographic or quiet; a page whose structure is carried by rules rather than boxes.

Not fit: two steps; steps that need a photo or an icon; the direction soft.

How it looks:

• Desktop: flat, on the page ground. A small label at the top left. Under it three columns, one per item, at thirds across the band, with no boxes, no icons and no rules — each column is a short label, the item's name under it, and a paragraph. The columns do not share a top: the second starts one step lower than the first, the third one step lower than the second, the step the same each time, so the three fall across the band like a staircase. The page's button sits under the first column, about level with where the third column's text ends. Nothing is large; the columns are the same width and differ only in their words and their height on the band.
• Phone: stacks in reading order, the step gone.

Fits: exactly three items of similar length with a name each — pillars, steps, phases; no photos; the direction quiet, classic, empty or typographic.

Not fit: two or four items; items of very different length, where the stagger reads as accident; icons wanted; the direction loud or dense.

How it looks:

• Desktop: in layers. At the back a greyscale photo of a room fills the band edge to edge — a wall of windows. In front, centred on the page's axis, two slabs in the ink, of one width, narrower than a third of the page, stacked, a sliver of photo between. The upper slab holds a small caps eyebrow and a slogan at display scale, its first half ranged left and its second half ranged right, so the sentence steps across the slab. The lower slab, taller, holds a heading and the steps as rows — a spelled-out number at the left of each row, a short paragraph at the right, no rules. The photo is the largest thing.
• Phone: the slabs widen to nearly the phone's width and stack the same way over the photo; the slogan's halves stay ranged left and right, the rows stay number left, paragraph right.

Fits: a process of three to five steps with a sentence or two each, and a slogan to head it; one environment row full-bleed, a room or a wall with no face in it, greyscale or quiet enough to sit behind ink; the direction editorial, quiet, hard-edged or photographic.

Not fit: no full-bleed environment photo, or one with a face the slabs would cover; steps that need an icon or a picture each; a page already dark above; the direction soft or bright.