Layout tree (as in design/layout.json)
{
"pattern": "nav.maximalist-sticker-nav",
"kind": "nav",
"slots": [
"siteName",
"pages",
"cta"
],
"tree": {
"el": "box",
"dir": "row",
"gap": 3,
"align": "center",
"justify": "between",
"wrap": true,
"children": [
{
"el": "logo",
"slot": "siteName",
"style": "boxed"
},
{
"el": "nav-links",
"mobile": "scroll-x",
"slot": "pages",
"dir": "row",
"style": "pill"
},
{
"el": "shape",
"mobile": "hide",
"kind": "star",
"size": "sm",
"fill": "accent2",
"rotate": 10
},
{
"el": "button",
"slot": "cta",
"variant": "primary",
"size": "sm"
}
]
}
}Component example: reference/nav.maximalist-sticker-nav.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.maximalist-sticker-nav — Maximalist Collage</title>
<link rel="stylesheet" href="base.css">
<style>
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; }
.logo { font: 400 var(--step-1)/1 var(--font-heading); border: var(--ink); padding: 8px 14px; color: var(--heading); text-decoration: none; background: var(--bg); }
nav ul { display: flex; gap: 8px; list-style: none; padding: 0; }
nav a { display: block; padding: 8px 16px; border: var(--ink); border-radius: 999px; font: 700 var(--base)/1 var(--font-body); color: var(--heading); text-decoration: none; }
nav a[aria-current] { background: var(--accent2); color: var(--on-accent2); }
.star { width: 34px; aspect-ratio: 1; background: var(--accent2); rotate: 10deg;
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@media (max-width: 640px) { nav { width: 100%; order: 3; overflow-x: auto; } }
</style>
</head>
<body>
<header class="wrap">
<a class="logo" href="/">Second Skin</a>
<nav aria-label="Main"><ul><li><a href="/" aria-current="page">Rails</a></li><li><a href="/repairs">Repairs</a></li><li><a href="/workshops">Workshops</a></li><li><a href="/about">About</a></li></ul></nav>
<span class="star hide-phone" aria-hidden="true"></span>
<a class="btn btn-primary" href="/visit">Visit</a>
</header>
</body>
</html>