Nav
Site header arrangements. Six Planar variants covering every shape in frame 56:1288: Notch (live), Logo Center, Menu Left, Menu Center, Menu Right, and the contained Island pill. Each variant shares the same NavLinks and NavCta atoms; the mobile drawer is a shared NavMobileDrawer scoped per instance.
Nav Elements
Atoms, arrangements, and container shells shared by every header variant. Planar groups them in frame 56:1288. Atoms live in src/components/nav/; arrangements are inlined per variant; container shells (Island, Notch) are rendered as Variants 06 and 01 below.
Page-top chrome
Announcement bar sits above the nav on pages that need a banner row. Planar groups it with the nav stack in frame 537:16740 (announcement + nav arrangements together as the page-top chrome unit). Rendered at natural width below; same component appears in /library/sections/announcement and on the marketing home reference at /library/pages/home.
Announcement · 108:5039
Thin centered banner (text-small) with an inline underlined CTA link. Sits on bg-bg-page with py-[18px] vertical padding, max-w-content + responsive horizontal padding.
🚀 Limited early adopter program now open. Request access
Atoms
Brand wordmark · 56:1516
Inline "Journey" in font-sans text-h5 font-medium. Planar uses an image asset; we render the wordmark as text so it inherits color tokens.
NavLinks · 56:1606
Horizontal list of menu links at gap-6, text-small. Takes links: { label, href }[] plus an optional class override for flex sizing inside a variant.
NavCta · 56:1605
Login link plus primary CTA. Takes ctaLabel, ctaHref, optional loginLabel / loginHref.
NavMobileDrawer
Shared full-screen mobile drawer used by every variant. Renders an overlay marked data-nav-drawer="{name}" plus a scoped script that pairs it with any [data-nav-drawer-toggle="{name}"] button on the page. Functional toggle only: click to open, Esc or any link to close, body scroll-lock while open, focus returns to the trigger on close. No Planar equivalent; added for production-grade nav behaviour.
Dropdown atoms
Five element types from Planar's dropdown frame (58:3485). The Journey nav has three flat links and does not open any dropdown today; these atoms exist for catalog reference and for any future sub-menu that wants to compose them. Shells (Small / Medium / Wide) and shell compositions live in /library/primitives/dropdowns.
DropdownLinksLarge · 58:3620
Top-level page links at text-h4 in the display typeface, stacked at gap-2. Used as the lead group inside Wide dropdowns.
DropdownLinksSmall · 58:3641
Secondary link column with a faded category label on top and small body-typeface links at gap-2.
DropdownLinkDetailed · 60:3900
Two-line block: title in text-primary, muted description below. Used as a row inside Wide and Medium dropdowns.
DropdownHoverBox · 60:4012
Card-link cell. The whole padded area is clickable and picks up a cream-100 fill on hover. The optional active prop pins the hover state (used in documentation to show the active fill, and in code to mark a selected item). Pair with DropdownLinkDetailed when the bare 2-line link is wanted without the card framing.
DropdownLinkBlock · 60:4204
Horizontal label plus optional version badge, used as list items inside Small dropdowns. Hovered or active rows pick up a cream-100 fill.
Arrangements
The four bare flex compositions that every variant wraps in a section. Each preview below shows the inner arrangement only, on the page background.
Menu Left · 58:2785
Logo and NavLinks bunched on the left; NavCta on the right. Implemented as HeaderMenuLeft (Variant 03).
Menu Right · 58:2792
Logo on the left; NavLinks plus NavCta bunched on the right. Implemented as HeaderMenuRight (Variant 05).
Menu Center · 58:2799
Three flex-1 thirds: logo (left), NavLinks (centered), NavCta (right). Implemented as HeaderMenuCenter (Variant 04, also wrapped in notch chrome).
Logo Center · 58:2983
Three flex-1 thirds: NavLinks (left), logo (centered), NavCta (right). Implemented as HeaderLogoCenter (Variant 02).
Container shells
Two Planar shells wrap an arrangement in additional chrome. Each renders at its natural width below; the same components also appear as Variants 06 and 01.
Nav Island · 58:2914
712px contained pill (surface-2 fill, rounded-xs). Holds logo plus primary CTA plus hamburger inside.
Nav Notch · 58:3180
Shell that wraps a Menu Center arrangement in cream-100 fill with rounded-b-xl. Hangs from the top of the viewport when sticky (the live Header.astro ships this shape).
Dropdown compositions
Five Wide-shell compositions from Planar's dropdown frame (58:3485). Each is the same 1080 × 432 Wide shell with a different internal arrangement of Large + Small + Detailed link groups plus a Box Layout module slot. Demos scroll horizontally on viewports narrower than 1080.
Wide 01 · 58:3487
Lead Large links plus two Small columns (Product, Company) tucked close together below, with a wide rectangular image module taking the right half. Journey divergence from Planar: Product / Company are closer (gap-3 instead of gap-6) and the module is half-width (flex-1) instead of a 272px square.
Wide 02 · 60:3859
Lead Large links plus three HoverBox card-links below (title + description, fill on hover), with a Box Layout module on the right.
Wide 03 · 58:3689
Lead Large links plus a single Small column below, with a larger flex-1 Box Layout module on the right (more visual room for the module).
Wide 04 · 58:3724
Lead Large links plus three Small columns below (Product, Company, Social), with a Box Layout module on the right. Highest link density of the Wide compositions.
Wide 05 · 58:3765
Horizontal layout: Large links plus two Small columns in a single row across the top, then a full-width Box Layout module strip (h-[96px]) along the bottom.
Medium 01 · 60:3952
528px shell, 2x2 grid of HoverBox cells. First cell pinned to its active state; the other three apply the cream-100 fill on pointer hover (try hovering any cell).
Medium 02 · 60:4032
804px shell, 2x2 grid of HoverBox cells plus a Box Layout module on the right. Same hover-on-card behaviour as Medium 01; first cell pinned active.
Small 01 · 60:4158
252px shell, flat vertical list of Link Blocks with a divider above the trailing utility link. Second item shown in active state.
Small 02 · 60:4236
252px shell with sectioned subheaders. Each subheader (Information, Company) is a plain text label inside its own padded row; items below the divider sit outside the sections.
Information
Style guide
v1.0Licenses
v1.0Changelog
v1.0Company
About us
v1.0Blog
v1.0Visit Journey
v1.0Variants
Six arrangements composing the atoms above. All five non-Island variants display at the same outer width (max-w-content with responsive padding); Island is intentionally narrower (a 712px contained pill).
Variant 01 · Notch · 64:1155 / 58:3180
Sticky notch nav: cream-100 fill, 60px tall, rounded bottom corners (rounded-b-xl). Three-third arrangement inside (logo / centered links / Login + primary CTA).
Source: src/components/Header.astro. Live at the top of every page.
Variant 02 · Logo Center · 64:1444 / 58:2983
Logo-center nav on bg-page (no notch). Three flex-1 thirds: nav links left, wordmark center, Login + primary CTA right.
Variant 03 · Menu Left · 64:1327 / 58:2785
Logo and nav links bunched on the left, Login + primary CTA on the right. Most common header shape for product sites.
Variant 04 · Menu Center · 64:1378 / 58:2799
Logo on the left, nav links centered via three flex-1 thirds, Login + primary CTA on the right. Same arrangement as inside the Notch, without the notched container.
Variant 05 · Menu Right · 64:1411 / 58:2792
Logo on the left, all menu links plus Login plus primary CTA bunched on the right (justify-end). Visually balanced when the brand wordmark wants to stand alone.
Variant 06 · Island · 64:1493 / 58:2914
Contained 712px pill, surface-2 fill, ~6px radius (rounded-xs in our spine, 1px above Planar). Holds logo on the left and primary CTA + hamburger on the right. Compact alternative for pages that want a contained navigation island instead of a full-width bar.
Variant 07 · Menu Center bare · 64:1378 / 58:2799
Same Menu Center arrangement as Variant 04 (logo / centered links / Login + primary CTA) but stripped of the notch chrome. Flat on bg-bg-page with max-w-content + responsive padding. Use when a tighter, less decorated header reads better than the notched shell. The marketing home page reference at /library/pages/home uses this variant.
Wired demo
Menu Left arrangement with each top-level nav link wired to its dropdown. Hover or keyboard-focus a trigger to open it; move away or press Escape to close. Pure CSS hover and focus-within state plus a small Escape-key handler — no motion library, no live nav change.
- Pages opens the Wide 01 composition (Large links + Product / Company columns + image module).
- Company opens the Medium 01 composition (2x2 HoverBox grid).
- Information opens the Small 02 composition (sectioned Link Blocks with subheaders).