How it looks:

• Desktop: flat, on the page ground, under the nav. The band splits in halves. The words hold the left half, left-aligned: the headline on two lines at display scale, the largest thing in the band; under it two short paragraphs set almost as large; then one small line. No button; the action is the nav's. The portrait holds the right half, standing inboard of the right edge and clear of the band's foot, edgeless: the photo's backdrop is within a shade of the ground, so no rectangle reads and the person appears to sit on the page itself. Nothing crosses; each half keeps to itself.
• Phone: the portrait first, edge to edge and tall, still edgeless; the headline lands on its lower half at the left; the paragraphs and the small line stack under it.

Fits: a portrait row tall column, shot on a plain seamless backdrop, can edgeless — the ground takes the backdrop's colour or comes within a shade of it; the subject seated or full-length and clear of the frame's edges; a headline of a few words and two sentences short enough to set large; the direction warm or contemporary.

Not fit: a portrait on a busy or dark backdrop, or one already cut to a shape — the rectangle would read and the idea is gone; a ground far from the backdrop's colour; a long description; a page that needs its action on the first screen; the direction dense or typographic.

How it looks:

• Desktop: a dark band the height of the screen. It has depth in four layers: the ink; two photographs plated straight on it, one tall at the left sitting high and touching no edge, one wide at the right sitting low and running off the right edge; the headline in caps, the largest type on the page, centred across the band in front of both photos, its first line crossing the tall photo and its last line crossing the wide one; and the action centred under the headline.
• Phone: the tall photo first, the headline crossing its lower edge, the action, then the wide photo.

Fits: two photo rows, one tall column and one wide, their subjects away from where the words cross; a headline of a few words; the direction loud, hard-edged or typographic.

Not fit: one photo; the direction quiet or soft.

How it looks:

• Desktop: a full-bleed photo fills the first screen under a dark scrim, its people towards the left half. It has depth in three layers: the photo; the headline, two lines right-aligned against the right edge in the lower half, in front of the photo, with one short line of body on the same right edge under it; and, along the bottom edge, the headline again in caps at several times its size, in the accent — one line so wide that only a few letters from its middle land on screen, running off the left edge and the right edge, its baseline flush to the band's bottom edge, which cuts it. Nobody reads the echo in full; it is a texture that says the same thing louder. The nav runs in one row across the top, the mark at the left and the action at the right.
• Phone: the photo fills the screen, the headline and its line in the lower half at full width; the echo stays one line along the bottom edge, still running off both sides, fewer letters on screen.

Fits: a hero or environment row whose can says full-bleed 1440, its subject in one half so the words own the other; a headline of a few words with a phrase worth shouting; the direction loud, hard-edged or typographic.

Not fit: the direction quiet or classic; a headline that is a sentence and loses its sense as a fragment; a photo whose subject fills the frame.

How it looks:

• Desktop: a photo filling the band edge to edge, the height of the screen, darkened under a scrim until it reads as a backdrop rather than a picture. Depth in three layers: the photo; the scrim; and the headline in front, two lines in the ground colour, centred on the band both ways, the largest thing on the screen and wider than the person behind it. The person stands centred behind the words, face clear above the first line, body crossed by the second — the scrim is what makes that crossing safe. Nothing else lands on the photo but a small text link at the foot. The nav sits in its own band above the photo, not on it.
• Phone: the photo fills the width; the headline on three lines, still centred on the photo and crossing the person; the link at the foot.

Fits: a portrait or scene row whose can says full-bleed 1440, the subject centred and standing, the frame busy or plain — the scrim covers either, so the caption need not name an empty half; a headline of a few words that breaks into two lines; the direction loud or photographic.

Not fit: a row needs a ground or small; a portrait whose face is the point, which the scrim would dull; the direction quiet, soft or empty.

How it looks:

• Desktop: one layer over another. At the back, a photo fills the band edge to edge with no scrim; the figure is in the upper right with the face clear, and the darkest mass of the picture sits low and central. The nav runs in one row across the top of the photo. In front, centred on that dark mass so the light ink reads without a veil: a small eyebrow line, the headline on four centred lines at display scale, the largest type on the page, and under it two text links side by side, each with an arrow, each over a short rule. No button. The words sit low in the band, below the face, never on it.
• Phone: the photo taller, the nav collapsed; the eyebrow, the headline and the links stack centred, the links one under the other on their rules; the headline climbs over the face, because the dark part is no longer tall enough.

Fits: a portrait row full-bleed with a dark mass low in the frame and the face clear of it — the words need somewhere dark to land without a scrim; a headline of one sentence; two secondary links rather than one button; the direction warm, loud or dense.

Not fit: a bright or evenly lit photo, or one whose dark part is under the face; a page that needs one solid button on the first screen; the direction empty or quiet.

How it looks:

• Desktop: a dark band, taller than the screen, whose ground is close to the portrait's own backdrop, so the plate's rectangle reads only where the light falls on the person. Depth in three layers: the ground; a small portrait plated straight on it, centred on the page's axis, the person full-length, touching no edge, sitting in the upper half; and the headline in front, centred on the same axis — three lines of caps in two faces, the first line in one and the next two in the other and larger, the largest type on the page, wider than the plate on both sides. Its lower two lines cross the lower half of the plate, so the person's legs sit behind the words and the face stays clear above them. The first and last lines are set to the same width. A short paragraph, centred in a narrow measure, sits under the headline; the nav runs in one row across the top.
• Phone: the plate at the top of the band at nearly full width; the headline entirely beneath it, no crossing; the paragraph below.

Fits: a portrait row tall column, full- or three-quarter-length, whose caption names a plain backdrop the ground can match, the subject centred with the lower part of the frame free to sit behind words; a headline of a few short words that breaks into two or three lines, with a turn in it the second face can mark; the direction typographic, hard-edged or quiet.

Not fit: a headshot, or a portrait whose subject fills the frame edge to edge so the words would cross the face; a busy backdrop; a one-line headline; the direction soft or photographic.

How it looks:

• Desktop: the first screen is two photographs side by side, each filling its half from the top of the screen to the bottom, meeting at the centre with no gutter and running off the left, right and top edges. The words sit straight on the photos in the ground colour, on a light veil rather than a dark scrim. The wordmark is centred at the top, straddling the seam. The left photo is a portrait with an empty side, and on that empty side, in place of a headline, sits the whole menu: three small group labels, each with its links listed under it, top to bottom. The headline itself is small — a few words in two or three short lines that step down and across the seam, the first beside the person on the portrait, the next just past the seam on the second photo. The second photo is a scene, not a person; the page's button sits alone in its bottom corner. The largest things on the screen are the photographs; the largest type is the wordmark, and it is not large.
• Phone: the two photos stack, each about half a screen tall, the wordmark and the headline still straddling the seam; the exposed menu gives way to the menu control, and the button stays in the second photo's corner.

Fits: a portrait row tall column whose caption names an empty side — a wall, a doorway — for the menu to sit on, and a second row, environment or work, that can fill the other half at screen height with its subject away from the seam; a menu of several items — the page's beats or its pages — so the map means something; a headline of a few words; the direction quiet, classic or typographic — the page trusts the menu and the photographs, not a headline.

Not fit: a menu of two or three items; a portrait whose subject fills its frame; one photo only; the direction loud.

How it looks:

• Desktop: one layer over another. At the back, a photo fills the whole first screen edge to edge, greyscale and without a scrim, the figure standing in the right half and the left half open. In front of it, two pieces of type only. At mid-height, one sentence in small, tracked caps, centred on two lines, landing on the open half and crossing onto the figure. At the foot, the person's name in one line running from the left edge to the right edge, the largest type on the page, in front of the photo so the figure's legs pass behind the letters; its base sits just above the bottom edge. No nav on this screen and no button.
• Phone: the same, taller: the sentence on three lines at mid-height, the name on one line across the foot, smaller but still edge to edge.

Fits: the brand is the person's name, short enough to set across the width on one line; a portrait row full-bleed, can greyscale, landscape, with the figure to one side and open ground on the other for the sentence; one sentence of positioning; the direction quiet, hard-edged or typographic.

Not fit: a business name, or a long one that would wrap; a portrait cropped tight or square, with no open ground beside the figure; a page that needs its nav or its action on the first screen; the direction soft or dense.

How it looks:

• Desktop: the first screen is one flat colour, the photo's own backdrop, so the person has no rectangle around her. It has depth in three layers: the ground; the person's name on two lines, the largest type on the page; and the person in front of it, centred, three-quarter length, running off the bottom of the screen and hiding part of her own name, which still reads. The headline is one sentence broken into two blocks, one each side of the figure at different heights, one word of each in the accent. The nav runs in one row across the top with no logo, because the name is the logo; the action is the nav's.
• Phone: the name on two lines at full width, the figure under it at full width, the sentence in one block below.

