stats.sketchbook-circled-figures · Sketchbook circled figures

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

Rule
Title row, then four figures: a handwritten number inside a blue hand-drawn ring, a bold label and a muted line, centred.
Slots
sectionLabel, title, body, stats[4..4]
Tokens
bg #FBF8F0 · text #2A2722 · heading #1B1915 · accent #FFD43B · accent2 #C92A2A · Kalam / Figtree · radius 12px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Title row: note and h2 at step 5 in 1–6, a muted line in 7–12. Four figures in four columns (two-up on phones), each a number at step 5 in the handwriting face centred inside a big blue hand-drawn ring that does not quite close, then a bold centred label and a muted centred line.

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

Counted since we opened, updated every quarter.

12

years independent

Measured across every project, not our best ones.

9 of 10

clients return

From our own records, checked each year.

31%

average lift in demo requests

Independently reviewed, published in full.

Layout tree (as in design/layout.json)
{
  "pattern": "stats.sketchbook-circled-figures",
  "kind": "stats",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "stats[4..4]"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "cols": 12,
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "gap": 2,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "sectionLabel",
                "role": "label",
                "step": 2,
                "rotate": -3,
                "font": "heading"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "maxCh": 20
              }
            ]
          },
          {
            "el": "text",
            "span": "7-12",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 48
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "stats",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "phoneCols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "gap": 2,
          "children": [
            {
              "el": "grid",
              "mobile": "keep",
              "cols": 1,
              "gap": 0,
              "children": [
                {
                  "el": "shape",
                  "span": "1-1",
                  "rowSpan": "1-1",
                  "kind": "ring",
                  "size": "fill",
                  "fill": "link",
                  "hand": true
                },
                {
                  "el": "text",
                  "span": "1-1",
                  "rowSpan": "1-1",
                  "alignSelf": "center",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "align": "center"
                }
              ]
            },
            {
              "el": "text",
              "slot": "title",
              "role": "body",
              "align": "center",
              "weight": 700
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "body",
              "role": "small",
              "align": "center"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/stats.sketchbook-circled-figures.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>stats.sketchbook-circled-figures — Sketchbook</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding-block: var(--section); display: grid; gap: 48px; }
  .head { align-items: end; }
  .head > div { grid-column: 1 / 7; display: grid; gap: 8px; }
  .head p { grid-column: 7 / 13; }
  h2 { font-size: var(--step-5); }
  .figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; list-style: none; padding: 0; }
  .figures li { display: grid; gap: 8px; text-align: center; }
  /* The ring and the number share one cell; the ring is a stroke that stops short of closing. */
  .circled { display: grid; place-items: center; aspect-ratio: 1; }
  .circled > * { grid-area: 1 / 1; }
  .circled svg { width: 92%; height: 92%; color: var(--link); }
  .circled .num { font-size: var(--step-5); }
  @media (max-width: 640px) { .figures { grid-template-columns: repeat(2, 1fr); gap: 20px; } .circled .num { font-size: var(--step-3); } }
</style>
</head>
<body>
<main class="wrap">
  <section data-pattern="stats.sketchbook-circled-figures">
    <div class="grid head"><div><span class="note">Figures</span><h2>Twelve years in numbers</h2></div><p class="muted">Most projects run ten to sixteen weeks. We agree the scope and price up front.</p></div>
    <ul class="figures">
      <li><div class="circled"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M50 9 C74 8 92 26 91 50 C90 75 72 92 49 91 C25 90 9 73 10 49 C11 30 24 15 42 11" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><span class="num">140+</span></div><strong>launches shipped</strong><span class="small muted">Counted since we opened.</span></li>
      <li><div class="circled"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M58 10 C80 14 93 33 90 54 C87 77 67 92 45 90 C22 88 8 69 11 46 C13 28 28 13 47 10" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><span class="num">12</span></div><strong>years independent</strong><span class="small muted">No investors, no holding group.</span></li>
      <li><div class="circled"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M44 10 C68 7 90 22 91 47 C92 72 74 91 50 91 C26 91 9 74 9 51 C9 33 20 18 36 12" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><span class="num">9/10</span></div><strong>clients return</strong><span class="small muted">From our own records.</span></li>
      <li><div class="circled"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M52 8 C77 10 93 29 91 52 C89 76 70 92 47 91 C24 89 9 71 10 48 C12 29 25 14 44 10" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><span class="num">31%</span></div><strong>more demo requests</strong><span class="small muted">Median, first six months.</span></li>
    </ul>
  </section>
</main>
</body>
</html>

Other patterns in this design

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