hero.maximalist-pileup · Pile-up

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

Rule
A pile of cut-outs on explicit rows: a 4:5 photo in 1–5, a circular pattern cut-out in 8–11, a star sticker in 11–12, the step-6 headline across 3–12 printed over both, a tilted mono sticker label, a blob, and the subhead plus two buttons under it.
Slots
heroImage, image, eyebrow, headline, subhead, cta, cta2, meta
Grid areas
photo 1-5 · disc 8-11 · star 11-12 · headline 3-12 · action 4-9 · tag 10-12 (12-column grid, 1-based inclusive spans)
Notes
Rows: photo 1–4, disc 1–2, sticker label 3, headline 3–5, blob 5–6, action 6. The headline sits above the images (z-index) on paper-coloured cut-out strips (bg role behind each line) so it stays legible over photos. Decorative shapes hide on phones.
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

  • Explicit rows, 92 vh. A 4:5 photo with an offset shadow in 1–5 (rows 1–4); a circular pattern cut-out in 8–11 (rows 1–2); an accent2 star tilted 15° in 11–12 (row 1); a mono sticker label on accent, tilted −6°, in 7–10 (row 3); the headline at step 6 (weight 400, ≤14 ch) across 3–12 on rows 3–5, printed over the photo on paper-coloured strips (`bg` behind each line, `box-decoration-break: clone`) so it stays legible; an accent blob in 1–3 (rows 5–6); in 4–9 on row 6 the lead and two large buttons; a mono meta sticker on surfaceAlt tilted 4° in 10–12. Phone: photo, disc, label, headline, lead, buttons, meta; shapes hide.

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 projectRead case studies

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.maximalist-pileup",
  "kind": "hero",
  "grid": {
    "photo": "1-5",
    "disc": "8-11",
    "star": "11-12",
    "headline": "3-12",
    "action": "4-9",
    "tag": "10-12"
  },
  "slots": [
    "heroImage",
    "image",
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta"
  ],
  "notes": "Rows: photo 1–4, disc 1–2, sticker label 3, headline 3–5, blob 5–6, action 6. The headline sits above the images (z-index) on paper-coloured cut-out strips (bg role behind each line) so it stays legible over photos. Decorative shapes hide on phones.",
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 0,
    "align": "start",
    "minVh": 0.92,
    "children": [
      {
        "el": "media",
        "span": "1-5",
        "rowSpan": "1-4",
        "slot": "heroImage",
        "aspect": "4/5",
        "treatment": "photo",
        "frame": "offset-shadow"
      },
      {
        "el": "media",
        "span": "8-11",
        "rowSpan": "1-2",
        "slot": "image",
        "aspect": "1/1",
        "treatment": "pattern",
        "frame": "circle"
      },
      {
        "el": "shape",
        "span": "11-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "kind": "star",
        "size": "lg",
        "fill": "accent2",
        "rotate": 15
      },
      {
        "el": "text",
        "span": "7-10",
        "rowSpan": "3-3",
        "bg": "accent",
        "color": "onAccent",
        "slot": "eyebrow",
        "role": "eyebrow",
        "transform": "uppercase",
        "rotate": -6,
        "font": "mono"
      },
      {
        "el": "text",
        "span": "3-12",
        "rowSpan": "3-5",
        "bg": "bg",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "weight": 400,
        "leading": "tight",
        "maxCh": 14
      },
      {
        "el": "shape",
        "span": "1-3",
        "rowSpan": "5-6",
        "mobile": "hide",
        "kind": "blob",
        "size": "lg",
        "fill": "accent"
      },
      {
        "el": "box",
        "span": "4-9",
        "rowSpan": "6-6",
        "gap": 2,
        "pad": [
          3,
          0
        ],
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 2,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          }
        ]
      },
      {
        "el": "text",
        "span": "10-12",
        "rowSpan": "6-6",
        "bg": "surfaceAlt",
        "alignSelf": "end",
        "slot": "meta",
        "role": "small",
        "rotate": 4,
        "font": "mono"
      }
    ]
  }
}
Component example: reference/hero.maximalist-pileup.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.maximalist-pileup — Maximalist Collage</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 92vh; padding: 30px 0; grid-template-rows: repeat(5, minmax(60px, auto)) auto; }
  .photo { grid-column: 1 / 6; grid-row: 1 / 5; aspect-ratio: 4 / 5; }
  .disc { grid-column: 8 / 12; grid-row: 1 / 3; background: repeating-linear-gradient(45deg, var(--accent2) 0 14px, var(--surface-alt) 14px 28px); }
  .star { grid-column: 11 / 13; grid-row: 1; width: 120px; aspect-ratio: 1; background: var(--accent2); rotate: 15deg; justify-self: end;
          clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  .label { grid-column: 7 / 11; grid-row: 3; rotate: -6deg; z-index: 4; }
  h1 { grid-column: 3 / 13; grid-row: 3 / 6; font-size: clamp(56px, 8vw, 132px); line-height: 1.08; max-width: 12ch; z-index: 3; align-self: center; }
  h1 span { background: var(--bg); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .blob { grid-column: 1 / 4; grid-row: 5 / 7; width: 180px; aspect-ratio: 1; background: var(--accent); border-radius: 62% 38% 46% 54% / 49% 61% 39% 51%; }
  .action { grid-column: 4 / 10; grid-row: 6; display: grid; gap: 14px; z-index: 3; }
  .action .lead { font-size: var(--step-1); max-width: 40ch; }
  .action div { display: flex; flex-wrap: wrap; gap: 12px; }
  .meta { grid-column: 10 / 13; grid-row: 6; align-self: end; rotate: 4deg; background: var(--surface-alt); color: var(--text); }
  @media (max-width: 640px) { h1 { font-size: 64px; } .label { rotate: -3deg; } .meta { rotate: 2deg; } .disc { width: 60%; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="photo cut f-offset"><img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=900" alt="Model in a patterned coat against a pink wall"></div>
    <div class="disc cut f-circle" aria-hidden="true"></div>
    <div class="star hide-phone" aria-hidden="true"></div>
    <p class="label sticker">Vintage · Reworked · One-offs</p>
    <h1><span>Nothing in here matches.</span></h1>
    <div class="blob hide-phone" aria-hidden="true"></div>
    <div class="action">
      <p class="lead aside">Two floors of reworked vintage, cut up and stitched back together in the shop's back room.</p>
      <div><a class="btn btn-primary" href="#shop">Shop the rails →</a><a class="btn" href="#visit">Visit Peckham</a></div>
    </div>
    <p class="meta sticker">Open Thu–Sun · 11–7</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page