Fits: the brand is the person's name; a portrait row tall column whose ground is transparent or whose caption names a plain backdrop of one hue; the direction loud or typographic.

Not fit: the brand is a business name; the portrait's backdrop is busy; the direction quiet.

How it looks:

• Desktop: the first screen is a photo edge to edge, the person in its upper half against a plain backdrop; no words land on the photo except small ones in its two top corners — the social marks left, one text action right — in the ink, with no scrim. About two thirds down, cutting straight across the screen, a flat band in the ink, with no fade between photo and band. In front of both, the wordmark in the ground colour on two lines, the largest type on the page: the first line entirely on the photo, low, clear of the cut; the second line straddling the cut, its top on the photo and most of it on the band, so the seam runs through the letters. The nav links sit on the band in one row, half of them left of the straddling word and half right, so the word is the middle item of the nav. There is no headline and no button in the first screen; the page's first sentence starts in the next band.
• Phone: the photo shorter and the cut higher; the wordmark's first line straddles the cut instead of the second; the links fold into a menu control and a small copy of the wordmark sits in the top corner over the photo.

Fits: a portrait or environment row whose can says full-bleed 1440, its subject in the upper half and the lower part of the frame plain, so the letters have somewhere to land; a wordmark or the name on two lines, the second short; a nav with an even number of links; the direction photographic, hard-edged or typographic.

Not fit: a page that needs a headline or an action in the first screen; a brand that is a mark with no wordmark; a photo busy where the letters would land; a nav of one or two links.

How it looks:

• Desktop: flat, in halves under the nav's own dark strip. The left half is the photo, full-bleed on that side: flush to the strip above, the left edge and the foot, no radius, the subject turned toward the words. The right half is the page ground, and where a headline would go sits the brand's lockup as the logo row shows it, at display scale, the largest thing on the band; there is no headline sentence. Under it the description in small tracked caps on three lines, then the button, all ranged left on one axis in the half's middle. Nothing crosses the midline; the photo and the words each keep to their half.
• Phone: the photo first at full width under the strip, flush to both edges; the lockup, the description and the button stack under it on the page ground, centred.

Fits: a logo row that reads at display scale — a lockup or a wordmark, not a mark alone; an environment or portrait row tall column or squarer, the subject facing one side so they can look toward the words; a description of one line; the direction warm, classic or photographic.

Not fit: a mark that only reads small, or a person's-name brand with no lockup, where the name would have to be set as type; a headline that must carry an argument; the direction typographic, empty or hard-edged.

How it looks:

• Desktop: flat, on the page ground, the nav in one row across the top. Below it the band splits in halves. The portrait holds the left half, flush to the left edge and running off it: its outer side is square where it leaves the screen and its inner side a full half-round, so it reads as a D pressed against the edge; it touches neither the top nor the foot of the band. The words hold the right half, left-aligned and centred on the portrait's height, top to bottom: the headline on two lines at display scale, a short description, and the action as the last line. Nothing crosses; the photo and the words each keep to their half.
• Phone: the portrait first at full width, still flush to the left edge with its half-round on the right; the headline, description and action stack under it.

Fits: a portrait row tall column or squarer, head and shoulders, the subject near the frame's centre and clear of the side the curve takes; a headline of a few words; the direction soft, warm or contemporary.

Not fit: a row small, or one already cut to a circle; a full-length figure, which the half-round would crop; the direction hard-edged or typographic.

How it looks:

• Desktop: flat, on the page ground, and mostly empty. The nav is two small text groups at the top corners, no logo. Dead centre of the screen a narrow column: a small greyscale portrait plated on the ground, with the headline broken around it — two short lines above the photo set to its left edge, two below set to its right, so the sentence reads down one side, jumps the portrait and lands on the other. Under the column, at the foot of the first screen, the person's name runs edge to edge across the band, the largest type on the page, sitting so low that the fold cuts its feet. No button: the action is the nav's.
• Phone: stacks the same way; the column widens to the phone's width and the name stays on one line across the foot, smaller.

Fits: the brand is the person's name; a portrait row small or tall column on a plain ground, greyscale so it sits quiet; a headline that is one short sentence, breakable into four lines of two or three words; the direction empty, quiet or typographic.

Not fit: the brand is a business name; a long headline; a page that needs its action on the first screen; the direction dense or loud.

How it looks:

• Desktop: the band before is in the ink and this one is on the page ground, and the seam between them is not a line but a shallow arc, high at the centre and low at the edges, as if the light band were a dome rising into the dark one. On that seam, centred, a portrait cut as an arch — a rectangle with a full half-round top — straddling it: the rounded top on the dark band, the lower half on the light one, in front of both, so the light band seems to pour out from behind the portrait. Below, flat: a small tracked caps eyebrow naming the person, at the left; the heading at display scale on three or four lines in the left column; the story in two body columns, the first under the heading and the second beside it starting higher; the page's button under the first column. The portrait is the largest thing; nothing else crosses anything.
• Phone: the arc flattens but stays; the arched portrait, narrower, still straddles it; eyebrow, heading, columns and button stack in reading order.

Fits: a portrait row tall column whose subject sits in the upper part of the frame on a plain backdrop, so the arch crops nothing that matters; a story of two or three paragraphs; a page that alternates a band in the ink with one on the ground; the direction soft, warm, classic or photographic.

Not fit: the band before on the same ground — no seam to cross; a small or wide portrait; a one-line story; the direction hard-edged.

How it looks:

• Desktop: flat, on a warm ground a shade apart from the band above. Depth in two layers: the ground, and the person cut out, standing in the right third in front of it. The top of the head overshoots the band's top edge into the band above, and the band below cuts the figure at the shin, so the person seems to stand in front of the page's seams rather than inside a photograph. The words hold the left half, left-aligned: a small eyebrow, the name line on two lines as the largest type in the band, one paragraph, and the page's button as the last line. Nothing crosses; the figure and the words keep to their halves.
• Phone: the words first — the name, the paragraph, the button at full width — then the figure, centred, running off the bottom edge; the overshoot above is gone.

Fits: the brand is the person; a portrait row tall column whose ground is transparent (cut-out) or whose caption names a plain backdrop the band can take as its ground (edgeless); a name line of two or three words; a band above that ends on a plain ground, so the head reads against it; the direction warm, contemporary or loud.

Not fit: the brand is a business name; the portrait small or busy behind the subject; a band above that is a photo or a dark ground; the direction quiet or empty.

How it looks:

• Desktop: flat, on the page ground, in halves. The left half is two photos of the person, stacked and staggered — the upper one, a tall portrait, set to the right; the lower one, wider than tall, set to the left — so their edges do not align. The heading, at display scale on two lines, sits above the upper photo, starting left of it, and its second line lands on the photo's top edge — on the ground first, then in front of the picture. The right half, one column: the name and credential in tracked caps, a short rule, the story in paragraphs, then a pull-quote in caps against a rule at its left, and the page's button.
• Phone: the heading centred at the top, clear of the photos; the two photos become a pair side by side, staggered in height and each running off its own edge — the wide one flush left, the tall one flush right — then the column stacks: name, rule, story, pull-quote, button.

Fits: two portrait rows from one shoot on one backdrop, one tall column and one wider than tall, the tall one with a quiet top edge — wall, ceiling — for the words to cross; about copy of several paragraphs with one sentence worth pulling; a heading of two or three words that breaks in two lines; the direction warm, classic or contemporary.

Not fit: one portrait only, or two from different shoots; a portrait whose subject's head sits at the top edge where the heading lands; the direction empty, hard-edged or typographic.

How it looks:

• Desktop: the band takes the ink as its ground. Depth in three layers: the ground; a darker angular shape across the lower half, like a low ridge; and the person cut out, standing in the left third and overshooting the band's edge — here the bottom, so the band cuts the figure at the shin and they seem to stand in front of the page rather than in a photograph. The name line in caps is the largest type in the band, right-aligned to the right edge on two lines in the accent, with a short introduction right-aligned under it, the credentials inside the prose. No list and no button; the band says who, and the next band says why.
• Phone: the name on two lines at the top at full width, the introduction under it, the figure last, running off the bottom edge.

Fits: the brand is the person; a portrait row tall column whose ground is transparent (cut-out) or whose caption names a plain backdrop the band can take as its ground (edgeless), and whose subject reads at that scale; a name line of two or three words; the direction loud, contemporary or hard-edged.

Not fit: the brand is a business name; the portrait is small or busy behind the subject; the direction quiet or soft.

How it looks:

• Desktop: flat, on the page ground, and mostly empty. One sentence of the about copy — the turning point of the story, in the first person — set in italic at display scale, centred on the page's axis in a measure about two-thirds of the width, four or five lines. Nothing else: no name, no photo, no rule, no button. The ground runs on above and below it for about a screen's worth, so the sentence sits alone in the middle of a screen of nothing, and the emptiness is the device: the page pausing to say one thing. The largest type in the band is the sentence itself.
• Phone: the same, the sentence in more lines at full width, the empty ground under it kept.

