hero.split-offset-stack · Split, offset stack

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.split-offset-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Three blocks step down the grid and overlap: the image in 5–12 (rows 1–2), a solid headline panel in 1–7 that covers the image's lower-left corner (rows 2–3), and a ruled subhead + link in 9–12 (row 3).

Slots

heroImage, eyebrow, headline, subhead, cta

Grid areas

image 5-12 · headline 1-7 · aside 9-12 (12-column grid, 1-based inclusive spans)

Notes

Use explicit grid rows so the headline panel overlaps columns 5–7 of the image; the panel has the page background so the headline never sits on the photo. Later children paint above earlier ones.

Tokens

bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Do

Place the image in columns 5–12 of rows 1–2 and the headline panel in columns 1–7 of rows 2–3, so they overlap by three columns.
Give the headline panel the page background colour (bg) and padding so the headline reads on a solid field.
Set the headline at display step 7, heavy weight, two or three lines.
Put the subhead and a text link in 9–12 below a top rule, aligned to the panel's baseline row.

Don't

Don't align the three blocks to one edge — the stair-step offset is the pattern.
Don't let the headline sit directly on the photo without the solid panel.
Don't add a filled button row; one arrow link is the action.

Phone width

Stack image (4:3), headline panel, then subhead + link; remove the overlap.
Drop the headline to step 6 so it fits in three lines at 375 px.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project