hero.collage-polaroid · Polaroid row

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

Rule
Copy in 1–5; three instant-photo prints overlap in 6–12 on staggered rows: print one in 1–6 of that area, print two lower in 5–10 on top of it, print three high in 8–12. Each is a square photo on a surface-coloured card with a short handwritten-style caption.
Slots
eyebrow, headline, subhead, cta, gallery1, caption1, gallery2, caption2, gallery3, caption3
Grid areas
copy 1-5 · prints 6-12 (12-column grid, 1-based inclusive spans)
Notes
Each print: square image, thicker bottom margin with a short caption. Alternate rotation (−4°, 3°, −2°) in the real build and let neighbours overlap by a third; prints may lift slightly on hover. At phone width keep two prints overlapping and drop the third.
Tokens
bg #F3EBDD · text #2E2A22 · heading #2A1F14 · accent #BC572B · accent2 #A56B00 · Fraunces / Karla · radius 28px · space unit 8px (full list in design/tokens.json)

Do

  • Overlap three prints in 6–12 on staggered rows (one low in the middle, two higher at the sides): square photo, surface-coloured border, thicker bottom margin with a short caption.
  • Tilt prints alternately by small angles (−4° to 5°) and let neighbours overlap by about a third.
  • Keep the copy column (1–5) straight and calm against the prints.

Don't

  • Don't tilt the copy column.
  • Don't use drop shadows heavier than the style allows.
  • Don't line the prints up in a straight row — the stagger is the pattern.

Phone width

  • Copy first, then two overlapping prints at full width; drop the third.

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

Corvid Robotics — identity

Fieldstack — website

Layout tree (as in design/layout.json)
{
  "pattern": "hero.collage-polaroid",
  "kind": "hero",
  "grid": {
    "copy": "1-5",
    "prints": "6-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "gallery1",
    "caption1",
    "gallery2",
    "caption2",
    "gallery3",
    "caption3"
  ],
  "notes": "Each print: square image, thicker bottom margin with a short caption. Alternate rotation (−4°, 3°, −2°) in the real build and let neighbours overlap by a third; prints may lift slightly on hover. At phone width keep two prints overlapping and drop the third.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "center",
    "minVh": 0.9,
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 6,
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 34
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "box",
        "span": "6-12",
        "children": [
          {
            "el": "grid",
            "mobile": "keep",
            "cols": 12,
            "gap": 0,
            "rowGap": 0,
            "children": [
              {
                "el": "box",
                "span": "1-6",
                "rowSpan": "1-3",
                "bg": "surface",
                "gap": 2,
                "pad": [
                  2,
                  2
                ],
                "children": [
                  {
                    "el": "media",
                    "slot": "gallery1",
                    "aspect": "1/1",
                    "treatment": "photo"
                  },
                  {
                    "el": "text",
                    "color": "text",
                    "slot": "caption1",
                    "role": "small",
                    "rotate": -3
                  }
                ]
              },
              {
                "el": "box",
                "span": "5-10",
                "rowSpan": "2-4",
                "bg": "surface",
                "gap": 2,
                "pad": [
                  2,
                  2
                ],
                "children": [
                  {
                    "el": "media",
                    "slot": "gallery2",
                    "aspect": "1/1",
                    "treatment": "photo"
                  },
                  {
                    "el": "text",
                    "color": "text",
                    "slot": "caption2",
                    "role": "small",
                    "rotate": 2
                  }
                ]
              },
              {
                "el": "box",
                "span": "8-12",
                "rowSpan": "1-2",
                "mobile": "hide",
                "bg": "surface",
                "gap": 2,
                "pad": [
                  2,
                  2
                ],
                "children": [
                  {
                    "el": "media",
                    "slot": "gallery3",
                    "aspect": "1/1",
                    "treatment": "photo"
                  },
                  {
                    "el": "text",
                    "color": "text",
                    "slot": "caption3",
                    "role": "small",
                    "rotate": -2
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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