hero.tech-metric-wall · Metric wall

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

Rule
Message and an inline waitlist form in 1–6, vertically centred beside a 2×2 wall of metric tiles in 7–12; a full-width 21:9 product screenshot closes the hero.
Slots
eyebrow, headline, subhead, newsletter, stats[4..4], heroImage
Grid areas
message 1-6 · metrics 7-12 · screen 1-12 (12-column grid, 1-based inclusive spans)
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 6

Pattern notes

  • Columns 1–6, vertically centred: mono eyebrow, display headline at step 7 (≤14 ch), lead and an inline waitlist form. Columns 7–12: a 2×2 wall of metric tiles (number at step 6, caption, mono delta in the link colour). Under both, a 21:9 product screenshot across the full grid with the style radius.

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.

you@example.com
Subscribe

140+

launches shipped

Since 2014

12

years independent

2025

9 of 10

clients return

Audited

31%

average lift in demo requests

Last 12 months

Layout tree (as in design/layout.json)
{
  "pattern": "hero.tech-metric-wall",
  "kind": "hero",
  "grid": {
    "message": "1-6",
    "metrics": "7-12",
    "screen": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "newsletter",
    "stats[4..4]",
    "heroImage"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "align": "center",
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          }
        ]
      },
      {
        "el": "repeat",
        "span": "7-12",
        "slot": "stats",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 1,
          "pad": [
            6,
            6
          ],
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 6,
              "weight": 600,
              "tracking": "tight"
            },
            {
              "el": "text",
              "slot": "body",
              "role": "small"
            },
            {
              "el": "text",
              "color": "link",
              "slot": "meta",
              "role": "label",
              "font": "mono"
            }
          ]
        }
      },
      {
        "el": "media",
        "span": "1-12",
        "slot": "heroImage",
        "aspect": "21/9",
        "treatment": "product",
        "frame": "rounded"
      }
    ]
  }
}

Other patterns in this design

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