Fits: about copy with one first-person line that carries the story on its own; a page that has already shown the person above — a portrait in the hero or in the band before; the direction empty, quiet or typographic; a page that can afford a screen with nothing on it.

Not fit: no portrait anywhere above it; about copy with no single line that stands alone; the direction dense or photographic, where the empty screen reads as a gap.

How it looks:

• Desktop: a flat band on the page ground in three parts down the page. First the introduction, set entirely in the right half on one flush-left axis at the page's centre — the heading in caps on three lines at display scale, naming the person and who they work with, a lighter one-line subline, then a paragraph — with the left half empty. Then a strip of three photographs of the person in one row across the width, equal in size, plated, a gutter between them and the page margins either side, each a different setting. Then the credentials, back on the same right-half axis: five or six short titles stacked one per line at a large scale, no dates and no logos, the last line longer and breaking the pattern; a small dot-and-label in the left gutter level with them; a paragraph under the stack. Everything but the strip hangs from one axis.
• Phone: the heading and paragraph at full width; the strip becomes one row that runs off the right edge, the second photo cut by it; the credentials stack at full width.

Fits: three environment or portrait rows wide or square of the person in different settings; a credentials list of four to six short titles, roles or chapters that need no explanation; the direction quiet, typographic or empty.

Not fit: one portrait only; credentials that need dates, logos or a sentence each; the direction dense.

How it looks:

• Desktop: a full-bleed band in the ink, with depth in two layers: three photos on the band, and the words. The first photo, the largest thing in the band, fills the left third top to bottom and runs off the left edge, plated. A second, smaller photo — another frame of the same person, in a different treatment — is laid in front of the first at mid height, overlapping its inner edge, so the two read as a pile. A third photo runs off the right edge as a narrow sliver showing only part of the person: it is there for the edge, not the face. In the gap, right of centre, a short paragraph in the ground colour with no heading, and the page's button under it, both at the height of the second photo. Nothing is centred and nothing is symmetrical.
• Phone: the sliver is dropped; the first two photos sit side by side, touching, above the paragraph and the button.

Fits: three photo rows of one person — one tall column or wider for the first, one small for the second, and one whose subject can be cut to a sliver; a paragraph of a few lines and one action, no heading; the direction photographic, dense or loud, on a band in the ink.

Not fit: one photo; a heading the band must carry; the direction quiet, empty or classic.

How it looks:

• Desktop: flat, on the page ground. Centred at the top, a title stack like a book's title page: the name, a two-line statement of what the practice is, and a byline naming the person. Under it one paragraph, justified, about two-thirds of the band's width. Then the band splits into three: a column of text on the left, the portrait plated in the middle, a column of text on the right — the two columns about as wide as the portrait and justified so their edges are straight, their tops level with the top of the portrait, the portrait taller than either. The portrait is small for a portrait, and the columns hold it, like a plate set into a page of text. The page's button centred under the three. Nothing is larger than the statement, and the statement is not large.
• Phone: the title stack, the paragraph, then the first column, the portrait, the second column, the button — stacks in reading order.

Fits: a portrait row that still reads at a small size, on a plain backdrop; about copy long enough for an opening paragraph and two columns of similar length; a practice with a one-line statement of what it is and a person to credit; the direction quiet, classic, empty or typographic.

Not fit: a portrait that needs to be large to read; short about copy; the direction loud or photographic.

How it looks:

• Desktop: flat page ground, split in halves. The left half is a stack with depth: at the back, three or four rectangles of different heights and widths — textured slabs and one flat tile — each offset from the last so every one shows an edge, the widest lying at the foot and the tallest standing up behind; in front of them all, the portrait, plated on its own pale backdrop, overhanging the pile on one side and clear of the band's edges, so the pile reads as a board of samples the person stands on. The right half is the words: a short eyebrow, the heading on three lines at display scale, two paragraphs, and the page's button.
• Phone: the pile and the portrait first, kept as a stack but narrowed to the screen, the portrait still in front; then the eyebrow, the heading, the paragraphs and the button in reading order.

Fits: a portrait row tall column on a plain pale backdrop, full-length or three-quarter, can plated; three or four texture or detail rows — material close-ups, a pattern, a flat tone — that survive being cropped to any rectangle; a heading of one sentence and two short paragraphs; the direction warm, tactile or personal.

Not fit: no texture or detail rows to pile up, or a portrait on a busy backdrop that fights the slabs behind it; the direction minimal, quiet or typographic.

How it looks:

• Desktop: flat; the band takes the ink as its ground. The portrait is plated in the right half, flush to the right edge and running off it, held in from the band's top and bottom by an even margin of ground, its two inner corners softened. In the left half, one column about as wide as the visible part of the portrait: a heading that says what the person is to the visitor, not their name; the story in two paragraphs; the page's link under it. The credentials are inside the prose, no list. The heading is the largest type in the band and the photo the largest object; nothing lands on the photo, and the two never touch.
• Phone: the heading, the story and the link at full width, then the portrait under them, still flush to the right edge and running off it, ground showing on its left.

Fits: a portrait row that can be a tall column, other than the one the hero used, on a plain backdrop that the viewport can cut without losing the subject; about copy of two paragraphs with the credentials written into them; the direction warm or contemporary, and a page that alternates its grounds, so the band can take the ink.

Not fit: the only portrait is the hero's and the hero bled it already; a portrait whose subject sits at its outer edge; the direction empty or typographic.

How it looks:

• Desktop: on the page ground, two rectangles overlapping by a sliver. From the back: the ground; a solid panel a shade apart from it, flush to the left edge and running off it, two-thirds of the width; over its right end, a two-by-two grid of photos of the person from one shoot, set tight with no gutter, flush to the right edge and running off it. The grid starts above the panel's top and stops above its bottom, so the ground shows as a step above the panel and another below the grid. The panel carries a greeting, the title as the largest type, the story and the page's button, the credentials inside the prose; nothing lands on the photos.
• Phone: the grid first, at full width inside a margin, then the panel at full width with the greeting, the title, the story and the button — the overlap gone, the two stacked in that order.

Fits: four portrait rows from one shoot on one backdrop, each of which can be a tall column or cropped to one — or one photo that can be full-bleed standing in for the grid; about copy with a greeting line and a title for the person; the direction warm, dense or contemporary.

Not fit: one portrait only, or frames from different shoots that fight in a grid; the direction empty or typographic.

How it looks:

• Desktop: one long flat band on the page ground, opened by a short centred heading and one line under it, then the offers one under another, each as tall as a screen or a little less. Each offer is split in halves — the photos in one half, the words in the other — and the sides swap with every offer, so the eye zigzags down the page. The words are one column, left-aligned within its half, top to bottom: the offer's name at display scale on two lines, a small tracked eyebrow naming what kind of thing it is, a paragraph, the page's button. The photo half is built one of two ways, and these alternate too: a stack — a tall photo plated behind and a smaller one in front of its lower corner, on the side nearer the viewport edge, one of the two flush to that edge and running off it — or a single tall photo standing inboard of the edge. What differs item to item is only the side and the count of photos; the column, the eyebrow and the button repeat exactly. No rule between offers; the gap between them is ground.
• Phone: each offer stacks — the photo or the stack first, keeping its overlap, then the name, eyebrow, paragraph and button — and the alternation goes.

Fits: three to six offers, each with a name, a one-line kind, a paragraph and its own photo — at least one photo row tall column per offer, and for the stacks a second row small of a related subject; photos graded alike so the stacks read as one set; the direction warm, photographic, soft or classic.

Not fit: two offers, where the alternation never lands; offers without their own photos; the direction dense, hard-edged or minimal.

How it looks:

• Desktop: an accent band. An eyebrow line and the heading, the largest type on the page, centred at the top. Under them the offers as a two-column grid with no gutter, photo cells and panel cells alternating so no two photos touch. Each photo fills its square cell, plated, flush against its neighbours, on a different backdrop hue so the grid carries the palette without a swatch. Each panel is the page ground and holds, centred: a tag — a small filled shape naming the offer's kind, no two alike in shape or colour — the offer's name at display scale, and a small icon or the page's button in a corner. Sides alternate row by row.
• Phone: one column, photo then panel, still no gutter.

Fits: two to four offers, each with its own photo row tall column or wider with the subject centred; the direction loud, dense or photographic; a palette with three or more hues.

Not fit: one photo for all offers; long copy per offer; the direction quiet or empty.

How it looks:

• Desktop: flat, on the page ground, split in halves. The portrait holds the left half, plated on a backdrop so close to the ground that its rectangle barely reads, touching no edge of the band. The right half is one column: the section heading at display scale, the largest type on the band, left-aligned, with a hairline under it; then the offers as closed rows at one pitch, each a two-digit numeral and the name at the left and a plus sign at the far right, a hairline under every row. Nothing else shows until a row is pressed and it opens to its body. The last rule sits level with the portrait's foot. No action in the band.
• Phone: the portrait first, shrunk to a small centred picture; the heading under it, then the rows at full width.

