Navbar & Mark

The house mark flies at the top of the ship. One flat dark bar — opaque over solid chrome, or transparent laid over a cinematic hero — with the Privateer Skull, a wordmark, and a gliding active-link underline. Through the md range and below, the menu trigger sits left, the skull remains centred, and account or context actions stay visible on the right. Only the uppercase text links enter the disclosure.

Full-width bars with sample links (Treasury forced active) and a right-aligned action. Solid is the app-chrome default; transparent lays over a hero and blurs the depth behind it.

solid

Page body — the bar sits above the content it commands.

<PirateNavbar
  variant="solid"
  brandName="COLDHARBOR"
  links={links}
  actions={<Button size="sm">Launch</Button>}
  sticky
/>

--ch-surface
--ch-border
--ch-fg
--ch-accent
--ch-focus

Opaque surface bar with a hairline bottom border — the default for app chrome.

transparent

Cinematic hero

Every ship built from the same charts.

<PirateNavbar
  variant="transparent"
  brandName="COLDHARBOR"
  links={links}
  actions={<Button variant="outline" size="sm">Hoist colours</Button>}
/>

--ch-bg
--ch-border
--ch-primary
--ch-accent

Backdrop-blurred bar for cinematic heroes — the depth and motifs behind it show through.

responsive

Page body — the bar sits above the content it commands.

< 768px · small: Menu trigger on the left, skull mark centred, and account/context actions on the right. Only text links enter the panel.
768–1023px · medium: Identical to small: left trigger, centred mark, right-side context actions, and uppercase links in the panel.
≥ 1024px · large: Mark plus wordmark on the left, inline links with the gliding underline, actions on the right. No trigger, no panel.

<PirateNavbar
  variant="solid"
  brandName="COLDHARBOR"
  links={links}
  actions={desktopActions}
  mobileActions={compactAccountControls}
  mobilePanel={mobileSearch}
/>

Resize the window — the bar rewrites itself at lg (1024px). Medium and below place the menu trigger left, keep the skull centred, and retain the lock and account controls on the right. Only uppercase links move into the inert disclosure.

The Privateer Skull mark

The house mark: a skull in a wide privateer hat (compass-star cocked on the brim) over two crossed spears with hex-bolt ends. Drawn in evenodd paths so eyes, nose, teeth and star are true negative space — any material behind reads straight through. Rides currentColor; size it by height.

Sizes & colour

accent

<span className="text-accent">
  <PrivateerSkull className="h-16 w-auto" title="ColdHarbor Privateer" />
</span>

--ch-fg
--ch-accent

Watermark motifs

A faint, token-tinted layer behind content — pointer-inert and aria-hidden. Centre a single mark or tile a field; colour rides text-faint unless a colour class is passed. Static art, no motion of their own.

motif="skull" · center

Foreground content stays legible

motif="compass" · center

Foreground content stays legible

SurfaceTexture · swell

Foreground content stays legible

motif="coordinates" · tile

54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W

18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E

09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W

41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W 41°09′N 08°37′W 54°38′N 19°53′E 18°25′N 64°37′W 09°21′S 149°12′W