hero.bento-launch-grid · Launch grid

A hero pattern from Bento Tech, 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.bento-launch-grid". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The hero is a bento: a big message tile in 1–7 over two rows, a product-shot tile in 8–12, an accent stat tile in 8–9, a feature tile in 10–12, and a mono logo strip under all of them.
Slots
eyebrow, headline, subhead, cta, cta2, caption, heroImage, index, meta, tagline, body, logos[4..6]
Grid areas
message 1-7 · shot 8-12 · stat 8-9 · feature 10-12 · logos 1-12 (12-column grid, 1-based inclusive spans)
Notes
Every tile has the surface fill, a 1 px border and the style radius; gaps between tiles are 12 px. The accent tile is the only filled colour.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • Explicit rows. Rows 1–2, columns 1–7: the message tile (padding 40 × 32 px) with the mono release tag in the link colour at the top, the display headline at step 8 (weight 600, tight, ≤14 ch) in the middle and the subhead plus primary and secondary buttons at the bottom. Row 1, 8–12: a product-shot tile with a mono caption and a 16:9 screenshot. Row 2: an accent tile in 8–9 with a number at step 8 and a small line (onAccent), and a surfaceAlt tile in 10–12 with a title at step 2 (weight 600) and a short muted line. Row 3: a mono logo strip (customer names, muted) across 1–12, hidden at phone width (never cut a name mid-word).

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

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Layout tree (as in design/layout.json)
{
  "pattern": "hero.bento-launch-grid",
  "kind": "hero",
  "grid": {
    "message": "1-7",
    "shot": "8-12",
    "stat": "8-9",
    "feature": "10-12",
    "logos": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "caption",
    "heroImage",
    "index",
    "meta",
    "tagline",
    "body",
    "logos[4..6]"
  ],
  "notes": "Every tile has the surface fill, a 1 px border and the style radius; gaps between tiles are 12 px. The accent tile is the only filled colour.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 4,
        "pad": [
          10,
          8
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 8,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "slot": "subhead",
                "role": "body",
                "maxCh": 44
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "secondary",
                    "arrow": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "rowSpan": "1-1",
        "bg": "surface",
        "gap": 2,
        "pad": [
          4,
          4
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "caption",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "16/9",
            "treatment": "product",
            "frame": "rounded"
          }
        ]
      },
      {
        "el": "box",
        "span": "8-9",
        "rowSpan": "2-2",
        "bg": "accent",
        "gap": 1,
        "pad": [
          6,
          5
        ],
        "justify": "between",
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "index",
            "role": "number",
            "step": 8,
            "weight": 600,
            "tracking": "tight"
          },
          {
            "el": "text",
            "color": "onAccent",
            "slot": "meta",
            "role": "small"
          }
        ]
      },
      {
        "el": "box",
        "span": "10-12",
        "rowSpan": "2-2",
        "bg": "surfaceAlt",
        "gap": 2,
        "pad": [
          6,
          5
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "tagline",
            "role": "h4",
            "step": 2,
            "weight": 600,
            "tracking": "tight"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "small",
            "maxCh": 34
          }
        ]
      },
      {
        "el": "repeat",
        "span": "1-12",
        "rowSpan": "3-3",
        "mobile": "hide",
        "slot": "logos",
        "min": 4,
        "max": 6,
        "layout": "row",
        "gap": 6,
        "of": {
          "el": "text",
          "color": "textMuted",
          "slot": "title",
          "role": "label",
          "font": "mono"
        }
      }
    ]
  }
}
Component example: reference/hero.bento-launch-grid.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.bento-launch-grid — Bento Tech</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 24px 0 48px; }
  .bento { grid-template-rows: minmax(180px, auto) minmax(150px, auto) auto; }
  .msg { grid-column: 1 / 8; grid-row: 1 / 3; padding: 40px 32px; justify-content: space-between; gap: 24px; }
  .msg h1 { font-size: clamp(36px, 5vw, var(--step-8)); line-height: 1.02; max-width: 14ch; }
  .msg .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .shot-tile { grid-column: 8 / 13; grid-row: 1; padding: 16px; }
  .shot-tile .shot { aspect-ratio: 16 / 9; }
  .stat { grid-column: 8 / 10; grid-row: 2; justify-content: space-between; }
  .stat .num { font-size: var(--step-8); line-height: 1; }
  .feat { grid-column: 10 / 13; grid-row: 2; }
  .logos { grid-column: 1 / 13; grid-row: 3; display: flex; gap: 40px; align-items: center; overflow-x: auto; white-space: nowrap; min-height: 0; padding: 12px 4px; }
</style>
</head>
<body>
<section class="wrap">
  <div class="bento">
    <div class="tile msg">
      <span class="mono link">v2.0 — now with branch previews</span>
      <h1>Deploy every pull request in 38 seconds.</h1>
      <div><p style="max-width:44ch">Ferry builds, tests and previews your app on every push, on infrastructure you never have to think about.</p>
        <div class="actions"><a class="btn btn-primary" href="#start">Start free</a><a class="btn" href="#docs">Read the docs →</a></div></div>
    </div>
    <div class="tile shot-tile"><span class="mono muted">Dashboard · deployments</span><div class="shot"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=900" alt="Deployment dashboard with build timeline"></div></div>
    <div class="tile accent stat"><span class="num">38s</span><span class="small">median preview build</span></div>
    <div class="tile alt feat"><strong>Rollback in one click</strong><span class="small">Every deploy is immutable. Point traffic back at any of the last 500.</span></div>
    <div class="logos"><span class="mono muted">Linear</span><span class="mono muted">Raycast</span><span class="mono muted">Resend</span><span class="mono muted">Cal.com</span><span class="mono muted">Dub</span></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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