footer.brutalist-dump · Dump

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

Rule
Two bordered cells: links stacked and underlined in 1–6; address, email and legal in mono in 7–12. Site name bold above.
Slots
siteName, pages, address, email, legal
Grid areas
links 1-6 · info 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The site name in bold uppercase, then two cells with collapsed 2 px borders: 1–6 lists every page link underlined, one per line; 7–12 has address, email and the legal line in mono small type. At phone width the cells stack.
Northfold
  • Services
  • Work
  • About
  • Contact

Rua da Boavista 72, 1200-066 Lisboa

hello@northfold.com

© 2026 Northfold. All rights reserved.

Layout tree (as in design/layout.json)
{
  "pattern": "footer.brutalist-dump",
  "kind": "footer",
  "grid": {
    "links": "1-6",
    "info": "7-12"
  },
  "slots": [
    "siteName",
    "pages",
    "address",
    "email",
    "legal"
  ],
  "tree": {
    "el": "box",
    "gap": 2,
    "children": [
      {
        "el": "logo",
        "slot": "siteName",
        "style": "wordmark"
      },
      {
        "el": "grid",
        "gap": 0,
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "pad": [
              3,
              2
            ],
            "border": "all",
            "children": [
              {
                "el": "nav-links",
                "slot": "pages",
                "dir": "col",
                "style": "underline"
              }
            ]
          },
          {
            "el": "box",
            "span": "7-12",
            "gap": 1,
            "pad": [
              3,
              2
            ],
            "border": "all",
            "children": [
              {
                "el": "text",
                "slot": "address",
                "role": "small",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "email",
                "role": "small",
                "font": "mono"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "legal",
                "role": "small",
                "font": "mono"
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/footer.brutalist-dump.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.brutalist-dump — Brutalist</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { padding: 32px 0; display: grid; gap: 16px; }
  .name { font-weight: 700; text-transform: uppercase; }
  .links { grid-column: 1 / 7; display: grid; gap: 4px; } .info { grid-column: 7 / 13; display: grid; gap: 4px; font-size: 13px; }
</style>
</head>
<body>
<footer class="wrap">
  <p class="name">Static Noise Records</p>
  <div class="grid cells">
    <nav class="links" aria-label="Footer"><a href="/catalogue">catalogue</a><a href="/artists">artists</a><a href="/shows">shows</a><a href="/contact">contact</a></nav>
    <div class="info"><p>Zaagmolenkade 11, 3035 KC Rotterdam</p><p><a href="mailto:post@staticnoise.nl">post@staticnoise.nl</a></p><p style="color: var(--muted)">(c) 2026 Static Noise. No cookies on this site.</p></div>
  </div>
</footer>
</body>
</html>

Other patterns in this design

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