Fits: four to six offers, each with a name and a paragraph the surface need not show, so the copy can be long; one portrait row tall column whose caption names a plain backdrop close to the ground, so it sits edgeless beside the rows; the direction quiet, classic or contemporary.

Not fit: fewer than three offers, which leave the portrait tall and alone; offers a stranger must compare at a glance — prices, lengths, formats — since a closed row states none; the direction loud or dense.

How it looks:

• Desktop: flat, on the page ground, in three equal columns. The first column holds only the heading — at display scale on two lines, ranged left, level with the tops of the photos — and under it an ornament that runs off the left edge and the foot. The second and third columns are the offers, one each: a tall photo plated on the ground, level with each other, and beneath each a caption row no wider than its photo — the name in tracked caps at the left, a short rule after it, the button flush to the photo's right edge. Nothing lands on the photos; photo and row are the whole item, no paragraph, no price.
• Phone: the heading centred at the top; then each offer at full width inside a margin — the photo, then its row with the name at the left and the button at the right — one under the other; the ornament stays faint in the margin.

Fits: two or three offers each with its own environment or portrait row tall column; names of two or three words that need no paragraph beside them; a heading of two words; a brand with an ornament to fill the first column, or a direction happy to leave it empty; the direction warm, classic or photographic.

Not fit: offers that need a description or a price beside the name; more than three; one photo for all of them; the direction typographic or dense.

How it looks:

• Desktop: a full-bleed photo fills the band under a dark scrim, its subject in the left half where no words go. Depth in two layers: the photo; and in the right half, top to bottom: the heading in caps at the largest scale in the band, in the accent, two lines, with a one-line subheading under it; then the offers as rows. Each row is a two-digit numeral at the left, the offer's name beside it, a dotted leader running from the name to the row's right end, and an arrow at the end as the link; under the name, indented past the numeral, a two- or three-line description. Row to row only the name, the leader's length and the description change. No button: the arrows are the actions.
• Phone: the photo stays under the scrim; the heading and the rows stack at full width, the numeral kept at the left and the leader shortened to fit.

Fits: three to five offers with short copy; an environment row whose can says full-bleed 1440 with its subject in one half — without one, the band takes the ink as its ground and the rows sit in the same column; the direction hard-edged, contemporary or loud.

Not fit: one or two offers; long copy per offer; the direction warm or soft.

How it looks:

• Desktop: the band before is in the ink, this one is on the page ground, and the seam between them is a shallow arc, low at the centre, so the dark band hangs into this one like a curtain. The offer's object — tall, the thing the offer is: a device showing it, a cover, a product — stands in the right third, straddling the seam, its top on the dark band and more of it on the light one, in front of both. Flat, in the left column: the offer's name as small tracked caps; the heading at display scale on several lines; the page's button. The body sits in the right column under the object. The object is the largest thing in the band and the only thing that crosses.
• Phone: the arc flattens but stays; the object, smaller and centred, still straddles it; name, heading, button and body stack in reading order.

Fits: one offer with an object of its own — a device, cover or product row tall column, can cut-out or on a plain backdrop; a band in the ink before it; the direction soft, warm, contemporary or photographic.

Not fit: an offer with no object, or only a portrait; two or more offers; the band before on the same ground; the direction hard-edged or empty.

How it looks:

• Desktop: one long flat band on the page ground with a thin vertical rule running down its exact centre from under the heading to the band's foot — through every offer and the gaps between them, never broken, ending only where the next band begins. The offers hang off it left and right, alternating sides: photos on one side of the line, the words on the other, and a small solid disc sits on the line at each offer's top edge, like a station on a route, so the rule reads as a sequence and not a divider. The rule is a tint of the accent and stays quieter than the discs; the discs are the only solid marks of the accent in the band. Nothing crosses the line — the photos stop short of it on their side and the words start a margin past it on the other — so the centre of the page is empty but for the rule. The largest things are the photos; the rule is the longest line on the page.
• Phone: the rule and the discs go; the offers stack in order at full width.

Fits: three or more offers that are a sequence or a set — stages, seasons, a path — each with its own photo and a name; an accent that reads as a hairline on the page ground; the direction classic, warm, soft or quiet.

Not fit: two offers; offers that are alternatives rather than a set; the direction dense or loud, where a hairline is lost.

How it looks:

• Desktop: one layer over another. At the back, a dark portrait fills the band edge to edge with no scrim; the face sits in the upper left corner, cut by the top edge, and the darkest mass of the picture fills the right half. In front, on that dark half, the offers as two outlined frames of equal width, stacked with a sliver of photo between, stroked in a hairline and unfilled, so the photo shows through each. Inside each frame, ranged left: the offer's name at display scale, a line or two of body, and the action, centred at the foot of the frame. Nothing lands on the face; the left half is the photo alone.
• Phone: the photo taller; the two frames one under the other, nearly full width inside a small margin, still outlined and unfilled over the photo; the first lands on the face, since there is no dark half beside it any more.

Fits: a portrait row whose can says full-bleed 1440, dark in tone, with the face in one upper corner and a dark mass filling the other half — the frames need a dark field to sit on; two or three offers, each a name, a line and an action; the direction warm, loud or dense.

Not fit: a bright photo, or one with the figure centred; priced offers that want a table; more than three; the direction empty, quiet or typographic.

How it looks:

• Desktop: two grounds stacked: a full-bleed, wordless video of the show over a band in a tint of the accent, a straight seam between them. Two things hang from that seam, in front of both grounds. A device mock showing the offer stands in the left third, tall, its top well up inside the video, most of it on the tint. A card, lighter than the tint, holds the right two-thirds, its top edge crossing a little into the video; on it, centred: the offer's name at display scale, one paragraph, a label, and outlined tiles in two rows, one per platform. An accessory sits on the card's lower right corner, half on, half off. The video is the largest thing.
• Phone: the video at full width; the card under it at nearly full width, its top still crossing into the video, the tiles stacked full width, the accessory at the card's corner; the device mock is dropped.

Fits: one offer with something to show — a show, a podcast, a course — with an environment or scene row whose can says full-bleed 1440 to stand above it and an object row tall column on a transparent ground for the device; a name of a few words, one paragraph, and two or more places to get it; the direction contemporary, warm, playful or photographic.

Not fit: an offer with no full-bleed row to hang from and no object of its own; two or more offers; the direction quiet, minimal or classic.

How it looks:

• Desktop: a row of squares, one per offer, filling the band edge to edge with no gutter — three squares, three photos, each filling its cell and flush against the next, so the row reads as one strip of pictures cut in thirds. Depth in two layers: the photo; and the offer's name centred on it in the ground colour at display scale, on two lines, with no plate or scrim under it — the photos are graded dark and warm enough for the words to read on their own. No eyebrow, no paragraph, no button on the squares: the square is the link. One short centred line on the page ground above the row introduces it, and the band below is a different ground, so the strip sits between two seams.
• Phone: the squares stack at full width, each still square, the name still centred on it.

Fits: two to four offers each with its own photo row wide or near-square whose subject sits clear of the centre where the name lands, graded so a light word reads on it; names of two to six words; the direction photographic, warm or loud.

Not fit: one photo for all offers; photos with a bright or busy centre; names that need a paragraph beside them; the direction quiet, typographic or minimal.

How it looks:

• Desktop: flat, on the page ground. The left third of the band is empty. A small label sits at the top of the middle third. The offers hold the right half as rows: each row is a dot at its left, the offer's name in caps at display scale, a one-line description under it, and a hairline under the pair; the rows share their hairlines — no box, no fill, no photo. Row to row only the words differ. Under the last hairline, flush to the rows' left, the page's button. Below, back at the label's line, a short paragraph on a wide measure, and at the foot a long statement at display scale, the largest thing in the band.
• Phone: the empty third goes; the label, the rows, the button, the paragraph and the statement stack at full width in that order, the hairlines kept.

Fits: three to five offers with a name and one line each; an offer beat with no photo to show — nothing from the Assets table enters the band; a closing statement of one sentence; the direction quiet, empty, typographic or classic.

Not fit: offers with a paragraph each; an offer beat that needs its photos; the direction dense, warm or loud, where the empty third reads as unfinished.

How it looks:

• Desktop: flat, on the page ground. A small label and a short intro paragraph at the top left, in a narrow column. Under them one box ruled in the ink, the band's full width, holding the offers as a table: a header row across the whole width with a label centred in it, then one row per offer. Each row is three cells divided by rules — the offer's name at the left, the body in the middle with the page's button under it, a small photo plated in the right cell, all the photos the same size and the same treatment. The rows share their rules: no gap, no box per offer, no fill, no radius. The name cell and the photo cell are narrow; the body cell is the widest. Item to item only the words and the photo differ. The largest thing is the box itself; the type stays small throughout.
• Phone: the table keeps its rules and each row re-orders — photo, then the name, then the body and the button — in one ruled column.

