Pattern Paste
Subscribe

Core Patterns How it works

FreeStandard

Steps run

A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards.

The thread is currentColor, so it follows your text. Below 782px the columns stack and the same two hairlines become the rules between the steps.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The three titles. They are one or two words on purpose; the column is about 350px wide at 1400 and a long title breaks into three lines and takes the thread's air with it.
  2. The copy. One sentence each, 80 to 100 characters.
  3. The heading and the eyebrow. The heading is built for eight to twelve words.
  4. The number of steps. Three is what the grid is tuned for, and it is tuned for three because of the tablet, not because of the desktop.
  5. The closing note. The last line is fine print about timing.

The signature moment

The thread between the numerals

The signature is the connecting rule. Between each pair of numerals sits a narrow column carrying nothing but a 1px hairline, set at numeral height rather than under the type. So the eye runs 01 --- 02 --- 03 and reads the row as one sequence, not as three independent cards that happen to be numbered. Remove the two hairlines and the section becomes a generic three-column grid; that is the test of whether the signature is doing any work.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • Your spacing scale.

Set by this pattern

  • Full bleed with its own measure.
  • The five-column grid.
  • Three steps, because four will not hold a sentence on a tablet.
  • The band's side padding and the gutters are clamp(), not presets.
  • Where the thread sits.
  • The display ramp.
  • Contrast.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

A process section: three steps across one full-bleed band, each a display numeral over a short title and one packed line of copy. It is the horizontal answer to "how does this work", built to sit between a features section and a closing ask without borrowing air from either.

The signature moment: the thread between the numerals

The signature is the connecting rule. Between each pair of numerals sits a narrow column carrying nothing but a 1px hairline, set at numeral height rather than under the type. So the eye runs 01 --- 02 --- 03 and reads the row as one sequence, not as three independent cards that happen to be numbered. Remove the two hairlines and the section becomes a generic three-column grid; that is the test of whether the signature is doing any work.

The thread is a structural mark, so it is currentColor and never an accent. It cannot blank, it inverts with the band, and it follows whatever colour your theme puts the text in.

What the thread becomes at 390

Core stacks columns below 782px, and the thread columns stack with everything else. Each hairline goes full width and lands between the step above it and the step below it, so the same two rules that threaded the run horizontally become the two rules that divide it vertically. The sequence still reads; it just turns through ninety degrees. Nothing is hidden and nothing is duplicated: there is exactly one set of hairlines in the markup and it does both jobs.

Make it yoursVariations and the edits to make first

The variation

  • Night run (variations/night-run.html). The colour axis, and the only colour move the contract can guarantee: the ground becomes your contrast and the type your base. The thread inverts with it for free, because currentColor follows the type. Nothing else moves, so the buyer is choosing loudness and not a second design.

What to change first

  1. The three titles. They are one or two words on purpose; the column is about 350px wide at 1400 and a long title breaks into three lines and takes the thread's air with it.
  2. The copy. One sentence each, 80 to 100 characters. Longer and the three columns stop reading as a row.
  3. The heading and the eyebrow. The heading is built for eight to twelve words. The eyebrow is optional; delete it and the run still reads.
  4. The number of steps. Three is what the grid is tuned for, and it is tuned for three because of the tablet, not because of the desktop. For four, add one step column and one thread column and drop the step widths to about 21%, then measure the copy at 820 before you ship it: that is the shape this pattern was cut back from. Always add or delete numerals and threads in pairs, or the run ends on a hairline.
  5. The closing note. The last line is fine print about timing. Delete it if the section is not about a schedule.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The numerals, the titles and the copy are all set in yours.
  • Your colours. The band asks for base and the type asks for contrast, the two slugs every stock block theme defines, each on a fallback chain ending on a colour WordPress itself guarantees. The thread names no colour at all.
  • Your spacing scale. Band padding, the drop to the run and the gaps between the columns are spacing presets, so a theme with a generous scale gets a taller section without you touching it.

