hero.midcentury-boomerang-stagger · Boomerang stagger

A hero pattern from Mid-Century Modern, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.midcentury-boomerang-stagger". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A diagonal from top-right to bottom-left: an arched photo on 8–12, a circular photo dropping down on 5–8, the headline top-left on 1–7 and the CTA bottom-left on 1–4; a boomerang triangle points into the stagger.
Slots
headline, subhead, heroImage, image, cta
Grid areas
headline 1-7 · arch 8-12 · subhead 1-4 · circle 5-8 · boomerang 9-10 · cta 1-4 (12-column grid, 1-based inclusive spans)
Notes
The circle photo overlaps the bottom of the arch by one column, so the eye travels diagonally. At phone width: headline, subhead, arch, circle, CTA.
Tokens
bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A diagonal from top-right to bottom-left: the headline top-left on 1–7, an arched 4:5 photo on 8–12 across rows 1–2, the lead on 1–4, a circular duotone photo on 5–8 across rows 2–3 overlapping the arch's bottom, an orange boomerang (triangle rotated −30°) on 9–10, and a large primary button bottom-left on 1–4.

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