footer.swiss-colophon · Colophon

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

Rule
Four column zones under a 2px rule: wordmark 1–3, links stacked 5–6, address 7–9, legal 10–12. Small type only.
Slots
siteName, pages, address, legal
Grid areas
logo 1-3 · links 5-6 · address 7-9 · legal 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A 2 px rule, then four zones in small type: wordmark 1–3, page links stacked 5–6, address 7–9, muted legal line 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.swiss-colophon",
  "kind": "footer",
  "grid": {
    "logo": "1-3",
    "links": "5-6",
    "address": "7-9",
    "legal": "10-12"
  },
  "slots": [
    "siteName",
    "pages",
    "address",
    "legal"
  ],
  "tree": {
    "el": "box",
    "gap": 4,
    "children": [
      {
        "el": "divider",
        "weight": 2
      },
      {
        "el": "grid",
        "gap": 3,
        "children": [
          {
            "el": "logo",
            "span": "1-3",
            "slot": "siteName",
            "style": "wordmark"
          },
          {
            "el": "nav-links",
            "span": "5-6",
            "slot": "pages",
            "dir": "col",
            "style": "plain"
          },
          {
            "el": "text",
            "span": "7-9",
            "slot": "address",
            "role": "small"
          },
          {
            "el": "text",
            "span": "10-12",
            "color": "textMuted",
            "slot": "legal",
            "role": "small"
          }
        ]
      }
    ]
  }
}
Component example: reference/footer.swiss-colophon.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.swiss-colophon — Swiss International</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { padding: calc(var(--unit) * 6) 0; }
  footer .grid { border-top: 2px solid var(--rule); padding-top: calc(var(--unit) * 4); row-gap: 24px; font-size: calc(var(--base) * 0.8); }
  .logo { grid-column: 1 / 4; font: 700 var(--base)/1 var(--font-heading); }
  .links { grid-column: 5 / 7; display: grid; gap: 4px; list-style: none; padding: 0; } .links a { text-decoration: none; }
  .address { grid-column: 7 / 10; } .legal { grid-column: 10 / 13; }
</style>
</head>
<body>
<footer class="wrap">
  <div class="grid">
    <span class="logo">Atelier Raster</span>
    <ul class="links"><li><a href="/work">Work</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul>
    <p class="address">Steinenberg 7<br>4051 Basel, Switzerland</p>
    <p class="legal muted">© 2026 Atelier Raster AG. Set in Inter Tight and Hanken Grotesk.</p>
  </div>
</footer>
</body>
</html>

Other patterns in this design

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