hero.collage-scattered · Scattered collage

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

Rule
Three photos of different crops are scattered on offset grid rows (4:5 in 1–4, 1:1 in 9–12, 3:4 in 7–9); a slightly rotated display headline crosses them in 2–11; subhead + CTA in 1–5 and a rotated caption in 10–12 close it.
Slots
gallery1, gallery2, headline, gallery3, subhead, cta, caption
Grid areas
photo1 1-4 · photo2 9-12 · headline 2-11 · photo3 7-9 · copy 1-5 · caption 10-12 (12-column grid, 1-based inclusive spans)
Notes
Place items with explicit rows so they overlap; later items paint on top. Where the headline crosses a photo, give the words an inline background highlight in bg so they stay AA. Each photo gets its own small rotation (−3° to 4°) in the real build.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)

Do

  • Scatter three photos with different aspect ratios and treatments on offset rows and columns.
  • Run the headline across 2–11, rotated about −2°, painting over the photos.
  • Highlight the headline words with an inline bg-coloured background where they cross photos.
  • Rotate each photo by a small, different angle (−3° to 4°).

Don't

  • Don't align the photos to a common top edge or size.
  • Don't use more than three photos in the hero.
  • Don't let the headline lose contrast on a photo.

Phone width

  • Show one photo (the first) at 4:5, then the headline unrotated, subhead and CTA; hide the other two photos.

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

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "hero.collage-scattered",
  "kind": "hero",
  "grid": {
    "photo1": "1-4",
    "photo2": "9-12",
    "headline": "2-11",
    "photo3": "7-9",
    "copy": "1-5",
    "caption": "10-12"
  },
  "slots": [
    "gallery1",
    "gallery2",
    "headline",
    "gallery3",
    "subhead",
    "cta",
    "caption"
  ],
  "notes": "Place items with explicit rows so they overlap; later items paint on top. Where the headline crosses a photo, give the words an inline background highlight in bg so they stay AA. Each photo gets its own small rotation (−3° to 4°) in the real build.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "minVh": 1,
    "children": [
      {
        "el": "media",
        "span": "1-4",
        "rowSpan": "1-2",
        "slot": "gallery1",
        "aspect": "4/5",
        "treatment": "photo"
      },
      {
        "el": "media",
        "span": "9-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "slot": "gallery2",
        "aspect": "1/1",
        "treatment": "grayscale"
      },
      {
        "el": "media",
        "span": "7-9",
        "rowSpan": "3-4",
        "mobile": "hide",
        "slot": "gallery3",
        "aspect": "3/4",
        "treatment": "duotone"
      },
      {
        "el": "text",
        "span": "2-11",
        "rowSpan": "2-3",
        "alignSelf": "center",
        "slot": "headline",
        "role": "display",
        "step": 5,
        "leading": "tight",
        "maxCh": 20,
        "rotate": -2
      },
      {
        "el": "box",
        "span": "1-5",
        "rowSpan": "4-4",
        "alignSelf": "end",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 34
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "text",
        "span": "10-12",
        "rowSpan": "4-4",
        "color": "textMuted",
        "alignSelf": "end",
        "slot": "caption",
        "role": "small",
        "rotate": 3
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page