Layout tree (as in design/layout.json)
{
"pattern": "footer.memphis-squiggle-base",
"kind": "footer",
"grid": {
"logo": "1-4",
"links": "5-9",
"legal": "10-12"
},
"slots": [
"siteName",
"pages",
"legal"
],
"tree": {
"el": "box",
"gap": 4,
"children": [
{
"el": "shape",
"kind": "bar",
"size": "sm",
"fill": "accent"
},
{
"el": "grid",
"gap": 3,
"align": "center",
"children": [
{
"el": "box",
"span": "1-4",
"dir": "row",
"gap": 1,
"align": "center",
"children": [
{
"el": "logo",
"slot": "siteName",
"style": "wordmark"
},
{
"el": "shape",
"kind": "triangle",
"size": "sm",
"fill": "accent2"
}
]
},
{
"el": "nav-links",
"span": "5-9",
"mobile": "scroll-x",
"slot": "pages",
"dir": "row",
"style": "pill"
},
{
"el": "text",
"span": "10-12",
"slot": "legal",
"role": "small"
}
]
}
]
}
}Component example: reference/footer.memphis-squiggle-base.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>footer.memphis-squiggle-base — Memphis</title>
<link rel="stylesheet" href="base.css">
<style>
footer { padding: 48px 0; display: grid; gap: 32px; }
.row { align-items: center; row-gap: 16px; }
.brand { grid-column: 1 / 5; display: flex; align-items: center; gap: 10px; font: 800 var(--step-2)/1 var(--display); color: var(--ink); }
.brand .tri::after { background: var(--lime); } .brand .tri { width: 24px; }
nav { grid-column: 5 / 10; display: flex; gap: 8px; flex-wrap: wrap; } nav a { padding: 6px 14px; border: var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; }
.legal { grid-column: 10 / 13; font-size: 14px; }
</style>
</head>
<body>
<footer class="wrap">
<svg class="squiggle" viewBox="0 0 240 24" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,20 20,4 40,20 60,4 80,20 100,4 120,20 140,4 160,20 180,4 200,20 220,4 240,20" fill="none" stroke="#150E06" stroke-width="4" stroke-linejoin="round"/></svg>
<div class="row grid">
<div class="brand">Sprinkle Club <span class="tri" aria-hidden="true"></span></div>
<nav aria-label="Footer"><a href="/menu">Menu</a><a href="/parties">Parties</a><a href="/visit">Visit</a><a href="/jobs">Jobs</a></nav>
<p class="legal">Oranienstraße 21, Berlin · © 2026 Sprinkle Club GmbH</p>
</div>
</footer>
</body>
</html>