footer.neo-grotesk-small-print · Small print

A footer pattern from Neo-grotesk Minimal, 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.neo-grotesk-small-print". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A hairline, then one line of small print: wordmark 1–2, links 5–8, legal 10–12 — all at step −1.
Slots
siteName, pages, legal
Grid areas
logo 1-2 · links 5-8 · legal 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • A hairline, then a single line at step −1: the wordmark on 1–2, page links in a row on 5–8, and the muted legal line on 10–12. Nothing larger than body size anywhere in the footer.
Northfold
  • Services
  • Work
  • About
  • Contact

© 2026 Northfold. All rights reserved.

Layout tree (as in design/layout.json)
{
  "pattern": "footer.neo-grotesk-small-print",
  "kind": "footer",
  "grid": {
    "logo": "1-2",
    "links": "5-8",
    "legal": "10-12"
  },
  "slots": [
    "siteName",
    "pages",
    "legal"
  ],
  "tree": {
    "el": "box",
    "gap": 3,
    "children": [
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "grid",
        "gap": 3,
        "align": "baseline",
        "children": [
          {
            "el": "logo",
            "span": "1-2",
            "slot": "siteName",
            "style": "wordmark"
          },
          {
            "el": "nav-links",
            "span": "5-8",
            "mobile": "scroll-x",
            "slot": "pages",
            "dir": "row",
            "style": "plain"
          },
          {
            "el": "text",
            "span": "10-12",
            "color": "textMuted",
            "slot": "legal",
            "role": "small",
            "step": -1
          }
        ]
      }
    ]
  }
}
Component example: reference/footer.neo-grotesk-small-print.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.neo-grotesk-small-print — Neo-grotesk Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { padding: 32px 0; } footer .grid { padding-top: 24px; border-top: 1px solid var(--hairline); align-items: baseline; font-size: var(--step--1); }
  .logo { grid-column: 1 / 3; font-weight: 500; } nav { grid-column: 5 / 9; display: flex; gap: 20px; } nav a { color: var(--muted); text-decoration: none; }
  .legal { grid-column: 10 / 13; color: var(--muted); }
</style>
</head>
<body>
<footer class="wrap">
  <div class="grid"><span class="logo">Halden</span><nav aria-label="Footer"><a href="/product">Product</a><a href="/docs">Docs</a><a href="/status">Status</a><a href="/legal">Legal</a></nav><p class="legal">© 2026 Halden AS. Oslo, Norway.</p></div>
</footer>
</body>
</html>

Other patterns in this design

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