features.blueprint-detail-callouts · Detail callouts

A features pattern from Blueprint, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="features.blueprint-detail-callouts". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Section head row, then a ruled sheet of six detail cells (3 × 2) sharing 1 px rules: each cell has a mono DETAIL number strip, a 16:9 technical drawing, a condensed-caps title and a muted line.
Slots
label, title, subhead, features[6..6]
Notes
Number the cells "DETAIL 01" … "DETAIL 06", each drawing a different part view. Keep exactly six so no cell is empty.
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

  • A heading row: the mono annotation (`DETAILS 01–06`) and the title in condensed caps at step 5 on 1–7, the muted lead on 8–12, bottom-aligned. Then one 1 px frame holding six cells (3 × 2) that share 1 px rules: each padded 4 units with a strip (`DETAIL 01` in the accent left, a muted mono tag right), a 16:9 technical drawing of one part, the title in caps at step 1 and a muted line. Two columns at phone width, where the muted line hides.

What you get

What we do

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.

01

Included

Positioning

02

New

Identity systems

03

Built in

Websites

04

Standard

Sales enablement

05

Optional

Product naming

06

Always on

Brand governance

Layout tree (as in design/layout.json)
{
  "pattern": "features.blueprint-detail-callouts",
  "kind": "features",
  "slots": [
    "label",
    "title",
    "subhead",
    "features[6..6]"
  ],
  "notes": "Number the cells \"DETAIL 01\" … \"DETAIL 06\", each drawing a different part view. Keep exactly six so no cell is empty.",
  "tree": {
    "el": "box",
    "gap": 8,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-7",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "transform": "uppercase",
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 22
              }
            ]
          },
          {
            "el": "text",
            "span": "8-12",
            "color": "textMuted",
            "slot": "subhead",
            "role": "body",
            "maxCh": 48
          }
        ]
      },
      {
        "el": "box",
        "border": "all",
        "children": [
          {
            "el": "repeat",
            "slot": "features",
            "min": 6,
            "max": 6,
            "layout": "grid",
            "cols": 3,
            "phoneCols": 2,
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "gap": 3,
              "pad": [
                4,
                4
              ],
              "children": [
                {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "align": "center",
                  "justify": "between",
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "number",
                      "role": "label",
                      "weight": 700,
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "meta",
                      "role": "small",
                      "transform": "uppercase",
                      "font": "mono"
                    }
                  ]
                },
                {
                  "el": "media",
                  "slot": "image",
                  "aspect": "16/9",
                  "treatment": "technical-drawing",
                  "frame": "none"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "transform": "uppercase",
                  "weight": 600
                },
                {
                  "el": "text",
                  "mobile": "hide",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/features.blueprint-detail-callouts.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.blueprint-detail-callouts — Blueprint</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; display: grid; gap: calc(var(--unit) * 8); }
  .head { align-items: end; row-gap: 16px; }
  .head > div { grid-column: 1 / 8; display: grid; gap: 12px; }
  .head h2 { font-size: var(--step-5); max-width: 22ch; }
  .head p { grid-column: 8 / 13; color: var(--muted); max-width: 48ch; }
  .details { grid-template-columns: repeat(3, 1fr); }
  .details > * { background: var(--bg); padding: 16px; display: grid; gap: 12px; }
  .details header { display: flex; justify-content: space-between; }
  .details h3 { font-size: var(--step-1); }
  .details p { font-size: calc(var(--base) * 0.875); color: var(--muted); }
  @media (max-width: 640px) { .details { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="head grid">
    <div><span class="annot">Details 01–06</span><h2>Every joint, drawn and dimensioned</h2></div>
    <p>Each part ships with its own drawing sheet, so your team can check fit before the box arrives.</p>
  </div>
  <div class="cells details">
    <article>
      <header><span class="annot"><b>Detail 01</b></span><span class="annot muted">Housing</span></header>
      <svg class="drawing" viewBox="0 0 400 300" role="img" aria-label="Housing, front view"><rect class="thick" x="80" y="70" width="240" height="160"/><path class="centre" d="M60 150H340M200 50V250"/><circle class="thick" cx="200" cy="150" r="40"/></svg>
      <h3>Machined housing</h3><p>6061 aluminium, anodised, ± 0.05 mm on every mounting face.</p>
    </article>
    <article>
      <header><span class="annot"><b>Detail 02</b></span><span class="annot muted">Fixing</span></header>
      <svg class="drawing" viewBox="0 0 400 300" role="img" aria-label="Fixing bracket, side view"><path class="thick" d="M90 230V90H170V200H310V230Z"/><path class="hidden" d="M130 90V230"/></svg>
      <h3>Captive fixings</h3><p>M5 stainless studs pressed in at the factory, nothing loose to lose.</p>
    </article>
    <article>
      <header><span class="annot"><b>Detail 03</b></span><span class="annot muted">Section</span></header>
      <svg class="drawing" viewBox="0 0 400 300" role="img" aria-label="Connector, section view"><rect class="thick" x="100" y="80" width="200" height="140"/><path class="thin" d="M100 120L140 80M100 160L180 80M100 200L220 80M120 220L260 80"/></svg>
      <h3>Sealed connectors</h3><p>IP67 rated, keyed so they only fit one way round.</p>
    </article>
  </div>
</section>
</body>
</html>

Other patterns in this design

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