hero.blueprint-drawing-sheet · Drawing sheet

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

Rule
One ruled drawing sheet: a header strip (sheet number left, meta right); condensed-caps headline, lead and buttons on 1–5; a 4:3 orthographic drawing with dimension lines on 6–12; a four-cell title block bottom right, general notes beside it.
Slots
eyebrow, meta, headline, subhead, cta, cta2, heroImage, caption, features[3..3], stats[4..4]
Grid areas
message 1-5 · drawing 6-12 · notes 1-5 · titleBlock 6-12 (12-column grid, 1-based inclusive spans)
Notes
The strip reads like a sheet header ("SHEET 02/06 — GENERAL ARRANGEMENT" left, "SCALE 1:4 · REV C" right). The drawing shows front and side views with dimension lines and three numbered callout bubbles; the notes list matches them.
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

  • The whole hero is one drawing sheet in a 1 px frame. Header strip (rule under it, padded 2 × 4 units): the sheet number in mono accent on the left (`SHEET 02/06 — GENERAL ARRANGEMENT`), muted `SCALE 1:4 · REV C` right (hidden at phone width). Inside, padded 5 × 4: on 1–5 the headline at step 7 in condensed caps (600, max 14 ch), the lead in `textMuted` (max 44 ch) and a primary button with an arrow plus a ghost button; on 6–12 a 4:3 orthographic drawing (front and side views, dimension lines, three callout bubbles) with a dimension line under it naming the overall size. Second row, bottom-aligned: on 1–5 the general notes, three rows split by rules (mono callout number in the accent, bold title, muted line); on 6–12 a four-cell title block on `surface` (muted mono key over a bold mono value). At 375 px everything stacks: headline, drawing and the title block in two columns; the general notes hide.

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

launches shipped

140+

years independent

12

clients return

9 of 10

average lift in demo requests

31%