Fits: three or more offers with a paragraph each; a work, environment or detail row per offer that reads small — the photos are plates in a ledger, not features; the direction quiet, classic, hard-edged or empty — hairlines do the page's structure.

Not fit: two offers; offers with no body copy; the direction loud or soft; a page whose other bands already draw boxes.

How it looks:

• Desktop: the band before ends in a darkened photo and this band is in the ink. The offer's one-word name, the largest type on the page, in the ground colour, is set across the seam between them — most of the letters on the photo, their bottoms on the ink band — nearly the full width of the screen, so the seam runs through the word and the word announces this band from inside the one before. Under it, flat on the ink: the offer's picture, a wide frame of the person at work, plated with soft corners, right of centre and touching no edge; the heading at display scale centred on a few lines; one short centred paragraph; the body in two columns; the page's button under the first column.
• Phone: the name too wide for the screen, clipped at both edges, sitting just under the photo instead of across the seam; picture, heading, paragraph, columns and button stack in reading order.

Fits: one offer with a one-word name; an environment or action row wide that reads at about two thirds of the band's width; a band before it that ends in a photo or a scrim; the direction loud, typographic or photographic.

Not fit: an offer named in more than two words; two or more offers; a band before it on a flat ground of the same colour; the direction quiet.

How it looks:

• Desktop: flat, on the page ground. A heading, the largest type on the band, centred at the top. Under it the offers as equal keyline boxes in one row, stroked in the accent with no fill; inside each, centred and top to bottom: the name, the price as the largest thing in the box, the period, a short description, and the action. The boxes are identical; the marked one carries a round stamp overshooting its top corner.
• Phone: the boxes stack in order, each full width.

Fits: two or three priced offers, each with a name, a price, a period and a description; the direction hard-edged or loud.

Not fit: offers without a price; more than three; the direction soft.

How it looks:

• Desktop: a dark flat band. Centred in the upper half, a statement in small tracked caps, and under it a paragraph on a narrower measure, also centred — the credentials in prose: where the person has worked and for how long, no list, no dates, no reviews. The lower half holds three photos plated straight on the ground in a row, centred on the same axis: the middle one taller and starting higher, the two outer ones smaller and level with each other, so the row reads as a step up and down. All three overshoot the band's foot and land on the next band, straddling the seam. The largest thing is the middle photo; the type stays small.
• Phone: the statement and the paragraph stay centred and grow to the screen's width; the three photos stay in one row, smaller, the middle still higher, still straddling the seam.

Fits: three environment or detail rows from one shoot, one of them tall column for the middle; credentials that read as a sentence or two — settings, years — on a page with no reviews to show; a dark ground the next band contrasts with; the direction warm, quiet or photographic.

Not fit: a page with reviews to show; fewer than three photos, or photos from different shoots; a next band on the same ground, so the overshoot vanishes; the direction typographic or hard-edged.

How it looks:

• Desktop: the band takes the ink as its ground, flat, and reads as three columns. In the left third, ranged left at the page's gutter, a small caps eyebrow and two paragraphs of origin story. To their right, a column of photos, one per year, all cropped to the same landscape rectangle, plated on the ground with even gaps. Beside each photo, the year small and bold on the photo's top edge, and at its bottom edge four one-line statements in a short bulleted list — a fact each, no quotation marks, no names. Newest year first; the rows are one height, and row to row only the photo and the four lines change.
• Phone: the intro first, then the years; the photos alternate flush left and flush right down the page, each year's label and four lines under its photo.

Fits: a proof beat with no review ids, built from what the pack carries — years, credentials, named settings, method — as one-line statements grouped under a date or a heading; one environment or candid row per group that can take a landscape crop; a short origin story; the direction editorial, quiet or dense; a light ground above and below, so the dark band reads as a chapter.

Not fit: a beat that carries reviews; fewer than three groups of facts to date; no photos to pair with them; a page already dark, or a beat above ending dark; the direction bright or loud.

How it looks:

• Desktop: a room photo fills the band edge to edge under a dark scrim, its subject small and off centre. Depth in two layers: the photo; and centred on it a column of one review: the reviewer's face in a small circle at the top, then the pull line at display scale on two lines, then the rest of the quote at body scale on a narrow measure, then the reviewer's name and role in small tracked caps. Previous and next are two thin arrows at the far left and far right, midway down the band. One review shows at a time. The largest thing is the pull line; the face is the first thing read.
• Phone: the photo fills the screen height under the scrim; the face, the pull line, the quote and the name stack centred and smaller; the arrows sit under the name.

Fits: an environment row whose can says full-bleed 1440, its subject small or far from the centre; a photo of each reviewer that can be cut to a circle; three or more reviews each with a short line to pull and a longer body, a name and a role; the direction photographic, warm or loud.

Not fit: reviews without a photo of the reviewer; one review; a quote with no line short enough to pull; the direction quiet, empty or typographic.

How it looks:

• Desktop: a flat band on a light ground, in two parts. The heading in caps, the largest type in the band, sits at the top of the left half on two lines, right-aligned within itself; the right half of the top is empty. Under it a strip of the clients' photos runs across the full width — each the same height and close to square, plated flush against its neighbours with no gutter and no names, running off the left edge and the right edge as if more continue beyond, and they do: the strip slides. Below the strip, on the same ground, the names: a short heading with a rule under it and the names in two columns of small caps, right-aligned in the right half, the left half left empty. The faces are the proof; the names are the index to them.
• Phone: the heading, then the strip slides sideways with two faces on screen, still edge to edge; the names as one column.

Fits: five or more photo rows whose captions name a client or a person the brand has worked with, in any tone — they need not match; a list of names to go with them; the direction loud, photographic or dense.

Not fit: fewer than five faces; clients the brand cannot show; the direction quiet or minimal.

How it looks:

• Desktop: a short flat band on the page ground. The marks sit in two centred rows, each at its own size and in its own colours, with even gaps; the second row shorter and centred under the first. The eyebrow is not a heading above the rows but the first item of the first row — a few words at the row's left end, on the same axis as the marks. Nothing else in the band. Where the page also has a roster of names, they come as two columns of small caps under a short two-line heading with a rule beneath it, right-aligned in the right half of a band of their own, the left half empty — beside the marks if the band is tall, beneath them otherwise.
• Phone: the marks rewrap to three or four per row, still centred; the eyebrow becomes a line above them; the names become one column.

Fits: four or more mark rows (press, client or accreditation) that read at native size on the page ground; an eyebrow of two or three words; a list of names, if the page has one; the direction classic, dense or contemporary.

Not fit: fewer than four marks; marks that need a plate to read on the ground; the direction quiet or minimal, where a logo row is noise.

How it looks:

• Desktop: a flat band on a ground the about band shares — nothing opens it, no heading, no rule; it begins where the story's button ends. One testimonial only, centred: an opening-quote mark alone at the top, large enough to read as an object; the quote as three centred lines at display scale, close to the largest type on the page and set in the accent, one word in it italic; under it the attribution on one small italic line, a name and a described role, no photo, no stars. The measure runs across the middle three-fifths of the band with empty ground either side, and the ground runs on below until the next band changes colour. The quote is the loudest sentence on the page, and it is not the owner's.
• Phone: the mark, the quote and the attribution centred at full width; the quote on more lines, the attribution on two.

Fits: one testimonial short enough for three lines at display scale, from a person whose name and role carry weight; an accent that reads at display size on the page ground; the direction warm, typographic, loud or classic.

Not fit: a quote longer than a few lines; several quotes that want counting; no accent that holds at display size; the direction quiet or minimal.

How it looks:

• Desktop: a tall flat band on the page ground, split: the left half a pile of photographs, the right half the quotes. The pile is one column of overlapping plated prints running the whole height of the band — prints of different sizes, some in colour and some in grey, each laid partly over the one before like snapshots dropped on a table, none touching the viewport edge, none turned. At intervals a larger colour print of the person quoted lies in front, with nothing over it. The right half is the quotes, one beside each front print: the quote at a size between body and display on several lines, the name in small tracked caps, the role in body — no rule, no card, no stars, no marks. The pile carries on between quotes, so the left is never empty while the right rests. The largest things are the front prints; the largest type is the quote.
• Phone: the pile goes; each quote stands under its speaker's photo at full width, in a plain stack.

Fits: three or more testimonials with a name, a role and the speaker's own photo; a further six or more rows of portrait, environment or detail in any tone — the pile is where the mismatched, small and grey ones go; the direction photographic, warm, dense or classic.

Not fit: fewer than three quotes; quotes without a photo of the speaker; fewer than six spare rows for the pile; the direction quiet, empty or minimal.

