hero.bento-product-console · Product console

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

Rule
Headline in 1–7 bottom-aligned with subhead and buttons in 9–12; below, a product screenshot tile fills 1–9 over two rows, beside a stat tile and a mono install-command tile stacked in 10–12.
Slots
headline, subhead, cta, cta2, heroImage, index, caption, meta, body
Grid areas
headline 1-7 · aside 9-12 · screen 1-9 · side 10-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

  • Top: the display headline (step 6, ≤18 ch) in 1–7, bottom-aligned with a muted subhead and primary + ghost buttons in 9–12. Below, a bento: a 16:9 screenshot tile filling 1–9 over two rows, a stat tile (number at step 5 and caption) in 10–12 row 1, and a surfaceAlt tile in 10–12 row 2 holding a mono install command and one short line.

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

06

Corvid Robotics — identity

Booking projects from June 2026

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-product-console",
  "kind": "hero",
  "grid": {
    "headline": "1-7",
    "aside": "9-12",
    "screen": "1-9",
    "side": "10-12"
  },
  "slots": [
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "index",
    "caption",
    "meta",
    "body"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "align": "end",
        "children": [
          {
            "el": "text",
            "span": "1-7",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "body",
                "maxCh": 40
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "ghost",
                    "arrow": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "grid",
        "gap": 3,
        "rowGap": 3,
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-9",
            "rowSpan": "1-2",
            "bg": "surface",
            "gap": 2,
            "pad": [
              3,
              3
            ],
            "border": "all",
            "children": [
              {
                "el": "media",
                "slot": "heroImage",
                "aspect": "16/9",
                "treatment": "product",
                "frame": "rounded"
              }
            ]
          },
          {
            "el": "box",
            "span": "10-12",
            "rowSpan": "1-1",
            "bg": "surface",
            "gap": 1,
            "pad": [
              6,
              6
            ],
            "border": "all",
            "children": [
              {
                "el": "text",
                "slot": "index",
                "role": "number",
                "step": 5,
                "weight": 600,
                "tracking": "tight"
              },
              {
                "el": "text",
                "slot": "caption",
                "role": "small"
              }
            ]
          },
          {
            "el": "box",
            "span": "10-12",
            "rowSpan": "2-2",
            "bg": "surfaceAlt",
            "gap": 2,
            "pad": [
              6,
              6
            ],
            "justify": "between",
            "border": "all",
            "children": [
              {
                "el": "text",
                "slot": "meta",
                "role": "body",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "body",
                "role": "small",
                "maxCh": 30
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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