stats.blueprint-dimension-figures · Dimension figures

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

Rule
Four figures on a ruled strip: each a condensed numeral at step 6 over a dimension line holding its mono label, cells divided by 1 px rules; the section label and title sit above on 1–7.
Slots
label, title, stats[4..4]
Notes
Each figure reads like a measured dimension: its label between two rules, with arrowheads if you can draw them ("|←— UPTIME —→|").
Tokens
bg #134A86 · text #E6F1FC · heading #FFFFFF · accent #FFFFFF · accent2 #9FDCFF · IBM Plex Sans Condensed / IBM Plex Sans · radius 0px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • The annotation and a step-4 caps title above, then one 1 px frame holding four cells that share rules: each padded 5 × 4, the figure at step 6 in the condensed heading face (600), and under it a dimension line: a rule, the label in mono `link`, a rule. Two columns at phone width.

By the numbers

Twelve years in numbers

140+

launches shipped

12

years independent

9 of 10

clients return

31%

average lift in demo requests

Layout tree (as in design/layout.json)
{
  "pattern": "stats.blueprint-dimension-figures",
  "kind": "stats",
  "slots": [
    "label",
    "title",
    "stats[4..4]"
  ],
  "notes": "Each figure reads like a measured dimension: its label between two rules, with arrowheads if you can draw them (\"|←— UPTIME —→|\").",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "gap": 3,
        "maxCh": 60,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "label",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 4,
            "transform": "uppercase",
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 28
          }
        ]
      },
      {
        "el": "box",
        "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": 3,
              "pad": [
                5,
                4
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 6,
                  "weight": 600,
                  "font": "heading"
                },
                {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 2,
                  "align": "center",
                  "children": [
                    {
                      "el": "divider"
                    },
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "title",
                      "role": "small",
                      "transform": "uppercase",
                      "font": "mono"
                    },
                    {
                      "el": "divider"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/stats.blueprint-dimension-figures.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>stats.blueprint-dimension-figures — Blueprint</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; display: grid; gap: calc(var(--unit) * 6); }
  h2 { font-size: var(--step-4); max-width: 28ch; margin-top: 12px; }
  .figs { grid-template-columns: repeat(4, 1fr); }
  .figs > * { background: var(--bg); padding: 20px 16px; display: grid; gap: 12px; }
  .figs strong { font: 600 var(--step-6)/1 var(--f-head); color: var(--heading); }
  @media (max-width: 640px) { .figs { grid-template-columns: repeat(2, 1fr); } }
</style>
</head>
<body>
<section class="wrap">
  <div><span class="annot">Tolerances</span><h2>Measured on the line, not in the brochure</h2></div>
  <div class="cells figs">
    <div><strong>± 0.05</strong><span class="dim">mm on mounts</span></div>
    <div><strong>40 A</strong><span class="dim">continuous</span></div>
    <div><strong>99.2%</strong><span class="dim">first-pass yield</span></div>
    <div><strong>6 wk</strong><span class="dim">lead time</span></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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