What it decides for itself

  • Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so it is a section rather than another column of text, and it states its own ground and its own vertical padding rather than relying on whatever section sits above it.
  • The five-column grid. Three step columns at 28% with two 8% thread columns between them. The step columns are deliberately narrow: the copy is meant to be one dense paragraph, not a description.
  • Three steps, because four will not hold a sentence on a tablet. It ran four at first. A Columns block does not stack until 782px, so at 820 the row was still four steps and three threads: measured in Twenty Twenty-Four, each step had about 91px and its sentence laddered to 14 characters a line over eight lines, in every theme measured. Four steps in one row cannot be rescued by narrowing the threads, because the widths are percentages of the same container. Three can, and does, with room to spare.
  • The band's side padding and the gutters are clamp(), not presets. Every other spacing in the section is your scale. These two are not, because they are what is left over after them: in Twenty Twenty-Four spacing|40 between seven columns took 324px out of a 754px band, and a step column cannot give back what the gutters have taken.
  • Where the thread sits. The hairline's top margin is a clamp() tuned to roughly half the numeral's line box, so it crosses the numerals at their own height at every width above the stacking point rather than sliding under them.
  • The display ramp. The numerals are a clamp() at line-height 0.85 with tight negative tracking, against a tracked uppercase eyebrow and 15px-floor copy. The scale collision between the numeral and its own caption is what gives the run its rhythm; the thread is what turns the rhythm into an order.
  • Contrast. Everything readable is a contrast-chain on a base-chain ground (inverted in the variation). The numerals are display-size and are claimed at the 3:1 floor; the titles, the copy and the closing note are body and are claimed at 4.5:1.

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(3.5rem, 6vw, 5rem)
Technical notesBlock mechanics, responsive behaviour and constraints

Notes

  • Core blocks only: group, paragraph, heading, columns, column, separator. No plugin, no script, no stylesheet, nothing to keep updated.
  • Every separator carries is-style-wide. Without it Twenty Twenty-Four renders a separator as a centred 100px stub, and the thread would be two dashes in the middle of the gaps rather than two rules across them.
  • Every colour is a fallback chain ending on a colour core guarantees, so nothing in the band can resolve to nothing.
  • The preview shows stock-theme colours. Your site resolves whatever your theme.json and your Global Styles say, which is the point.

Questions

Steps run: common questions

Does Steps run need a plugin?

No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install.

Will Steps run match my theme?

Choose by variation. Paper run and Night run take your theme’s palette; Denim and lemon and Folio bring its own colours.

How many variations does Steps run have?

4: Paper run, Denim and lemon, Folio and Night run. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Steps run free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

