How it looks:

• Desktop: a flat band on the page ground, no photo. The heading sits top-left on two lines at display scale. Under it the list: each item is one or two lines of body text with a small mark before it in place of a bullet, and each item starts one equal step further to the right than the one before, so the list runs diagonally down the band from under the heading toward the right margin — the list's shape is the slide it describes. Nothing sits in the space the diagonal leaves above and below it; the band's number sits small in the top-left gutter and a short label with a dot at the far right.
• Phone: stacks in reading order, each item indented one small step further than the last so the diagonal survives at the narrower width.

Fits: a list of three to six short items that name a slide, a build-up or a sequence — signs, symptoms, stages — each one or two lines; the direction typographic, empty or hard-edged.

Not fit: items longer than two lines; more than six; a list whose order carries no meaning; the direction dense or photographic.

How it looks:

• Desktop: the band splits unevenly, edge to edge. A photo of things in the room — no person — fills a little over the left third, full-bleed on that side and flush to the band's top and foot; the rest is one flat tinted ground. Centred on that ground's own axis: a short heading, itself the link onward, one line of body text, then the list — three names at display scale stacked with a small mark of the brand's between each pair, like courses on a menu. No copy under any name, no button; the list is the band. A small line-drawn icon sits alone in the top-right corner. The largest thing is the photo; nothing lands on it.
• Phone: the tinted ground and its list come first at full width — heading, line, the names with the marks between — and the photo drops beneath them, full width and cropped shorter; the icon keeps the top-right corner.

Fits: an environment row with no person in it whose can says tall column or full-bleed 1440, its subject readable at a third of the width; three to five names of two or three words — areas, specialisms, who it is for — with nothing to say under them; a brand with a small mark to set between; the direction warm, soft, classic or quiet.

Not fit: names that each need a line of explanation, or more than five; a portrait in the photo, which makes it an about; the direction dense, loud or typographic, where a centred list on an empty ground is too soft.

How it looks:

• Desktop: a flat band on the page ground, no photo. The left third is a lockup whose art is a number: one short line of small tracked caps above, then the figure — the largest thing on the band, taller than the paragraph beside it, flush left — then the rest of the sentence as four or five short lines of the same small tracked caps beneath it, the whole reading as one sentence with the number blown up in its middle. A short vertical rule hangs in the gutter above and below the lockup, framing it top and bottom. The right two-thirds holds a paragraph at the top on the page's centre axis and one large sentence at the foot, running to the right margin. Nothing crosses.
• Phone: the figure lockup first at full width, the figure still the largest thing; then the paragraph and the sentence in reading order.

Fits: a positioning line built around one number the reader should keep — a share, a count, a year — in a sentence that splits naturally before and after it; the direction typographic, hard-edged or quiet.

Not fit: no number in the copy, or several competing ones; the direction photographic or soft.

How it looks:

• Desktop: a flat page ground split in halves. The left half is a stack with depth in three layers: a dark plate, tilted a few degrees, running off the left edge; the first photo on it, tilted with it and inset from the plate's edges so the plate reads as a thick border; and a second photo, square to the page, in front of the first's lower right corner and hanging below the plate. A strip across the top edge of each photo holds it down. Both photos are in the same tone so they read as prints from one roll. The right half is the words: the heading on two lines in the accent, then three to five short paragraphs in a narrower column indented in from the heading's left edge, then the page's button aligned to that column.
• Phone: the stack first at full width, the plate still running off the left edge; then the heading, the paragraphs and the button.

Fits: two photo rows, one wide and one tall column, in the same tone, their subjects away from the corner where they overlap; a heading of one sentence and a few short paragraphs; the direction warm, photographic or personal.

Not fit: one photo, or two in different tones; the direction hard-edged, minimal or quiet; photos whose subjects would be hidden at the overlap.

How it looks:

