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.