8,202 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">How it works</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.75rem, 3.2vw, 2.75rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--x-large, clamp(1.75rem, 3.2vw, 2.75rem))">Three steps, and you always know which one you are on.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70"},"blockGap":{"top":"var:preset|spacing|50","left":"1.5rem"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">01</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Brief</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One call, half an hour. We write down what the site has to do, and what it must never do.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:currentColor;color:currentColor"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">02</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Build</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One page first, so the argument is about the real thing, then the rest of it section by section.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:currentColor;color:currentColor"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">03</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Hand over</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">You get the keys, a short recording, and a month of us on the end of an email.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:var(--wp--preset--spacing--60);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Most projects run four to six weeks. Nothing moves to the next step until you have said so.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Variation: Folio
10,483 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#141517","text":"#efe9df"},"spacing":{"padding":{"top":"clamp(4rem, 8vw, 7.5rem)","bottom":"clamp(4rem, 8vw, 7.5rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#efe9df;background-color:#141517;padding-top:clamp(4rem, 8vw, 7.5rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(4rem, 8vw, 7.5rem);padding-left:clamp(1.25rem, 4vw, 4rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Ada Lindqvist / The day</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"1.25rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2rem, calc(1.3rem + 2.6vw), 3.25rem)","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.08"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:#efe9df;margin-top:1.25rem;margin-bottom:0;font-size:clamp(2rem, calc(1.3rem + 2.6vw), 3.25rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.08">How a shoot day runs.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"clamp(3rem, 6vw, 5rem)","bottom":"0"},"blockGap":{"top":"2.5rem","left":"1.5rem"}}}} -->
<div class="wp-block-columns" style="margin-top:clamp(3rem, 6vw, 5rem);margin-bottom:0"><!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"#c8432b"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"400","letterSpacing":"-0.04em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:#c8432b;margin-top:0;margin-bottom:0;font-size:clamp(3.5rem, 6vw, 5rem);font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:-0.04em;line-height:0.85">01</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.5vw, 2rem)","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.25rem, 1.6vw, 1.5rem)","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"1.2"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#efe9df;margin-top:clamp(1.5rem, 2.5vw, 2rem);margin-bottom:0;font-size:clamp(1.25rem, 1.6vw, 1.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.01em;line-height:1.2">The recce</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0.75rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0.75rem;margin-bottom:0;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">A walk round the week before with a notebook and a compass. I work out where the light falls at nine and at four, and what has to move.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"#b9bcc2"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:#b9bcc2;color:#b9bcc2"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"#c8432b"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"400","letterSpacing":"-0.04em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:#c8432b;margin-top:0;margin-bottom:0;font-size:clamp(3.5rem, 6vw, 5rem);font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:-0.04em;line-height:0.85">02</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.5vw, 2rem)","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.25rem, 1.6vw, 1.5rem)","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"1.2"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#efe9df;margin-top:clamp(1.5rem, 2.5vw, 2rem);margin-bottom:0;font-size:clamp(1.25rem, 1.6vw, 1.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.01em;line-height:1.2">The day</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0.75rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0.75rem;margin-bottom:0;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">First light to last, one place, one day. You see a contact sheet that evening, so nothing that matters is left unshot.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"#b9bcc2"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:#b9bcc2;color:#b9bcc2"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"#c8432b"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"400","letterSpacing":"-0.04em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:#c8432b;margin-top:0;margin-bottom:0;font-size:clamp(3.5rem, 6vw, 5rem);font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:-0.04em;line-height:0.85">03</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.5vw, 2rem)","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.25rem, 1.6vw, 1.5rem)","fontWeight":"500","letterSpacing":"-0.01em","lineHeight":"1.2"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#efe9df;margin-top:clamp(1.5rem, 2.5vw, 2rem);margin-bottom:0;font-size:clamp(1.25rem, 1.6vw, 1.5rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.01em;line-height:1.2">The edit and the files</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0.75rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0.75rem;margin-bottom:0;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">Proofs inside three days, retouched files inside a week, sized for print and the web, with the usage licence written down.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"border":{"top":{"color":"#5b5f66","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"clamp(3rem, 5vw, 4.5rem)","bottom":"0"},"padding":{"top":"1.25rem"},"blockGap":"0"}},"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="border-top-color:#5b5f66;border-top-style:solid;border-top-width:1px;padding-top:1.25rem;margin-top:clamp(3rem, 5vw, 4.5rem);margin-bottom:0"><!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.875rem","fontWeight":"400","letterSpacing":"0","lineHeight":"1.6","textTransform":"none"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:0.875rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0;line-height:1.6;text-transform:none">Weather moves a date, never the price. If the light is wrong on the day, we pick another one together.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Night run
8,570 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.9375rem)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(0.875rem, 1vw, 0.9375rem);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">How it works</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--x-large, clamp(1.75rem, 3.2vw, 2.75rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--x-large, clamp(1.75rem, 3.2vw, 2.75rem))">Three steps, and you always know which one you are on.</h2>
<!-- /wp:heading -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70"},"blockGap":{"top":"var:preset|spacing|50","left":"1.5rem"}}}} -->
<div class="wp-block-columns" style="margin-top:var(--wp--preset--spacing--70)"><!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">01</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Brief</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One call, half an hour. We write down what the site has to do, and what it must never do.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:currentColor;color:currentColor"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">02</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Build</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One page first, so the argument is about the real thing, then the rest of it section by section.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"clamp(1.5rem, 2.4vw, 2.15rem)","bottom":"0"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:clamp(1.5rem, 2.4vw, 2.15rem);margin-bottom:0;background-color:currentColor;color:currentColor"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"28%"} -->
<div class="wp-block-column" style="flex-basis:28%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"typography":{"fontSize":"clamp(3.5rem, 6vw, 5rem)","fontWeight":"700","letterSpacing":"-0.045em","lineHeight":"0.85"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.045em;line-height:0.85">03</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}},"typography":{"fontSize":"var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);font-size:var(--wp--preset--font-size--large, clamp(1.125rem, 1.5vw, 1.375rem))">Hand over</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">You get the keys, a short recording, and a month of us on the end of an email.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|60"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--60);font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Most projects run four to six weeks. Nothing moves to the next step until you have said so.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in How it works

Explore all 9 How it works patterns

Steps ledger rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps ledger

A process set as a printed schedule: a ruled column-head row (No., Stage, What happens) and then five full-width rows, each one a display numeral, a title and a short description in three columns, hairlines in currentColor between them and a closing rule under the last.

How it worksPreview pattern
Steps screens rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps screens

A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence.

How it worksPreview pattern
Process switchback rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Process switchback

Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order.

How it worksPreview pattern