• Desktop: flat, on the page ground, wide and mostly empty. At the left gutter a small greyscale portrait, plated, a full-length seated figure about a sixth of the page wide, its top level with the first line of copy. The copy starts past the page's centre and runs to the right gutter: a statement at display scale in italic, two short paragraphs, the first line indented like the opening of a chapter; beneath it, in the same measure, two narrow columns of body text side by side. Between the portrait and the copy a fifth of the page is empty ground, and the copy stops well short of the band's foot. The largest type is the statement; nothing crosses anything.
• Phone: the copy first at full width — the statement, then the paragraphs in one column — and the portrait after it, set to the right half of the screen.

Fits: a positioning beat addressed to the reader — a statement of who this is for and a paragraph or two on what the work is; one portrait row tall column, a full-length or seated figure that reads small, greyscale so it sits quiet; the direction empty, quiet, editorial or typographic.

Not fit: a portrait that needs to be large — a headshot, a face; copy without a statement to set at display scale; the direction dense, photographic or loud, where the emptiness reads as a gap.

How it looks:

• Desktop: a flat band on the page ground whose other content — a heading top-left and a list in the middle — stops short of the right third, leaving the bottom-right corner empty. Into that corner goes a slogan of two or three words at the largest scale on the band, set as an L: the last word turned to read upward along the right edge, flush to it; the first words horizontal along the band's foot, flush right, meeting the turned word at the corner. Nothing crosses it; it is the band's punctuation, not its heading, and it reads after the list.
• Phone: the L unfolds — both parts horizontal at the foot of the band, on two lines, flush right.

Fits: a slogan of two or three words whose last word can stand alone; a band whose content leaves a corner empty — a list or a paragraph that does not reach the right margin; the direction loud, typographic or hard-edged.

Not fit: a slogan longer than three words; a band whose content fills its width; the direction soft or quiet.

How it looks:

• Desktop: a flat band on the page ground, tall and mostly empty, with no photo. Three pieces of copy descend it like steps: the heading, caps on two lines at display scale, in the top-left; a short paragraph in a narrow measure, starting on the page's centre axis about a third of the way down; and one sentence at large scale at the foot, starting on the same centre axis and running to the right margin — the largest thing on the band, so the hierarchy inverts as the eye goes down. The gutters carry the band's number, small, at the top-left, a small dot level with the sentence's last line, and a one-phrase label with a dot at the far right, level with the heading. Nothing crosses anything.
• Phone: stacks in reading order at full width; the number stays in the top-left corner.

Fits: a positioning beat with three pieces of copy — a heading of a few words, a short paragraph, one sentence worth the largest type; a page whose positioning runs as several such beats in a row, each numbered, differing only in ground; the direction quiet, empty or typographic.

Not fit: a positioning beat that has a photo; copy with no single sentence to end on; the direction dense or photographic.

How it looks:

• Desktop: one layer behind, one in front. Behind: a photo, full-bleed, running off all four edges of the band, its backdrop pale and close to the page ground so the band hardly reads as a photo at all — the figure holds the left two-thirds, cropped by the top and bottom edges. In front: one flat slab in the accent, square-cornered, standing in the right third, inboard of the right edge and clear of the top and the foot, level with the figure's shoulders. The slab holds the whole statement, four or five lines at display scale, left-aligned, with air around it; no heading, no button, nothing else on the band. The words never touch the photo; the slab does.
• Phone: the photo stays full-bleed and tall; the slab keeps its place in front of it, at the right over the figure's lower half, narrower and on more lines.

Fits: a portrait or action row wide, the subject in the left two-thirds on a plain pale backdrop (the caption names it), can full-bleed, with empty backdrop at the right for the slab to sit on; one statement of two or three sentences and nothing else; the direction bold, warm or playful.

Not fit: a photo whose subject is centred or fills the frame, since the slab would cover it; a dark or busy backdrop, which turns the slab into a caption box; copy that needs a heading; the direction quiet or minimal.

How it looks:

