stats.bento-kpi-tiles · KPI tiles

A stats pattern from Bento Tech, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3; about page, section 1. Give the section root data-pattern="stats.bento-kpi-tiles". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
An intro tile on surfaceAlt in 1–4 spanning two rows; four KPI tiles in a 2×2 across 5–12, each with a big number, a caption and a mono delta in the link colour.
Slots
sectionLabel, title, body, stats[4..4]
Grid areas
intro 1-4 · kpis 5-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)

Pattern notes

  • A surfaceAlt intro tile in 1–4 spanning two rows (mono label at top, h3 in the middle, a line at the bottom). Four KPI tiles in a 2×2 across 5–12: number at step 6, then caption and a mono delta in the link colour on one baseline.

By the numbers

Twelve years in numbers

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

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": "stats.bento-kpi-tiles",
  "kind": "stats",
  "grid": {
    "intro": "1-4",
    "kpis": "5-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "stats[4..4]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "1-2",
        "bg": "surfaceAlt",
        "gap": 2,
        "pad": [
          6,
          6
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "sectionLabel",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h3",
            "weight": 600,
            "maxCh": 18
          },
          {
            "el": "text",
            "slot": "body",
            "role": "small",
            "maxCh": 32
          }
        ]
      },
      {
        "el": "repeat",
        "span": "5-12",
        "rowSpan": "1-2",
        "slot": "stats",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 1,
          "pad": [
            6,
            6
          ],
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 6,
              "weight": 600,
              "tracking": "tight",
              "leading": "tight"
            },
            {
              "el": "box",
              "dir": "row",
              "gap": 2,
              "align": "baseline",
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "slot": "body",
                  "role": "small"
                },
                {
                  "el": "text",
                  "color": "link",
                  "slot": "meta",
                  "role": "label",
                  "font": "mono"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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