hero.brutalist-image-dump · Image dump

A hero pattern from Brutalist, 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.brutalist-image-dump". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A bordered grayscale photo fills 1–7 over three rows; the uppercase headline overlaps it from column 6 to 12 on row 1; subhead and CTA sit in 9–12 below.
Slots
headline, heroImage, subhead, cta
Grid areas
image 1-7 · headline 6-12 · subhead 9-12 · cta 9-11 (12-column grid, 1-based inclusive spans)
Notes
The headline cell overlaps the photo by one column and has the page background, so it cuts into the image.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A grayscale photograph with a 2 px border and a raw caption (file name in mono) fills 1–7 across rows 1–3. The headline (step 7, heaviest weight, uppercase) sits on row 1 from column 6 to 12, on the page background, so it overlaps the photo by one column. Row 2: subhead in 9–12, one column clear of the photo. Row 3: a primary button in 9–11. At phone width the headline comes first, then the photo, subhead and button.

We make complicated companies simple to choose

Corvid Robotics — identity

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