hero.maximalist-scrapbook-wall · Scrapbook wall

A hero pattern from Maximalist Collage, 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.maximalist-scrapbook-wall". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A three-column masonry of six to nine taped-up photo cut-outs fills 1–8; a solid accent panel in 9–12 carries the whole message, with a star sticker breaking its top edge.
Slots
items[6..9], headline, subhead, cta
Grid areas
wall 1-8 · panel 9-12 (12-column grid, 1-based inclusive spans)
Notes
Give each cut-out a different frame by position (offset shadow, circle, arch, border) and a mono caption tilted −2°.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5A1F · accent2 #00B671 · Abril Fatface / Syne · radius 4px · space unit 6px (full list in design/tokens.json)
Section
vertical padding step 5

Pattern notes

  • Columns 1–8: six to nine photos in a three-column masonry, each with a different frame by position and a mono caption tilted −2°. Columns 9–12: one solid accent panel at full hero height with an accent2 star at the top, the h1 at step 6 (onAccent) in the middle and the subhead plus a secondary button at the bottom. Phone: panel content first is not required — the wall scrolls horizontally.

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer

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