hero.line-callout-board · Line callout board

A hero pattern from Isometric Line, 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.line-callout-board". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline across 1–9 with lead and button in 10–12; below, a 1:1 isometric drawing in 4–9 flanked by two numbered callouts on the left (1–3) and two figure callouts on the right (10–12), all on top rules.
Slots
eyebrow, headline, subhead, cta, features[2..2], heroImage, stats[2..2]
Grid areas
headline 1-9 · lead 10-12 · calloutsLeft 1-3 · drawing 4-9 · calloutsRight 10-12 (12-column grid, 1-based inclusive spans)
Notes
Draw a thin leader line from each callout's top rule to the part it names on the drawing; on phones the callouts stack under the drawing.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Row 1: eyebrow and display headline (step 7, ≤22 ch) across 1–9; a muted line and a primary button bottom-aligned in 10–12. Row 2: a 1:1 drawing in 4–9, two numbered feature callouts in 1–3 and two figure callouts (number at step 5 over a mono label) in 10–12, each on a top rule and vertically centred. Draw leader lines from each callout's rule to the part it names. Phone: headline, drawing, then the callouts stacked.

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 project

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.

140+

launches shipped

12

years independent

Layout tree (as in design/layout.json)
{
  "pattern": "hero.line-callout-board",
  "kind": "hero",
  "grid": {
    "headline": "1-9",
    "lead": "10-12",
    "calloutsLeft": "1-3",
    "drawing": "4-9",
    "calloutsRight": "10-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "features[2..2]",
    "heroImage",
    "stats[2..2]"
  ],
  "notes": "Draw a thin leader line from each callout's top rule to the part it names on the drawing; on phones the callouts stack under the drawing.",
  "tree": {
    "el": "grid",
    "gap": 6,
    "rowGap": 6,
    "children": [
      {
        "el": "box",
        "span": "1-9",
        "rowSpan": "1-1",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 22
          }
        ]
      },
      {
        "el": "box",
        "span": "10-12",
        "rowSpan": "1-1",
        "alignSelf": "end",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "body",
            "maxCh": 34
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "repeat",
        "span": "1-3",
        "rowSpan": "2-2",
        "alignSelf": "center",
        "slot": "features",
        "min": 2,
        "max": 2,
        "layout": "list",
        "gap": 10,
        "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",
        "rowSpan": "2-2",
        "slot": "heroImage",
        "aspect": "1/1",
        "treatment": "isometric",
        "frame": "none"
      },
      {
        "el": "repeat",
        "span": "10-12",
        "rowSpan": "2-2",
        "alignSelf": "center",
        "slot": "stats",
        "min": 2,
        "max": 2,
        "layout": "list",
        "gap": 10,
        "of": {
          "el": "box",
          "gap": 1,
          "pad": [
            3,
            0
          ],
          "border": "top",
          "children": [
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 5,
              "weight": 600,
              "tracking": "tight"
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "title",
              "role": "label",
              "font": "mono"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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