Layout tree (as in design/layout.json)
{
  "pattern": "hero.blueprint-drawing-sheet",
  "kind": "hero",
  "grid": {
    "message": "1-5",
    "drawing": "6-12",
    "notes": "1-5",
    "titleBlock": "6-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "caption",
    "features[3..3]",
    "stats[4..4]"
  ],
  "notes": "The strip reads like a sheet header (\"SHEET 02/06 — GENERAL ARRANGEMENT\" left, \"SCALE 1:4 · REV C\" right). The drawing shows front and side views with dimension lines and three numbered callout bubbles; the notes list matches them.",
  "tree": {
    "el": "box",
    "gap": 0,
    "border": "all",
    "children": [
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 3,
        "pad": [
          2,
          4
        ],
        "align": "center",
        "justify": "between",
        "wrap": true,
        "border": "bottom",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "mobile": "hide",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "font": "mono"
          }
        ]
      },
      {
        "el": "grid",
        "gap": 6,
        "rowGap": 5,
        "pad": [
          5,
          4
        ],
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-5",
            "gap": 5,
            "pad": [
              2,
              0
            ],
            "children": [
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 7,
                "transform": "uppercase",
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 16
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "lead",
                "maxCh": 44
              },
              {
                "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",
            "span": "6-12",
            "gap": 2,
            "children": [
              {
                "el": "media",
                "slot": "heroImage",
                "aspect": "4/3",
                "treatment": "technical-drawing",
                "frame": "none"
              },
              {
                "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",
            "span": "1-5",
            "mobile": "hide",
            "alignSelf": "end",
            "slot": "features",
            "min": 3,
            "max": 3,
            "layout": "list",
            "gap": 2,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 3,
              "align": "start",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "weight": 700,
                  "font": "mono"
                },
                {
                  "el": "box",
                  "gap": 0,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "body",
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "mobile": "hide",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small"
                    }
                  ]
                }
              ]
            }
          },
          {
            "el": "box",
            "span": "6-12",
            "bg": "surface",
            "alignSelf": "end",
            "border": "all",
            "children": [
              {
                "el": "repeat",
                "slot": "stats",
                "min": 4,
                "max": 4,
                "layout": "grid",
                "cols": 4,
                "phoneCols": 2,
                "gap": 0,
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "pad": [
                    2,
                    3
                  ],
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "title",
                      "role": "small",
                      "transform": "uppercase",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "slot": "number",
                      "role": "h4",
                      "step": 1,
                      "weight": 700,
                      "font": "mono"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.blueprint-drawing-sheet.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.blueprint-drawing-sheet — Blueprint</title>
<link rel="stylesheet" href="base.css">
<style>
  .sheet { margin: calc(var(--unit) * 6) 0; }
  .sheet .body { padding: calc(var(--unit) * 6) calc(var(--unit) * 4); row-gap: calc(var(--unit) * 6); align-items: stretch; }
  .msg { grid-column: 1 / 6; display: grid; gap: calc(var(--unit) * 5); align-content: start; }
  .msg h1 { font-size: clamp(2.4rem, 6vw, var(--step-7)); max-width: 14ch; }
  .msg p { color: var(--muted); font-size: var(--step-1); max-width: 44ch; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .view { grid-column: 6 / 13; display: grid; gap: 8px; }
  .notes { grid-column: 1 / 6; align-self: end; list-style: none; padding: 0; }
  .notes li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .notes b { font-family: var(--f-mono); color: var(--accent); }
  .tb { grid-column: 6 / 13; align-self: end; grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 640px) { .tb { grid-template-columns: repeat(2, 1fr); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="sheet frame">
    <div class="strip"><span class="annot">Sheet 02/06 — General arrangement</span><span class="annot muted hide-sm">Scale 1:4 · Rev C</span></div>
    <div class="body grid">
      <div class="msg">
        <h1>Motor controllers, drawn to tolerance</h1>
        <p>Halden builds brushless motor drivers for robots and conveyors, with every part dimensioned, documented and in stock.</p>
        <div class="actions"><a class="btn" href="#specs">Download the spec →</a><a class="btn ghost" href="#parts">Browse parts</a></div>
      </div>
      <figure class="view">
        <svg class="drawing" viewBox="0 0 640 480" role="img" aria-label="Front and side view of the HD-40 controller with dimensions">
          <rect class="thick" x="70" y="110" width="300" height="200"/>
          <circle class="thick" cx="220" cy="210" r="46"/><circle class="hidden" cx="220" cy="210" r="64"/>
          <path class="centre" d="M140 210H300M220 130V290"/>
          <circle class="thick" cx="100" cy="140" r="9"/><circle class="thick" cx="340" cy="140" r="9"/>
          <circle class="thick" cx="100" cy="280" r="9"/><circle class="thick" cx="340" cy="280" r="9"/>
          <rect class="thick" x="430" y="110" width="80" height="200"/><path class="hidden" d="M430 164H510M430 256H510"/>
          <path class="thin" d="M70 330V360M370 330V360M70 350H370"/><text x="220" y="344" text-anchor="middle">120.00</text>
          <path class="thin" d="M50 110H20M50 310H20M30 110V310"/><text x="22" y="214" transform="rotate(-90 22 214)" text-anchor="middle">80.00</text>
          <path class="thin" d="M266 186L330 70"/><circle class="callout" cx="338" cy="58" r="14"/><text x="338" y="63" text-anchor="middle">1</text>
          <path class="thin" d="M510 140L570 80"/><circle class="callout" cx="580" cy="70" r="14"/><text x="580" y="75" text-anchor="middle">2</text>
          <path class="thin" d="M100 280L60 410"/><circle class="callout" cx="56" cy="424" r="14"/><text x="56" y="429" text-anchor="middle">3</text>
        </svg>
        <figcaption class="dim">212 mm overall</figcaption>
      </figure>
      <ol class="notes">
        <li><b>01</b><span>Ø 32 bore takes a NEMA 23 shaft</span></li>
        <li><b>02</b><span>Aluminium heatsink, 18 mm deep</span></li>
        <li><b>03</b><span>4 × M5 fixings on a 92 mm square</span></li>
      </ol>
      <dl class="cells tb">
        <div><dt>Project</dt><dd>HD-40</dd></div>
        <div><dt>Sheet</dt><dd>02/06</dd></div>
        <div><dt>Scale</dt><dd>1:4</dd></div>
        <div><dt>Rev</dt><dd>C</dd></div>
      </dl>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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