Design reference

The header, in three variants.

One `SiteHeader` component (`src/components/SiteHeader.astro`, variants resolved by `src/lib/chrome.ts`), three layouts keyed to where the visitor is in the journey. Each frame below renders the real component — not a mockup — so this page can't drift from what ships.

Specimens in the frames below are non-interactive previews — their nav, links, and theme toggle are inert: excluded from tab order and the screen-reader landmark list. Use this page's own header above to try the real thing.

01 Full
02 Focused
03 Minimal
04 Accent axis

variant="full"

Full

Evaluation & marketing

The default, and what every sales page uses. Logo, grouped menu, light or dark switch, and Log in. Desktop broad links open click disclosures; mobile groups deeper links and actions inside the menu.

Brand
Grouped primary nav — 6 top-level
Desktop disclosures
Sound toggle
Theme toggle
Login
Mobile grouped menu

Pages: home core niche product company legal sitemap gallery

leadcaravan.com/

variant="focused"

Focused

Conversion & campaign landers

The menu is dropped so it cannot fight the page's one action. One link takes its place. Every focused bucket now ships a default (chrome.ts), so this variant is never a dead end.

Brand
One contextual link
Sound toggle
Theme toggle
Login

Pages: tools funnel checkout post-conversion

leadcaravan.com/checkout

variant="minimal"

Minimal

Auth & account

Logo, sound toggle, and theme toggle only — no nav, no Login button — because the user is already inside an identity flow.

Brand
Sound toggle
Theme toggle

Pages: auth

leadcaravan.com/login

What each variant renders
Element	Full	Focused	Minimal
Brand + logo	Yes	Yes	Yes
Primary nav 6 top-level	Yes	No	No
Desktop disclosures click, not hover	Yes	No	No
Contextual link cta prop	No	Yes	No
Theme toggle	Yes	Yes	Yes
Sound toggle desktop topbar, mobile panel	Yes	Yes	Yes
Login button app subdomain	Yes	Yes	No
Mobile grouped menu < 60rem	Yes	No	No

Orthogonal axis

Accent is separate from layout.

`variant` decides which links render. A page's niche or category decides only the accent — the top hairline, the current-link dot, and the eyebrow pill — resolving to one `data-header-theme` so the two axes never fight in the cascade. Same `full` layout below; only the accent moves.

default — brand accent

niche="home-services" — Home services

niche="finance" — Finance & property investment

niche="healthcare" — Healthcare practices

niche="logistics" — Logistics & transportation

niche="software" — Software & SaaS

niche="commerce" — Commerce / DTC