Header / Navbar
Top navigation with logo and links. The frame every landing page opens with.
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#18181b, #fafafa);
--color-accent: light-dark(#4f46e5, #818cf8);
--color-bg: light-dark(#ffffff, #0b0b0d);
--color-surface: light-dark(#f7f7f8, #161619);
--color-text: light-dark(#0a0a0c, #f5f5f6);
--color-text-muted: light-dark(#52525b, #a1a1aa);
--color-border: light-dark(#e4e4e7, #26262b);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.625rem;
--shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 4px 12px rgb(10 10 12 / 0.06), 0 16px 40px rgb(10 10 12 / 0.06);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#4f46e5, #818cf8);
--color-accent: light-dark(#a855f7, #c084fc);
--color-bg: light-dark(#ffffff, #0c0c18);
--color-surface: light-dark(#f5f5ff, #16162b);
--color-text: light-dark(#111127, #ececf6);
--color-text-muted: light-dark(#5a5a72, #9d9dbd);
--color-border: light-dark(#e4e4f2, #28284a);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.75rem;
--shadow: 0 1px 2px rgb(79 70 229 / 0.06), 0 6px 16px rgb(79 70 229 / 0.10), 0 20px 48px rgb(79 70 229 / 0.10);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#0d9488, #2dd4bf);
--color-accent: light-dark(#f97316, #fb923c);
--color-bg: light-dark(#fbfaf8, #171412);
--color-surface: light-dark(#f3f0ea, #221e1a);
--color-text: light-dark(#292524, #ece7e0);
--color-text-muted: light-dark(#6b6560, #a8a099);
--color-border: light-dark(#e5dfd6, #37312a);
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 1rem;
--shadow: 0 2px 6px rgb(90 75 60 / 0.06), 0 10px 28px rgb(90 75 60 / 0.10);
--container-width: 1120px;
}
HTML
<header class="s-nav-header-logo-links">
<nav class="nh-inner">
<a class="nh-logo" href="#"><span class="nh-mark"></span>Lumen</a>
<ul class="nh-links">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>CSS block only, works with any theme's tokens
.s-nav-header-logo-links {
background: color-mix(in srgb, var(--color-bg) 96%, var(--color-primary));
border-bottom: 1px solid var(--color-border);
font-family: var(--font-body);
}
.s-nav-header-logo-links .nh-inner {
max-width: var(--container-width);
margin-inline: auto;
padding: var(--space-md) var(--space-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
}
.s-nav-header-logo-links .nh-logo {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
color: var(--color-text);
text-decoration: none;
}
.s-nav-header-logo-links .nh-mark {
width: 1.15rem;
height: 1.15rem;
border-radius: 0.35rem;
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, var(--color-accent)));
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.s-nav-header-logo-links .nh-links {
display: flex;
gap: var(--space-lg);
list-style: none;
margin: 0;
padding: 0;
}
.s-nav-header-logo-links .nh-links a {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
text-decoration: none;
padding-bottom: var(--space-xs);
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.s-nav-header-logo-links .nh-links a:hover {
color: var(--color-text);
border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
@media (max-width: 768px) {
.s-nav-header-logo-links .nh-links {
display: none;
}
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#18181b, #fafafa);
--color-accent: light-dark(#4f46e5, #818cf8);
--color-bg: light-dark(#ffffff, #0b0b0d);
--color-surface: light-dark(#f7f7f8, #161619);
--color-text: light-dark(#0a0a0c, #f5f5f6);
--color-text-muted: light-dark(#52525b, #a1a1aa);
--color-border: light-dark(#e4e4e7, #26262b);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.625rem;
--shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 4px 12px rgb(10 10 12 / 0.06), 0 16px 40px rgb(10 10 12 / 0.06);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#4f46e5, #818cf8);
--color-accent: light-dark(#a855f7, #c084fc);
--color-bg: light-dark(#ffffff, #0c0c18);
--color-surface: light-dark(#f5f5ff, #16162b);
--color-text: light-dark(#111127, #ececf6);
--color-text-muted: light-dark(#5a5a72, #9d9dbd);
--color-border: light-dark(#e4e4f2, #28284a);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.75rem;
--shadow: 0 1px 2px rgb(79 70 229 / 0.06), 0 6px 16px rgb(79 70 229 / 0.10), 0 20px 48px rgb(79 70 229 / 0.10);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#0d9488, #2dd4bf);
--color-accent: light-dark(#f97316, #fb923c);
--color-bg: light-dark(#fbfaf8, #171412);
--color-surface: light-dark(#f3f0ea, #221e1a);
--color-text: light-dark(#292524, #ece7e0);
--color-text-muted: light-dark(#6b6560, #a8a099);
--color-border: light-dark(#e5dfd6, #37312a);
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 1rem;
--shadow: 0 2px 6px rgb(90 75 60 / 0.06), 0 10px 28px rgb(90 75 60 / 0.10);
--container-width: 1120px;
}
HTML
<header class="s-nav-header-logo-links-cta">
<nav class="nh-inner">
<a class="nh-logo" href="#"><span class="nh-mark"></span>Lumen</a>
<ul class="nh-links">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Docs</a></li>
</ul>
<a class="nh-cta" href="#">Get started</a>
</nav>
</header>CSS block only, works with any theme's tokens
.s-nav-header-logo-links-cta {
background: color-mix(in srgb, var(--color-bg) 96%, var(--color-primary));
border-bottom: 1px solid var(--color-border);
font-family: var(--font-body);
}
.s-nav-header-logo-links-cta .nh-inner {
max-width: var(--container-width);
margin-inline: auto;
padding: var(--space-md) var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-lg);
}
.s-nav-header-logo-links-cta .nh-logo {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
color: var(--color-text);
text-decoration: none;
}
.s-nav-header-logo-links-cta .nh-mark {
width: 1.15rem;
height: 1.15rem;
border-radius: 0.35rem;
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, var(--color-accent)));
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.s-nav-header-logo-links-cta .nh-links {
display: flex;
gap: var(--space-lg);
list-style: none;
margin: 0 auto 0 var(--space-md);
padding: 0;
}
.s-nav-header-logo-links-cta .nh-links a {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
text-decoration: none;
padding-bottom: var(--space-xs);
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.s-nav-header-logo-links-cta .nh-links a:hover {
color: var(--color-text);
border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.s-nav-header-logo-links-cta .nh-cta {
display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius);
background: var(--color-primary);
color: var(--color-bg);
font-size: var(--text-base);
font-weight: var(--weight-medium);
text-decoration: none;
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 14%, transparent), 0 6px 16px color-mix(in srgb, var(--color-primary) 22%, transparent);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.s-nav-header-logo-links-cta .nh-cta:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px color-mix(in srgb, var(--color-text) 14%, transparent), 0 10px 22px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
@media (max-width: 768px) {
.s-nav-header-logo-links-cta .nh-links {
display: none;
}
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#18181b, #fafafa);
--color-accent: light-dark(#4f46e5, #818cf8);
--color-bg: light-dark(#ffffff, #0b0b0d);
--color-surface: light-dark(#f7f7f8, #161619);
--color-text: light-dark(#0a0a0c, #f5f5f6);
--color-text-muted: light-dark(#52525b, #a1a1aa);
--color-border: light-dark(#e4e4e7, #26262b);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.625rem;
--shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 4px 12px rgb(10 10 12 / 0.06), 0 16px 40px rgb(10 10 12 / 0.06);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#4f46e5, #818cf8);
--color-accent: light-dark(#a855f7, #c084fc);
--color-bg: light-dark(#ffffff, #0c0c18);
--color-surface: light-dark(#f5f5ff, #16162b);
--color-text: light-dark(#111127, #ececf6);
--color-text-muted: light-dark(#5a5a72, #9d9dbd);
--color-border: light-dark(#e4e4f2, #28284a);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.75rem;
--shadow: 0 1px 2px rgb(79 70 229 / 0.06), 0 6px 16px rgb(79 70 229 / 0.10), 0 20px 48px rgb(79 70 229 / 0.10);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#0d9488, #2dd4bf);
--color-accent: light-dark(#f97316, #fb923c);
--color-bg: light-dark(#fbfaf8, #171412);
--color-surface: light-dark(#f3f0ea, #221e1a);
--color-text: light-dark(#292524, #ece7e0);
--color-text-muted: light-dark(#6b6560, #a8a099);
--color-border: light-dark(#e5dfd6, #37312a);
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 1rem;
--shadow: 0 2px 6px rgb(90 75 60 / 0.06), 0 10px 28px rgb(90 75 60 / 0.10);
--container-width: 1120px;
}
HTML
<header class="s-nav-header-centered-logo">
<nav class="nh-inner">
<ul class="nh-links nh-left">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
<a class="nh-logo" href="#"><span class="nh-mark"></span>Lumen</a>
<ul class="nh-links nh-right">
<li><a href="#">Docs</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
</header>CSS block only, works with any theme's tokens
.s-nav-header-centered-logo {
background: color-mix(in srgb, var(--color-bg) 96%, var(--color-primary));
border-bottom: 1px solid var(--color-border);
font-family: var(--font-body);
}
.s-nav-header-centered-logo .nh-inner {
max-width: var(--container-width);
margin-inline: auto;
padding: var(--space-md) var(--space-lg);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-lg);
}
.s-nav-header-centered-logo .nh-logo {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
color: var(--color-text);
text-decoration: none;
}
.s-nav-header-centered-logo .nh-mark {
width: 1.15rem;
height: 1.15rem;
border-radius: 0.35rem;
background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, var(--color-accent)));
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.s-nav-header-centered-logo .nh-links {
display: flex;
gap: var(--space-lg);
list-style: none;
margin: 0;
padding: 0;
}
.s-nav-header-centered-logo .nh-right {
justify-content: flex-end;
}
.s-nav-header-centered-logo .nh-links a {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
text-decoration: none;
padding-bottom: var(--space-xs);
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.s-nav-header-centered-logo .nh-links a:hover {
color: var(--color-text);
border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
@media (max-width: 768px) {
.s-nav-header-centered-logo .nh-inner {
grid-template-columns: 1fr;
justify-items: center;
gap: var(--space-md);
}
.s-nav-header-centered-logo .nh-right {
justify-content: center;
}
}
Modern CSS in this block
Baseline 2023 — works in every up-to-date browser.
- color-mix()Newly availableMixing colors without a preprocessor
- text-wrap: balanceNewly availableBalanced headlines without manual line breaks
Plus universally supported features: logical properties, custom properties. Baseline status is pulled from each feature's reference snippet.