How it looks:

• Desktop: flat, on the page ground, in halves; a small label at the top left. In the left half, a collage: a sheet of paper — ruled or squared, like a page from a notebook — plated on the ground, and a photo print laid over it at a slight tilt, covering the sheet's lower-left so both show; neither touches an edge. In the right half, a label, then one quote set in caps at a size above the body, then the name and the role on two small lines; a single text control at the right edge advances to the next quote. One quote shows at a time; the collage stays. No portrait of the client, no marks, no stars. The largest thing is the collage; the quote is the largest type.
• Phone: the collage first at full width, then the label, the quote, the attribution and the control.

Fits: two or more reviews of a paragraph each with a name and a role; one detail or environment row that reads small — a hand, a fabric, a corner — not a face; the direction quiet, warm, soft or classic.

Not fit: one review; reviews that want to be counted; no photo that reads small; the direction hard-edged or loud.

How it looks:

• Desktop: a photo of the person at work fills the band edge to edge under a dark scrim, its subject off centre and mostly lost behind the words. Depth in two layers: the photo; and, centred on it, one review in the ground colour at display scale — three lines, an open-quote mark alone above the first line, and under the last line the reviewer's name small and their role smaller. One review is shown at a time; previous and next are two small labels turned on their side at the far left and far right edges, midway down the band, so nothing but the quote sits in the middle.
• Phone: the photo fills the screen height under the scrim, the quote smaller but still centred; previous and next become a row under the attribution.

Fits: an environment row whose can says full-bleed 1440, its subject dark enough or far enough from the centre to sit under the scrim; three or more reviews of two or three lines each, with a name and a role; the direction photographic, loud or warm.

Not fit: no full-bleed row; one review; reviews longer than three lines at display scale; the direction quiet or minimal.

How it looks:

• Desktop: a flat band on the page ground, opened by the band's heading top-left and one large sentence to the right of it. A hairline crosses the full width, and under it the proof: a subheading, then one testimonial only, set on the page's centre axis and running to the right margin. The testimonial is built like a short article — a title in quote marks on one line, taken from the quote's own words; a dashed rule under it the width of the column; the quote as one paragraph; then the attribution in small caps, a first name and a described role rather than an employer. No photo, no avatar, no stars, no mark; the empty ground around the one quote is the point.
• Phone: stacks in reading order at full width; the dashed rule keeps its place under the title.

Fits: one testimonial strong enough to stand alone, with a phrase in it that can be its title; a person whose clients are cited by role, not by name and employer; the direction quiet, empty or typographic.

Not fit: several short quotes the page wants counted; a quote with no line worth a title; the direction dense or loud.

How it looks:

• Desktop: the band takes the ink as its ground, flat, in three columns. In the left third a small caps eyebrow and the origin story in four short paragraphs. To its right a column of photographs, one per review, every one cropped to the same landscape rectangle and plated with even gaps, and not one of them is a face: sky, canopy, water, woods, as if each client had sent a picture of where they were. Beside each photo, the reviewer's name small and bold on the photo's top edge, and the quote in a tint of the ink, its last line toward the photo's foot. Rows are one height; only the picture, the name and the words change.
• Phone: the story first; then each review as its photo with the name and the quote beneath, the photos alternating flush left and flush right down the page.

Fits: three or more reviews with a name each; a photo per review that is not the speaker — environment or detail rows in any tone, or pictures the clients supplied, that take a landscape crop; a short origin story; a light ground above and below, so the dark band reads as a chapter; the direction editorial, quiet or dense.

Not fit: reviews that come with the speaker's photo, which this would hide; fewer than three; no photos to pair with them; a beat above ending dark; the direction bright or loud.

How it looks:

• Desktop: a flat band on the page ground holding three reviews side by side in three equal columns with even gutters, and nothing else — no heading, no photo, no marks. Each column is built the same way: a hairline across its top, the review beneath it at body size, ranged left and set to the column's width, then a second hairline, and the attribution — the name and the place — small under it. The three columns start on one line and the first hairlines run at one height, so the band reads as one ruled table with three cells; only the length of the review differs cell to cell, so the second hairlines and the columns' ends sit at different depths.
• Phone: the three columns stack in reading order, each keeping its two hairlines, so the band becomes a ruled list of three.

Fits: three reviews of similar length, each with a name and a place; no photo and no marks needed; the direction hard-edged, contemporary or typographic.

Not fit: one review, or reviews that differ greatly in length; a beat whose proof is marks or credentials rather than words; the direction soft or photographic.

How it looks:

• Desktop: a flat band on the page ground in two strips. The first, tall: the lockup — name, tagline and mark together — centred on the page's axis, the band's largest thing. Two columns mirror either side of it: at the left, ranged left, the page's links one per row, the page's button under them, then the contact number over a short hairline, the hours under it; at the right, ranged right, a small accreditation mark, a short paragraph of who and where, a social link over a matching hairline and the email under it. Both hairlines sit at one height. The second strip, thin, on a second ground: the copyright at the left, the legal links at the right.
• Phone: one centred column — the lockup, the accreditation mark, the paragraph of who and where, the links one per line, the button, the number over its hairline with the hours under it, the social link over its hairline with the email under it; the thin strip last, its two lines stacked.

Fits: a logo row that reads at display scale — a lockup, or a mark with a wordmark; four to six page links; a contact line, hours or a social link the beat's copy ids carry; a short paragraph of who and where; the direction classic, warm or quiet.

Not fit: no logo, or a mark that only reads small; a page whose footer must carry many links (two mirrored columns hold one short list); the direction hard-edged or typographic.

How it looks:

• Desktop: the band takes the ink as its ground, flat, in three strips divided by hairlines in the ground colour. The first and tallest: the wordmark large at the left, the largest thing in the band, its tagline under it; in the right half, two columns of links, each link on its own row with a two-digit numeral at the row's right end and a hairline under the row, so the column reads as a numbered index; the second column shorter and ending in a row of small social marks. The second strip: two secondary calls side by side, each a short line of words with the page's button after it, a vertical hairline between them at the centre. The third, thin: the copyright line and the legal links at the left, a back-to-top link at the right.
• Phone: the wordmark, then the two columns one after the other with their numerals kept, then the two calls stacked, then the legal line.

Fits: a wordmark or name that reads at display scale; two groups of four to six links; one or two secondary actions (a list to join, a guide to take); the direction hard-edged or contemporary; the beat above ending on a light ground.

Not fit: the beat above already dark; fewer than four links; the direction soft or quiet.

How it looks:

• Desktop: two bands stacked, flat. The upper one takes the ink as its ground from edge to edge and holds the map in three parts on one row: a link column at the left under a small heading, the brand lockup centred — mark above the wordmark above a tagline — and a contact column at the right under its own heading, the two columns mirrored about the lockup and set well inboard of the edges. Under it, a thin strip in the accent runs the full width, no taller than a line, and carries the legal line centred in small, tracked caps. The strip is the last thing on the page, so the page ends on its brightest colour, not its darkest.
• Phone: stacks: the link column, the lockup, the contact column and its icons, all centred; the strip stays at the foot, the legal line on two lines.

Fits: a logo row with a mark and a wordmark that stack, and a tagline; two short link groups; a legal line of one sentence; a direction with a strong accent that can carry small dark text — bold, warm or playful.

Not fit: no accent, or one too pale to read as a strip against the ink; a footer that must hold a form or a newsletter; the direction quiet, classic or monochrome.

How it looks:

• Desktop: not a band so much as the page's last line: the ground continues from the beat above with no rule, a deep space, then one row of four label-over-value pairs, small, across the full content width. Each pair is a muted sentence-case label with a short caps value in the ink under it; the first pair flush at the left gutter, the last ranged right to the right gutter, the two between spaced evenly. On this page the pairs carry the copyright, a back-to-top and two credits, and the map lives in the header, which is built of the same pairs — the page is bookended by one device. No mark, no wordmark, nothing else in the row.
• Phone: the pairs stack in one column, ranged left, each label over its value; the order may change (here the copyright moves last).

Fits: a thin page with little to map — the map as one pair's value (the anchors in a row), the action as another, the credit and the legal line as the rest; a header built the same way; the direction empty, quiet or editorial; the beat above ending on the page ground.

Not fit: a page with many beats to map, or a mark that must show in the footer; a beat above that ends on a dark ground or a photo (the row needs the ground to continue); the direction loud or dense.

How it looks:

• Desktop: a shallow band on a soft ground, flat, entered through a soft waved seam from the band above. One row of three groups, each centred on itself: at the left, a small caps label over three short lines of contact values; in the middle, the wordmark, the band's largest thing, the brand's small mark set between its two words; at the right, a second caps label over three address lines. Under the band, a thin bar on a third ground carries the legal line, centred, the credit as a link at its end. No link columns and no map: the header holds the map; the footer holds where the person is and how to reach them.
• Phone: the wordmark first, centred; the two label groups stacked and centred under it; the legal bar last, its line wrapping to three.

