hero.product-bento · Product bento

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

Rule
The hero is a bento of five tiles: a headline tile in 1–7 (rows 1–2), a tall product tile in 8–12 (rows 1–3), two stat tiles in 1–4 and an accent CTA tile in 5–7 on row 3.
Slots
eyebrow, headline, subhead, heroImage, stats[2..2], meta, cta
Grid areas
headline 1-7 · product 8-12 · stats 1-4 · cta 5-7 (12-column grid, 1-based inclusive spans)
Notes
Tiles use the style's radius and surface colours; gaps between tiles are one space step 2. Tiles are not equal: sizes differ by role.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)

Do

  • Build exactly five tiles of different sizes: headline (1–7 × 2 rows), product (8–12 × 3 rows), two stats, one accent CTA tile.
  • Use surface and surfaceAlt fills for tiles and the accent only on the CTA tile.
  • Keep a uniform 16 px-ish gap (space step 2) between tiles and the style's radius on all of them.
  • Make the product tile tall and let the product image fill it.

Don't

  • Don't make all tiles the same size — that is a card grid, not a bento.
  • Don't add icons to the stat tiles.
  • Don't put a second CTA in the headline tile.

Phone width

  • Stack: headline tile, product tile at 4:5, stats side by side, CTA tile full width.

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.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.product-bento",
  "kind": "hero",
  "grid": {
    "headline": "1-7",
    "product": "8-12",
    "stats": "1-4",
    "cta": "5-7"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "heroImage",
    "stats[2..2]",
    "meta",
    "cta"
  ],
  "notes": "Tiles use the style's radius and surface colours; gaps between tiles are one space step 2. Tiles are not equal: sizes differ by role.",
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 2,
    "minVh": 0.9,
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 4,
        "pad": [
          6,
          5
        ],
        "justify": "between",
        "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": 40
          }
        ]
      },
      {
        "el": "media",
        "span": "8-12",
        "rowSpan": "1-3",
        "bg": "surface",
        "slot": "heroImage",
        "treatment": "product",
        "fill": true
      },
      {
        "el": "repeat",
        "span": "1-4",
        "rowSpan": "3-3",
        "slot": "stats",
        "min": 2,
        "max": 2,
        "layout": "grid",
        "cols": 2,
        "gap": 2,
        "of": {
          "el": "box",
          "bg": "surfaceAlt",
          "gap": 1,
          "pad": [
            4,
            4
          ],
          "children": [
            {
              "el": "text",
              "color": "text",
              "slot": "number",
              "role": "number",
              "step": 4
            },
            {
              "el": "text",
              "color": "text",
              "slot": "label",
              "role": "small"
            }
          ]
        }
      },
      {
        "el": "box",
        "span": "5-7",
        "rowSpan": "3-3",
        "bg": "accent",
        "gap": 3,
        "pad": [
          4,
          4
        ],
        "justify": "between",
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "meta",
            "role": "small"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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