• Desktop: flat page ground with one crossing. The band splits in halves. The left half is a column: the heading at display scale, left-aligned, then two short paragraphs, then air. The right half holds the photo, plated, inboard of the right edge and of the band's top and foot. Then the crossing: a rounded slab in the accent, wider than the left column, holding the statement on four lines at display scale, centred; it sits in the lower half of the band and its right end runs in front of the photo's lower left corner, covering a fifth of the photo's width. The photo is the largest thing on the band; the slab sits in front of it.
• Phone: no crossing: the photo first, small and centred; then the heading and the paragraphs; then the slab at full width under them, the statement on more lines.

Fits: a portrait or place row tall column whose lower left corner can be covered — the subject in the upper right of the frame; a heading of a few words, two short paragraphs, and one statement of two or three sentences that can be set large; the direction warm, contemporary or playful.

Not fit: a photo whose subject reaches into its lower left corner; a statement too long to set at display scale; the direction quiet, classic or typographic.

How it looks:

• Desktop: a flat band that takes the ink as its ground, no photo of a person. The words hold the left four fifths: the heading on two lines at display scale, left-aligned, a little above the middle, and two short paragraphs under it in a measure that stops well short of the right. The last fifth is a vertical slice of a picture — a pattern, a texture, a detail — full height, flush to the right edge and running off it, cut square by the band's top and foot, so it reads as the edge of something larger the page has cropped. No words land on the slice; the largest thing is the heading, the brightest the slice.
• Phone: the words first at full width on the ink; the slice turns to lie across the foot of the band as a short full-width strip, still cut square.

Fits: positioning copy of a heading and a paragraph or two with no action; a work, environment or detail row — or a brand pattern — that survives being cut to a tall narrow slice from any part of its frame and reads bright against the ink; a page that alternates its grounds; the direction loud, warm or hard-edged.

Not fit: material that is only portraits, whose subject a fifth-width slice would cut through; a positioning beat that needs a whole photo or a list; the direction quiet, minimal or typographic.

How it looks:

• Desktop: a flat band on the page ground carrying two statements, each a plated photo tall column and a block of words — a heading at display scale, a bold lead line, a paragraph. The pairs are not two rows. The left column holds the first photo and, under it, the second statement's words; the right column holds the first statement's words and, under them, the second photo. The right column starts lower than the left, so the second photo begins beside the lower half of the first, and the second statement's words sit beside the second photo's lower half. Read across, it is a zigzag — photo, words / words, photo — with each thing set half a step below its neighbour. No photo touches an edge; the two photos never touch each other; the largest things are the photos, the largest type the headings. A single centred line at the foot of the band hands over to the next.
• Phone: the pairs stack in reading order — photo, words, photo, words — at full width.

Fits: two statements of equal weight, each with a heading, a lead line and a paragraph; two photo rows tall column or near it, one for each; the direction warm, soft, classic or photographic.

Not fit: one statement, or three; a single photo; the direction dense or loud, where a plainer grid says more.

How it looks:

• Desktop: flat, on the page ground, in three parts that step down and to the right. At the left, a small caps eyebrow, then the headline at display scale on two lines, the second stepped right, starting under the first's middle and ending beyond it; under the headline, three short paragraphs at the gutter. In the middle, the principles as a column of rows: a short caps label at the left, a small mark, a one-sentence gloss at the right — no rules. At the right, two greyscale portraits of the same person, plated, not touching: the larger high, in the right third; the smaller lower and further out, flush to the right gutter. The photos are the largest things.
• Phone: the eyebrow, the headline and the paragraphs centred, the headline's step kept; the principles alternate left and right down the screen, each mark above its label; the two portraits last, the first flush left, the second flush right and lower.

Fits: a positioning beat of a headline, a short story and four to six named principles with a gloss each; two portrait rows tall column of the same person in one tone, one of them able to read small; the direction editorial, quiet, typographic or classic.

Not fit: one portrait, or two in different tones; fewer than four principles; the direction loud, dense or photographic.