Layout tree (as in design/layout.json)
{
"pattern": "nav.frosted-floating-capsule",
"kind": "nav",
"grid": {
"capsule": "1-12"
},
"slots": [
"siteName",
"pages",
"cta"
],
"tree": {
"el": "box",
"bg": "surface",
"dir": "row",
"gap": 3,
"pad": [
1,
2
],
"align": "center",
"justify": "between",
"border": "all",
"children": [
{
"el": "logo",
"slot": "siteName",
"style": "wordmark"
},
{
"el": "nav-links",
"mobile": "scroll-x",
"slot": "pages",
"dir": "row",
"style": "pill"
},
{
"el": "button",
"slot": "cta",
"variant": "primary",
"size": "sm"
}
]
}
}Component example: reference/nav.frosted-floating-capsule.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.frosted-floating-capsule — Frosted Glass</title>
<link rel="stylesheet" href="base.css">
<style>
body { background: radial-gradient(40% 60% at 20% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent), var(--bg); min-height: 60vh; }
.capsule { position: sticky; top: 24px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--unit) * 3);
padding: 8px 8px 8px 20px; border-radius: 999px; }
.logo { font: 600 var(--step-1)/1 var(--font-heading); color: var(--heading); text-decoration: none; }
.links { display: flex; gap: 4px; list-style: none; padding: 0; overflow-x: auto; }
.links a { display: block; padding: 10px 16px; border-radius: 999px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.links a[aria-current="page"] { background: var(--frost-alt); color: var(--heading); }
.capsule .btn { padding: 10px 18px; }
@media (max-width: 640px) { .capsule { flex-wrap: wrap; border-radius: var(--radius); } .links { order: 3; width: 100%; } }
</style>
</head>
<body>
<div class="wrap">
<nav class="capsule glass" aria-label="Main">
<a class="logo" href="/">Ledgerlight</a>
<ul class="links">
<li><a href="/product" aria-current="page">Product</a></li>
<li><a href="/security">Security</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/customers">Customers</a></li>
</ul>
<a class="btn" href="/demo">Book a demo</a>
</nav>
</div>
</body>
</html>