footer.editorial-magazine-colophon · Colophon

A footer pattern from Editorial Magazine, 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.editorial-magazine-colophon". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A 4 px rule, then the nameplate in the display serif on 1–4, links stacked on 6–7, address on 8–9 and an italic legal/colophon note on 10–12.
Slots
siteName, pages, address, legal
Grid areas
nameplate 1-4 · links 6-7 · address 8-9 · colophon 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #9B2234 · accent2 #D26F74 · Playfair Display / Source Serif 4 · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A 4 px rule, then four zones: the nameplate (display serif, step 3) on 1–4, page links stacked in small uppercase on 6–7, the address on 8–9, and an italic colophon note (typefaces used, printer, legal line) in small muted type on 10–12.
Northfold
  • Services
  • Work
  • About
  • Contact

Rua da Boavista 72, 1200-066 Lisboa

© 2026 Northfold. All rights reserved.

Layout tree (as in design/layout.json)
{
  "pattern": "footer.editorial-magazine-colophon",
  "kind": "footer",
  "grid": {
    "nameplate": "1-4",
    "links": "6-7",
    "address": "8-9",
    "colophon": "10-12"
  },
  "slots": [
    "siteName",
    "pages",
    "address",
    "legal"
  ],
  "tree": {
    "el": "box",
    "gap": 4,
    "children": [
      {
        "el": "divider",
        "weight": 4
      },
      {
        "el": "grid",
        "gap": 3,
        "align": "start",
        "children": [
          {
            "el": "logo",
            "span": "1-4",
            "slot": "siteName",
            "style": "wordmark"
          },
          {
            "el": "nav-links",
            "span": "6-7",
            "slot": "pages",
            "dir": "col",
            "style": "plain"
          },
          {
            "el": "text",
            "span": "8-9",
            "slot": "address",
            "role": "small"
          },
          {
            "el": "text",
            "span": "10-12",
            "color": "textMuted",
            "slot": "legal",
            "role": "small",
            "italic": true
          }
        ]
      }
    ]
  }
}
Component example: reference/footer.editorial-magazine-colophon.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.editorial-magazine-colophon — Editorial Magazine</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { padding: 48px 0; } footer .grid { border-top: 4px solid var(--rule); padding-top: 32px; align-items: start; }
  .name { grid-column: 1 / 5; font: 400 var(--step-2)/1 var(--display); }
  nav { grid-column: 6 / 8; display: grid; gap: 6px; } nav a { color: var(--ink); text-decoration: none; }
  .addr { grid-column: 8 / 10; font-size: 15px; } .colophon { grid-column: 10 / 13; font-size: 14px; font-style: italic; color: var(--muted); }
</style>
</head>
<body>
<footer class="wrap">
  <div class="grid">
    <p class="name">The Long Table</p>
    <nav class="kicker" aria-label="Footer"><a href="/food">Food</a><a href="/travel">Travel</a><a href="/about">About</a><a href="/contact">Contact</a></nav>
    <p class="addr">14 Rue des Tanneurs<br>75003 Paris</p>
    <p class="colophon">Set in Playfair Display and Source Serif. Printed on recycled stock in Lyon. © 2026 The Long Table.</p>
  </div>
</footer>
</body>
</html>

Other patterns in this design

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