stats.hairline-figure-cells · Hairline figure cells

A stats pattern from Technical Hairline, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 8; about page, section 2. Give the section root data-pattern="stats.hairline-figure-cells". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Header, then four figures in one bordered strip split by shared hairlines: mono uppercase label on top, the figure at step 6 weight 500, a one-line note. Two per row on phones.
Slots
sectionLabel, title, body, stats[4..4]
Grid areas
title 1-6 · intro 8-12 · cells 1-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAF8 · text #2E2E2B · heading #0B0B0A · accent #111110 · accent2 #7A7A7A · Geist / Geist · radius 12px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Section header, then four figures in one bordered strip with shared hairlines: mono uppercase label at the top, the figure at step 6 weight 500 with tabular numerals, a muted one-line note. Two per row on phones with the hairlines kept between them.

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.

Since 2014

140+

launches shipped

2025

12

years independent

Audited

9 of 10

clients return

Last 12 months

31%

average lift in demo requests

Layout tree (as in design/layout.json)
{
  "pattern": "stats.hairline-figure-cells",
  "kind": "stats",
  "grid": {
    "title": "1-6",
    "intro": "8-12",
    "cells": "1-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "stats[4..4]"
  ],
  "tree": {
    "el": "box",
    "gap": 10,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "gap": 4,
            "children": [
              {
                "el": "text",
                "slot": "sectionLabel",
                "role": "eyebrow",
                "transform": "uppercase",
                "weight": 400,
                "tracking": "wide",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 500,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 20
              }
            ]
          },
          {
            "el": "text",
            "span": "8-12",
            "color": "textMuted",
            "alignSelf": "end",
            "slot": "body",
            "role": "body",
            "maxCh": 56
          }
        ]
      },
      {
        "el": "box",
        "pad": 0,
        "border": "all",
        "children": [
          {
            "el": "repeat",
            "slot": "stats",
            "min": 4,
            "max": 4,
            "layout": "grid",
            "cols": 4,
            "phoneCols": 2,
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "gap": 4,
              "pad": [
                8,
                6
              ],
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "meta",
                  "role": "small",
                  "transform": "uppercase",
                  "tracking": "wide",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 6,
                  "weight": 500,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "title",
                  "role": "small"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/stats.hairline-figure-cells.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>stats.hairline-figure-cells — Technical Hairline</title>
<link rel="stylesheet" href="base.css">
<style>
  .cells > div { justify-content: space-between; min-height: 180px; }
  .fig { font-size: var(--step-6); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
</style>
</head>
<body>
<section class="wrap">
  <p class="eyebrow" style="margin-bottom:16px">By the numbers</p>
  <h2 class="h2" style="margin-bottom:40px">Measured, not estimated.</h2>
  <div class="box"><div class="cells" style="--cols:4;--phone-cols:2">
    <div><p class="eyebrow muted">Records</p><p class="fig">41M</p><p class="small muted">Under signed licence</p></div>
    <div><p class="eyebrow muted">Owners</p><p class="fig">212</p><p class="small muted">Businesses in 14 countries</p></div>
    <div><p class="eyebrow muted">Evals</p><p class="fig">38</p><p class="small muted">Sealed, never public</p></div>
    <div><p class="eyebrow muted">Latency</p><p class="fig">9 d</p><p class="small muted">Median scope to delivery</p></div>
  </div></div>
</section>
</body>
</html>

Other patterns in this design

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