Fits: a brand that is a wordmark, best with a mark that can sit inside it; a practice with a place and a phone — contact and address as the two groups; a page whose map lives in the header; the direction soft, warm or quiet.

Not fit: a brand that is a mark alone, or a long name; a page with many beats to map from the footer; the direction hard-edged, loud or typographic.

How it looks:

• Desktop: a dark band, flat, in three rows. The first row is the wordmark alone, set larger than the screen: its first and last letters are cut by the left and right edges, so the name reads as something the page cannot hold — the largest type on the page. Under it, the map: the mark on its own at the left, in the left quarter, and three columns to its right, each a short italic label over a caps list — two of links, the third the social glyphs stacked. The last row is the small print, centred, one line. Nothing crosses; the wordmark takes the top and everything else sits below it at ordinary scale.
• Phone: the wordmark still runs past both edges, cut the same way, first; under it the two link columns side by side, the mark gone, the glyphs in one row, then the small print centred on two lines.

Fits: the brand is a wordmark — best a drawn one with a silhouette of its own — short enough that losing the first and last letters leaves it readable; a mark to stand at the left; a dark ground; the direction loud, typographic or editorial.

Not fit: a long name, where the crop takes whole words; a brand with no wordmark, or one that must never be cut; the direction quiet or soft.

How it looks:

• Desktop: a dark band in three rows, flat. The top row is the footer proper: at the left, a one-line invitation, the page's actions in a row under it, and a short legal paragraph; at the right, three narrow columns, each a label over a short list. The middle row is the person's name alone, set to run from the left margin to the right margin on one line — the largest type on the page, larger than the hero's headline — with nothing beside or over it. The bottom row is the small print, flush left. Nothing crosses.
• Phone: the top row stacks — the invitation and actions, then the columns as label-and-list pairs; the name still runs edge to edge at whatever size the width allows, the one thing on the page that grows rather than shrinks.

Fits: the brand is a name short enough to fill the width on one line — two words or so; a dark ground; the direction loud, typographic or hard-edged.

Not fit: a long business name; a brand that is a mark with no wordmark; the direction quiet or soft.

How it looks:

• Desktop: a dark band, flat, in two rows. The first row is four columns, top-aligned: two narrow columns of page links at the left, three short lines each; a newsletter form in the third, a label over stacked fields and the action; and, as the fourth column at the right margin, the wordmark — the name broken over two lines at display scale, so the block stands as tall as the form and is the largest thing in the band, the brand's mark tucked into the gap the break leaves. The second row is the small print, one line, centred. Nothing crosses; the name is not a row across the band but a column at its end.
• Phone: the link columns two-up, then the form, then the wordmark still stacked on two lines, ranged left; the small print last on two lines.

Fits: a brand that is a two-word name — or a logo row that stacks — with a mark that can sit inside the break; a page with a newsletter to ask for and four to six links; a dark ground; the direction loud, contemporary or typographic.

Not fit: a one-word name, or a long one, which has no break to stack on; a brand that is a mark alone; a page whose newsletter beat sits directly above the footer, so the form would be asked twice; the direction quiet or soft.

How it looks:

• Desktop: one row across the top of the first screen, flat, on the page ground, no bar, no mark. Each corner is a small note: a short muted label, the value under it in small caps. At the left the label names the list and the value is the page's anchors as one comma-separated line, so the map reads as a sentence, not a menu. At the right the label asks a question and the value is the one action, one word flush to the right edge. The middle is empty: the name is not in the row, the hero beneath carrying it huge, and a small lockup takes the middle only once the first screen has gone.
• Phone: the left note drops; a small two-line lockup takes the top-left corner and the question-and-action note stays at the right.

Fits: a thin page with three or four anchors and one action; a hero that carries the name at the largest scale, so the row needs no mark; a footer built of the same notes; the direction empty, quiet, editorial or typographic.

Not fit: a mark that must show at the top; more than four anchors, where the comma list runs long; a hero without the name in it; the direction loud or dense.

How it looks:

• Desktop: one row across the top of the first screen, flat, on the band's ground with no bar of its own. In the left corner, where a logo usually goes, a two-line tagline in small text: the first line says what the person does, the second, smaller and in tracked caps, says for whom. The name is the wordmark, set as small caps text and centred on the page's axis. At the right, two or three links and a round menu button flush to the edge. The header carries the page's positioning statement, so the hero beneath it is free to be a slogan.
• Phone: the tagline drops out; the wordmark stays centred with the menu button at the right.

Fits: the brand is the person's name; the material has a one-line description of what they do and a phrase for whom; a hero whose headline is a slogan, not a description; the direction typographic or quiet.

Not fit: a logo mark that must sit at the left; no tagline in the material; a hero that already says what the person does.

How it looks:

• Desktop: a full-bleed band in one colour that is also the photo's backdrop, so the person sits on the page and not in a photograph. Flat: the figure fills one half of the band, edgeless, running off the bottom and the side; on the other half, top to bottom, the heading as a two-line lockup — a light caps line, then a heavy caps line in the accent — a short paragraph, and the page's button. A small tracked eyebrow with a drawn mark sits in the top corner over the photo's empty part.
• Phone: the figure becomes the band's background under the words, on a scrim if the tone needs it.

Fits: one action or one offer; a row whose caption names a plain backdrop and whose dominant colours are one flat hue over most of the frame; the direction loud, warm or photographic.

Not fit: the photo's backdrop is busy or the row is small; the palette cannot take a whole band in the backdrop's colour.

How it looks:

• Desktop: a full-bleed room photo fills the band edge to edge, darkened so nothing in it competes. Depth in two layers: the room behind, and in front of it, centred on the page's axis, a solid panel in the page ground — a little under half the band's width and most of its height, inset from the top and the foot by the same margin, so the room shows on all four sides. Everything is inside the panel, centred: the heading in tracked caps on two lines, a subline in the same caps, a short paragraph on a narrow measure, and the page's button. No words land on the photo; the room is a frame around the ask.
• Phone: the room becomes the background at full width; the panel stays in front, inset a little from both edges and taller than the screen, its contents stacked and centred; the room shows only as a margin around it.

Fits: an environment row can: full-bleed 1440 — a room with no person in it, whose caption names nothing that must be seen, since it is darkened to a backdrop; one action with a heading, a subline and a short paragraph; the direction warm, soft or photographic.

Not fit: a photo with a subject to show — a face, a product — that the panel would cover; a page whose about band already set a panel on a room; the direction empty, hard-edged or typographic.

How it looks:

• Desktop: on the page ground, in halves. The left half is mostly empty: one paragraph sits at its middle in a narrow column, the page's button under it, nothing else. The right half is a photograph, plated, filling its half from near the top of the band to near the bottom — a wide scene, a room. In front of it, centred on it, a second photograph cropped to a circle about half the scene's height, showing a close detail — a face, hands — in a different treatment from the scene, one in colour and one in greyscale, so the circle reads as a lens held over the room rather than a hole in it. No words land on either photo. The largest thing is the scene; the circle is what a visitor remembers.
• Phone: the paragraph and the button first, then the scene at full width with the circle still centred on it.

Fits: an environment row wide whose caption names a plain middle — a wall, a sofa, a counter — for the circle to land on, and a second row that can be cut to a circle, a detail or portrait whose subject is centred; one paragraph of invitation and one action; the direction quiet, warm or photographic.

Not fit: one photo only; a scene whose subject sits where the circle would cover it; the hero already cut a photo to a circle; the direction loud or typographic.

How it looks:

• Desktop: two layers on the page ground. First, a panel in the ink, inset from the page's edges by a thin margin of the ground on every side, its corners softened. On it, centred, an oval in the page ground about three fifths of the viewport wide and most of the panel's height — the band's one shape and its largest thing. Everything sits inside the oval, centred and stacked: a small illustration or mark, a one-line eyebrow, the heading at display scale, a short paragraph, the page's action. The oval's ends stop short of the panel's sides, leaving the panel's four corners as ink around it. No photo; nothing crosses the oval's edge.
• Phone: the panel keeps its side margins; the oval stretches tall and narrow, filling the panel's height, the same stack inside it at a smaller measure.

Fits: one action asked plainly, with a heading of a few words and a paragraph of two or three lines; a logo or favicon row small — or a drawn mark — to head the stack, on a transparent or matching ground; a page that alternates its grounds, so the ink panel has the page ground to sit in; the direction playful, warm or classic.

Not fit: an ask that needs a photo of the person; a page already on the ink, where the panel would vanish into the band; the direction hard-edged, minimal or typographic, where a curved shape is foreign.

How it looks:

