footer.y2k-chrome-webring · Webring

A footer pattern from Y2K Chrome, 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.y2k-chrome-webring". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Centred: star · wordmark · star, pill links in a row, a pixel-font 'best viewed' line and the legal line.
Slots
siteName, pages, meta, legal
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Everything centred in one column: a row of star, chrome wordmark, star; the page links as pills; a pixel-font line in the muted colour (a webring or "best viewed in any browser" joke, kept short); the legal line in small type. At phone width the pills wrap.
Northfold
  • Services
  • Work
  • About
  • Contact

Booking projects from June 2026

© 2026 Northfold. All rights reserved.

Layout tree (as in design/layout.json)
{
  "pattern": "footer.y2k-chrome-webring",
  "kind": "footer",
  "slots": [
    "siteName",
    "pages",
    "meta",
    "legal"
  ],
  "tree": {
    "el": "box",
    "gap": 3,
    "align": "center",
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "shape",
            "kind": "star",
            "size": "sm",
            "fill": "accent"
          },
          {
            "el": "logo",
            "slot": "siteName",
            "style": "wordmark"
          },
          {
            "el": "shape",
            "kind": "star",
            "size": "sm",
            "fill": "accent2"
          }
        ]
      },
      {
        "el": "nav-links",
        "mobile": "scroll-x",
        "slot": "pages",
        "dir": "row",
        "style": "pill"
      },
      {
        "el": "text",
        "color": "textMuted",
        "slot": "meta",
        "role": "small",
        "align": "center",
        "transform": "uppercase",
        "font": "mono"
      },
      {
        "el": "text",
        "color": "textMuted",
        "slot": "legal",
        "role": "small",
        "align": "center"
      }
    ]
  }
}
Component example: reference/footer.y2k-chrome-webring.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.y2k-chrome-webring — Y2K Chrome</title>
<link rel="stylesheet" href="base.css">
<style>
  footer { padding: 48px 0; display: grid; justify-items: center; gap: 20px; text-align: center; }
  .mark { display: flex; align-items: center; gap: 12px; } .mark .star { width: 20px; } .mark .chrome { font-size: var(--step-2); }
  nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } nav a { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--border); color: var(--text); text-decoration: none; }
  .muted { color: var(--muted); font-size: 14px; }
</style>
</head>
<body>
<footer class="wrap">
  <div class="mark"><span class="star" aria-hidden="true"></span><span class="chrome">Hyperwave</span><span class="star" aria-hidden="true"></span></div>
  <nav aria-label="Footer"><a href="/artists">Artists</a><a href="/releases">Releases</a><a href="/tour">Tour</a><a href="/contact">Contact</a></nav>
  <p class="pixel muted">← prev site · hyperpop webring · next site →</p>
  <p class="muted">© 2026 Hyperwave Records Ltd.</p>
</footer>
</body>
</html>

Other patterns in this design

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