hero.blueprint-section-callouts · Section callouts

A hero pattern from Blueprint, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.blueprint-section-callouts". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A giant condensed-caps headline on 1–9 with the lead and buttons on 10–12, then a full-width 21:9 technical drawing framed by a ruled border, a full-width dimension line under it and a four-column numbered callout key.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, caption, features[4..4]
Grid areas
headline 1-9 · lead 10-12 · drawing 1-12 · key 1-12 (12-column grid, 1-based inclusive spans)
Notes
The drawing is a wide elevation of the product; the callout key numbers (01–04) are the numbers in the bubbles on the drawing. The dimension line names the overall size ("1 320 mm OVERALL").
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)
Section
vertical padding step 6

Pattern notes

  • On one bottom-aligned row: the mono annotation and the headline at step 8 in condensed caps (max 18 ch) on 1–9, the muted lead and the buttons on 10–12. Below, a full-width 21:9 drawing in a 1 px frame (a wide elevation with numbered callouts), a full-width dimension line under it, then a four-column key: each column opens with its mono number in the accent followed by a rule to the column edge, then the part name in caps at step 1 and a muted line. Two columns at phone width.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

Layout tree (as in design/layout.json)
{
  "pattern": "hero.blueprint-section-callouts",
  "kind": "hero",
  "grid": {
    "headline": "1-9",
    "lead": "10-12",
    "drawing": "1-12",
    "key": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "caption",
    "features[4..4]"
  ],
  "notes": "The drawing is a wide elevation of the product; the callout key numbers (01–04) are the numbers in the bubbles on the drawing. The dimension line names the overall size (\"1 320 mm OVERALL\").",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-9",
            "gap": 4,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "eyebrow",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 8,
                "transform": "uppercase",
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 18
              }
            ]
          },
          {
            "el": "box",
            "span": "10-12",
            "gap": 4,
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "body",
                "maxCh": 40
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 3,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "arrow": true
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "ghost"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "gap": 2,
        "children": [
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "21/9",
            "treatment": "technical-drawing",
            "frame": "border"
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 2,
            "align": "center",
            "children": [
              {
                "el": "divider"
              },
              {
                "el": "text",
                "color": "link",
                "slot": "caption",
                "role": "small",
                "transform": "uppercase",
                "font": "mono"
              },
              {
                "el": "divider"
              }
            ]
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "features",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "phoneCols": 2,
        "gap": 6,
        "of": {
          "el": "box",
          "gap": 2,
          "pad": [
            0,
            0
          ],
          "children": [
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 2,
              "align": "center",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "weight": 700,
                  "font": "mono"
                },
                {
                  "el": "divider"
                }
              ]
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h4",
              "step": 1,
              "transform": "uppercase",
              "weight": 600
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "body",
              "role": "small"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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