• Desktop: a short flat band in a tint a step off the page ground, wedged between two other grounds — a full-bleed photo above, the page ground below. Three columns: a photo at the left, the words in the middle, the action at the right. The photo is the idea: it is plated, turned a few degrees off square, and taller than the band, so its top corner overshoots the seam into the photo above and its bottom corner overshoots the seam into the ground below — one object straddling three grounds, the only thing on the page not sitting square. The middle column holds, top to bottom and left-aligned, a small eyebrow naming the kind of thing on offer, the heading at display scale, and a short paragraph; the button sits alone in the right third, level with the heading. Nothing else in the band; the largest thing is the photo, the largest type the heading.
• Phone: the bar becomes a stack — eyebrow, heading, paragraph, the button at full width — and the photo is dropped, or sits square at the top of the bar.

Fits: one free thing or one action; an object or detail row tall column whose subject can be turned without reading as a mistake — a book, a hand on a page, a printed thing; a heading of a few words; a band that sits between two different grounds, so the overshoot has something to cross; the direction warm, soft or photographic.

Not fit: a portrait, which looks tipped over when turned; a band on the same ground as its neighbours, where the overshoot has nothing to straddle; the direction hard-edged or minimal.

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.

How it looks:

• Desktop: a short full-bleed band in the ink, with depth in two layers. Behind: the band's label — "as seen in", "trusted by" — set in the display face at the largest size on the page, wider than the screen so it is clipped mid-letter at both edges, in a tone one step off the ground so it is felt more than read. In front: the marks in one row in the ground colour at native size, evenly spaced, their centre line on the ghost's cap height, so the marks sit inside the letters. Nothing else: no eyebrow, no sentence, no rule. The ghost is several times the marks' height and the band is little taller than the ghost.
• Phone: the ghost stays clipped by both edges; the marks in two or three rows, still across the ghost's middle.

Fits: four or more mark rows that read at native size on the band's ground; a label of two or three words; the direction typographic, loud or hard-edged; either an inverted band or the page ground, the ghost one step off whichever it is.

Not fit: fewer than four marks; a label of more than three words; marks that need a caption; the direction quiet or classic.

How it looks:

• Desktop: flat, on the page ground: nothing but photographs, a wall of them in six rows, nearly edge to edge with a thin gutter between neighbours, running a quarter of the page's scroll. Each row holds two or three photos of differing widths — a narrow, a middle, a wide — and the same three widths change places row to row, so the wall reads as laid by hand rather than on a grid; the rows' heights differ too. Every photo is the owner beside a known face, on a set, on a stage or on a cover: press as pictures, not marks. No heading, caption, rule or button — no type at all; the names are kept for the phone.
• Phone: one column, every photo at full width and the same width; the linked ones gain a play mark and the name at the foot over a dark fade, the rest stay wordless.

Fits: eight or more photo rows whose captions name a known person, a show, a stage or a cover — environment and portrait roles mixed, any tone, wide and tall column alike since the widths rotate; a brand whose proof is who it has stood beside; the direction photographic, loud or dense; a page that can spare a long scroll.

Not fit: fewer than eight photos, where the wall reads as a grid; photos of the owner alone; a press beat that needs marks or a sentence; the direction quiet, minimal or typographic.

How it looks:

• Desktop: a full-bleed band whose ground changes partway down: the top is flat in the ink, and below a straight seam the rest is an environment photo under a dark scrim, edge to edge to the bottom. The headline, centred, at display scale on three lines, starts on the flat part and crosses the seam — its first line straddling it, the second and third on the photo — so the words hold the two grounds together. Under the headline, on the photo, one centred paragraph on a wide measure in the ground colour. There is no form in the band; the list's action is the nav's.
• Phone: the source leaves the band out; built, the seam and the crossing stay, the headline on more lines.

Fits: an environment row whose can says full-bleed 1440 and whose tone is dark; a headline of three lines with a short first line; a page whose join-the-list action lives in the nav; the direction photographic, loud or warm.

Not fit: no full-bleed row; a one-line headline; a form that must sit in the band; the direction quiet or empty.

How it looks:

• Desktop: a full-bleed band in the ink, so the ground is dark. Layers from the back: the ground; a portrait as a plated column flush to the left edge, running the band's full height and about a quarter of its width; in front of it a phone mockup with its top and foot inset from the band's edges, straddling the column's right edge — a quarter of the phone on the photo, the rest on the ground. The copy is centred on the ground to the right, not on the band: a small eyebrow, the title as the largest type, a subline at display scale, a paragraph or two and the action, one under another. Nothing lands on the photo.
• Phone: the photo a block at the top, flush to the top and left edges and about two-thirds of the width; the phone in front of it at the right, still straddling the photo's edge and standing past its foot onto the ground; the copy centred at full width under them.

Fits: a portrait row whose can says tall column; a second row with a transparent ground — a phone, a screen, a cover — that can stand as a cut-out and shows the thing to hear or read; an invitation of an eyebrow, a title, a line or two and one action, no form in the band; the direction dense, loud or photographic.

Not fit: no cut-out row, or a mockup that needs a ground; a form that must sit in the band; the direction empty, quiet or typographic.

How it looks:

• Desktop: a full-bleed strip, a little under half a screen tall, edge to edge: one repeating pattern in two tones of one colour, tiled across it, and nothing else — no words, no photo, no button, no heading. Flat. The strip is the breath between two beats on the page ground, and it recurs: the page carries it twice, the same pattern each time in a different colour of the palette, so one device marks each seam without repeating exactly. The repeat is small enough that several rows show, so it reads as fabric or wallpaper rather than as one picture; its edges are the band's edges, and the bands either side sit flat against it.
• Phone: the strip stays full width and about as tall; only the number of repeats across it changes.

Fits: a brand that owns a pattern — a repeat, a textile, a tile — or a direction that would make one from the palette; a palette with two or more colours to set it in; a page ground the strip contrasts with; the direction warm, classic or soft.

Not fit: no pattern and a direction that would not invent one; a page that already pauses on photos; the direction empty, hard-edged, typographic or photographic.

How it looks:

• Desktop: the band splits in halves, edge to edge, no gutter. The left half is a room photo of the person, full-bleed on that side, flush to the band's top and foot. The right half is a patterned ground — a repeat in the page's palette — with a plain slab floating on it, centred in that half and inset from its edges; the slab carries one slogan of a few words on three centred lines at display scale. No copy, no button, no heading: the slogan is the band. Nothing lands on the photo. The largest thing is the photo; the slab is the only thing read.
• Phone: the photo first at full width; then the patterned ground becomes a panel inset from both edges that overlaps the photo's foot and runs on into the next band, the slab nested inside it.

Fits: an environment row with the person in it whose can says full-bleed 1440, its subject in one half; a brand that owns a pattern, or a direction that would make one from the palette; a slogan of three to six words; the direction warm, soft or contemporary.

Not fit: no pattern and a direction that would not invent one; a slogan longer than three short lines; the direction quiet, empty, hard-edged or typographic.

How it looks:

• Desktop: two layers. Behind: a photo, full-bleed, running off all four edges of the band, a screen tall, its backdrop plain and light; the figure stands centred, head near the top edge, body cropped by the foot. In front: one flat bar in the accent, square-cornered, laid across the band's lower third, inset the same small margin from the left and the right edges so a strip of photo shows at each end. The bar holds the slogan on one line at the largest scale on the page, left-aligned, with the figure's torso hidden behind it and the legs showing beneath. Nothing else on the band: no heading, no copy, no button.
• Phone: the photo stays full-bleed and tall; the bar narrows to a single line in the upper third, over the figure's chest, still inset from both edges, the legs showing below it.

Fits: a portrait or action row tall or wide, full-length, the subject centred on a plain light backdrop, can full-bleed, with a mid-section that can be covered; a slogan of three to five words; the direction bold, playful or warm.

Not fit: a slogan too long for one line at the largest scale; a photo whose subject sits low, or whose backdrop is dark or busy, which makes the bar a caption; the direction quiet, minimal or classic.

How it looks:

• Desktop: a dark band. Depth in three layers: the ground; a portrait plated straight on it, centred on the page's axis, its own light backdrop making it a hard rectangle; and a slogan of two words, one per line, at the largest scale on the band, that sits beside the plate to its right but starts on it — the first letter of each line lands on the photo and the rest on the ground, so the words straddle the plate's right edge. Under the plate, centred on the same axis and no wider than it, a caption: a short caps line, then a short paragraph. The whole sits in the band's upper half; the lower half is empty ground before the next beat.
• Phone: the plate at full width; the slogan beneath it on two lines, no straddling; then the caption.

Fits: a portrait row tall column or square whose caption names a plain light backdrop, so the plate has a hard edge against a dark ground, with the subject centred and the frame's right edge free; a slogan of exactly two words; a caption of one line and a short paragraph; the direction hard-edged, typographic or loud.

Not fit: a slogan longer than two words; a portrait whose backdrop is the ground's colour, so the edge and the straddle vanish; the direction soft or quiet.

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.