Living Styleguide — Navigation

01

The sticky header, one skeleton

Two navs already exist in this system — index.html's same-page jump nav and marketing-page-demo.html's full site header. Both share the same skeleton: position:sticky, a translucent backdrop-filter:blur(), a hairline bottom border, mono-label links. What differs is cargo, not structure — a jump nav has nowhere else to send you, so it's links only; a site header is the entry point to the whole page, so it carries a logo and one CTA. Scroll the frame below to see the header stay put and its blur engage.

Playbook.

Agents Skills BuildStart

Scroll this frame. The header stays pinned and its background turns from solid paper to a blurred translucency, the same effect index.html's jump nav and the marketing page's header both already use.

index.html's version drops the logo and CTA — a same-page jump nav has nowhere else to send the reader, so pill links are the whole job.

marketing-page-demo.html's version carries all three — logo, links, one CTA-weight action — because it's the entry point to a full page, not a mid-page jump.

Keep scrolling. Same header, same blur, same border the whole way down.

This is the last line. The header above never moved.

Sticky header · shared skeleton

Structure, not cargo

Sticky, blurred, hairline border, mono links — the same four properties in both existing navs.

Jump nav (index.html): links only, no logo/CTA
Site header (marketing-page-demo.html): logo + links + CTA
Both: sticky, blur(10px), 1px var(--line) border-bottom

02

Current-page indication

The active link's tint and underline are not their own hardcoded color. They read --hero-accent — the same section-identity token documented in Wayfinding. Change the section's accent once, and the nav's current-page indicator updates with it, the same as the hero glow and the primary button do.

Skills Agents Commands Build

Active link

Reads --hero-accent, not its own color

The wrapper above sets --hero-accent:var(--violet) once. The current link's tint background and underline both read that one variable.

On-brand: don't hardcode a second "active" color. If the section already has an identity token, the nav should read it, not duplicate it.

03

Small screens — the collapsed menu

Neither existing nav documents a mobile state — index.html's jump nav just lets its pill row scroll horizontally, and the marketing page hides its links outright under 720px with no way back in. This is new: a hamburger toggle, a slide-down panel, closes itself when a link is picked.

Playbook.

Collapsed menu

New, not systematized

A real aria-expanded toggle drives both the burger's own icon animation and a max-height transition on the panel below it.