footer.blueprint-title-block · Title block footer

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

Rule
The sheet's title block: a ruled frame of cells sharing 1 px rules: wordmark and tagline on 1–4, links in a column on 5–7, four key-over-value rows on 8–12, then a bottom row, legal line left and sheet reference right.
Slots
siteName, tagline, pages, facts[4..4], legal, meta
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 footer is the sheet's title block on `surface` in a 1 px frame. Top row of three cells split by vertical rules: the wordmark with the muted tagline on 1–4, links in a column on 5–7, and on 8–12 four key-over-value rows split by rules (muted mono key over the bold mono value). Bottom row under a rule: the mono legal line left, the drawing number in `link` right.
Northfold

Strategy and design for companies that make things

  • Services
  • Work
  • About
  • Contact

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Good to know

Booking projects from June 2026

© 2026 Northfold. All rights reserved.

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "footer.blueprint-title-block",
  "kind": "footer",
  "slots": [
    "siteName",
    "tagline",
    "pages",
    "facts[4..4]",
    "legal",
    "meta"
  ],
  "tree": {
    "el": "box",
    "bg": "surface",
    "border": "all",
    "children": [
      {
        "el": "grid",
        "gap": 0,
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-4",
            "gap": 3,
            "pad": [
              5,
              4
            ],
            "children": [
              {
                "el": "logo",
                "slot": "siteName",
                "style": "wordmark"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "tagline",
                "role": "small",
                "maxCh": 36
              }
            ]
          },
          {
            "el": "box",
            "span": "5-7",
            "pad": [
              5,
              4
            ],
            "border": "left",
            "children": [
              {
                "el": "nav-links",
                "slot": "pages",
                "dir": "col",
                "style": "plain"
              }
            ]
          },
          {
            "el": "box",
            "span": "8-12",
            "pad": [
              5,
              4
            ],
            "border": "left",
            "children": [
              {
                "el": "repeat",
                "slot": "facts",
                "min": 4,
                "max": 4,
                "layout": "list",
                "gap": 2,
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 0,
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "label",
                      "role": "small",
                      "transform": "uppercase",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "small",
                      "weight": 700,
                      "font": "mono"
                    }
                  ]
                }
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 4,
        "pad": [
          2,
          4
        ],
        "justify": "between",
        "wrap": true,
        "border": "top",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "legal",
            "role": "small",
            "transform": "uppercase",
            "font": "mono"
          },
          {
            "el": "text",
            "color": "link",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "font": "mono"
          }
        ]
      }
    ]
  }
}
Component example: reference/footer.blueprint-title-block.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.blueprint-title-block — Blueprint</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { margin: calc(var(--unit) * 6) auto; }
  .tb { background: var(--surface); }
  .tb .row { display: grid; grid-template-columns: 4fr 3fr 5fr; }
  .tb .row > * { padding: 20px 16px; }
  .tb .row > * + * { border-left: 1px solid var(--line); }
  .brand { font: 700 var(--step-2)/1 var(--f-head); color: var(--heading); text-transform: uppercase; }
  .tb nav { display: grid; gap: 4px; }
  .tb nav a { color: var(--link); text-decoration: none; }
  .tb nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .kv { display: grid; gap: 8px; }
  .kv div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: calc(var(--base) * 0.85); }
  .kv dd { font-weight: 700; color: var(--heading); }
  .base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); }
  @media (max-width: 640px) { .tb .row { grid-template-columns: 1fr; } .tb .row > * + * { border-left: 0; border-top: 1px solid var(--line); } }
</style>
</head>
<body>
<footer class="wrap">
  <div class="tb frame">
    <div class="row">
      <div><div class="brand">Halden</div><p class="muted" style="margin-top:12px;max-width:36ch">Motor controllers, drawn to tolerance.</p></div>
      <nav aria-label="Footer"><a href="#">Products</a><a href="#">Drawings</a><a href="#">Pricing</a><a href="#">Contact</a></nav>
      <dl class="kv">
        <div><dt class="muted">Drawn</dt><dd>Halden Works</dd></div>
        <div><dt class="muted">Location</dt><dd>Leeds, UK</dd></div>
        <div><dt class="muted">Contact</dt><dd>hello@halden.com</dd></div>
        <div><dt class="muted">Scale</dt><dd>1:1</dd></div>
      </dl>
    </div>
    <div class="base"><span class="annot muted">© 2026 Halden. All rights reserved.</span><span class="annot">DWG 2026-014 · Rev C · Sheet 06/06</span></div>
  </div>
</footer>
</body>
</html>

Other patterns in this design

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