hero.hardware-exploded-callouts · Exploded callouts

A hero pattern from Industrial Hardware, 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.hardware-exploded-callouts". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Display headline in 1–7 with lead and keys bottom-aligned in 9–12; below, a technical drawing of the product in 4–9 between two numbered callout columns (1–3 and 10–12).
Slots
headline, eyebrow, subhead, cta, cta2, features[3..3], heroImage, items[3..3]
Grid areas
headline 1-7 · intro 9-12 · left 1-3 · drawing 4-9 · right 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E5E3DE · text #262522 · heading #111110 · accent #FF5B14 · accent2 #1C1C1A · Archivo / Archivo · radius 6px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Display headline in 1–7 (step 8, ≤ 14 ch); eyebrow, body line and keys in 9–12, bottom-aligned. Below: a 1:1 technical drawing of the product on a bordered surface plate in 4–9, with three numbered callout tags (01–03) and leader lines matching the left column, flanked by two callout columns (1–3 and 10–12), three callouts each: a top seam, a mono index in the link colour, a title at step 1 (600) and one muted line. The callouts read like the numbered parts of an exploded view.

We make complicated companies simple to choose

Brand & product studio

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

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.

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

1 day

Positioning workshop

A day with your leadership to agree on one story.

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

Layout tree (as in design/layout.json)
{
  "pattern": "hero.hardware-exploded-callouts",
  "kind": "hero",
  "grid": {
    "headline": "1-7",
    "intro": "9-12",
    "left": "1-3",
    "drawing": "4-9",
    "right": "10-12"
  },
  "slots": [
    "headline",
    "eyebrow",
    "subhead",
    "cta",
    "cta2",
    "features[3..3]",
    "heroImage",
    "items[3..3]"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 4,
        "align": "end",
        "children": [
          {
            "el": "text",
            "span": "1-7",
            "slot": "headline",
            "role": "display",
            "step": 8,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "eyebrow",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "subhead",
                "role": "body",
                "maxCh": 42
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "size": "md",
                    "arrow": true
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "secondary",
                    "size": "md"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "grid",
        "gap": 5,
        "align": "center",
        "children": [
          {
            "el": "repeat",
            "span": "1-3",
            "slot": "features",
            "min": 3,
            "max": 3,
            "layout": "list",
            "gap": 3,
            "of": {
              "el": "box",
              "gap": 1,
              "pad": [
                3,
                0
              ],
              "border": "top",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "weight": 600
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            }
          },
          {
            "el": "media",
            "span": "4-9",
            "bg": "surface",
            "slot": "heroImage",
            "aspect": "1/1",
            "treatment": "technical-drawing",
            "frame": "border",
            "callouts": 3
          },
          {
            "el": "repeat",
            "span": "10-12",
            "slot": "items",
            "min": 3,
            "max": 3,
            "layout": "list",
            "gap": 3,
            "of": {
              "el": "box",
              "gap": 1,
              "pad": [
                3,
                0
              ],
              "border": "top",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "meta",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "weight": 600
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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