hero.collage-cutout · Cut-out over shapes

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.collage-cutout". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A cut-out photo (person or product on a transparent background) stands in 6–11 in front of a large accent circle; a tilted accent2 bar sits at its foot; a huge uppercase headline crosses in front of its left edge in 1–8; subhead + CTA bottom-left.
Slots
heroImage, eyebrow, headline, subhead, cta
Grid areas
shape 6-11 · cutout 6-11 · headline 1-8 · copy 1-4 (12-column grid, 1-based inclusive spans)
Notes
Use a real cut-out (PNG/WebP with alpha or a CSS mask), not a rectangle photo. Layer order: circle, cut-out, bar, headline on top.
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Do

  • Stand a cut-out subject in 6–11 in front of a big accent circle.
  • Add one tilted accent2 bar at the subject's foot for depth.
  • Run an uppercase headline at step 8 in 1–8 so it crosses in front of the cut-out's left edge.

Don't

  • Don't use a rectangular photo — the cut-out silhouette is the point.
  • Don't add more than two shapes.
  • Don't put the subhead over the shapes.

Phone width

  • Cut-out first on a smaller circle (or none), then headline at step 6, subhead and CTA; hide the bar.

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