# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/steps-run.html Section: How it works Access: Free, and free to keep. Needs: 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. Blocks: column, columns, group, heading, paragraph, separator Keywords: steps, process, how it works, numbered, onboarding, timeline ## Variations (4) ### Paper run (the default) Identical markup in every theme. The run on your page ground: your base behind it, your contrast on it, and the connecting hairline in currentColor so it follows the type rather than naming a colour of its own. ### Denim and lemon This variation states its own colours and states its own type: identical in every theme. States a deep denim band, warm white ink and lemon numerals, thread and quote button, set in Arial Black over Arial, for a trade: quote, visit, job done. ### Folio This variation states its own colours and states its own type: identical in every theme. The Folio set’s shoot day on the darkroom slab: three mono frame numerals in safelight red threaded by silver hairlines at numeral height, bone titles in Helvetica and silver copy, a mono note on the weather below. ### Night run Identical markup in every theme. The colour axis, done the only way the contract guarantees: the whole band inverts to your contrast with your base on it, and the thread inverts with the type because it is currentColor. Every theme defines both slugs, so this arrives everywhere. --- ## 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. ## 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. ## 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. ## 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3.5rem, 6vw, 5rem)