hero.organic-pebble-cluster · Pebble cluster

A hero pattern from Organic Earth, 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.organic-pebble-cluster". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline block bottom-left on 1–6; three images of different shapes (circle, arch, pebble) cluster loosely on 7–12 at different heights, with a small clay blob among them.
Slots
eyebrow, headline, subhead, cta, gallery1, gallery2, gallery3
Grid areas
text 1-6 · circle 8-12 · arch 7-9 · pebble 10-12 · blob 11-12 (12-column grid, 1-based inclusive spans)
Notes
No two images share a top edge. At phone width show the circle and the arch side by side (2 columns) under the text and hide the pebble if space is short.
Tokens
bg #F3EBDD · text #2E2A22 · heading #2A1F14 · accent #BC572B · accent2 #A56B00 · Fraunces / Karla · radius 28px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • Text block bottom-aligned on 1–6 across three rows: italic eyebrow, headline at step 6 weight 400, lead, primary button. Images cluster on 7–12 at different heights: a circle photo on 8–12 (row 1), an arch photo on 7–9 (rows 2–3), a rounded 4:5 illustration on 10–12 (row 2, bottom-aligned), and a small clay blob on 11–12 (row 3). Phone: text first, then the circle, the arch and the rounded illustration one under another; the blob hides.

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
Layout tree (as in design/layout.json)
{
  "pattern": "hero.organic-pebble-cluster",
  "kind": "hero",
  "grid": {
    "text": "1-6",
    "circle": "8-12",
    "arch": "7-9",
    "pebble": "10-12",
    "blob": "11-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "gallery1",
    "gallery2",
    "gallery3"
  ],
  "notes": "No two images share a top edge. At phone width show the circle and the arch side by side (2 columns) under the text and hide the pebble if space is short.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 3,
    "align": "start",
    "minVh": 0.85,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "rowSpan": "1-3",
        "alignSelf": "end",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow",
            "italic": true
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "weight": 400,
            "leading": "tight",
            "maxCh": 13
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "media",
        "span": "8-12",
        "rowSpan": "1-1",
        "slot": "gallery1",
        "aspect": "1/1",
        "treatment": "photo",
        "frame": "circle"
      },
      {
        "el": "media",
        "span": "7-9",
        "rowSpan": "2-3",
        "slot": "gallery2",
        "aspect": "3/4",
        "treatment": "photo",
        "frame": "arch"
      },
      {
        "el": "media",
        "span": "10-12",
        "rowSpan": "2-2",
        "alignSelf": "end",
        "slot": "gallery3",
        "aspect": "4/5",
        "treatment": "illustration",
        "frame": "rounded"
      },
      {
        "el": "shape",
        "span": "11-12",
        "rowSpan": "3-3",
        "mobile": "hide",
        "alignSelf": "start",
        "kind": "blob",
        "size": "md",
        "fill": "accent"
      }
    ]
  }
}

Other patterns in this design

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