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. Below md the links fold into a disclosure. No skeuomorphic materials; sharp corners throughout.

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.

Below md the link row collapses behind a menu button; the disclosure drops onto a solid surface with aria-expanded / aria-controls wiring.

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

28

44

68

96

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

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

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

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

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

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

Foreground content stays legible

<div className="relative overflow-hidden">
  <Watermark motif="skull" repeat="center" />
  <SurfaceTexture variant="swell" className="text-primary" opacity={0.1} />
  {/* real content sits above with relative z-10 */}
</div>

--ch-fg-faint
--ch-accent
--ch-font-family-mono

BrandWatermark corners

A single skull stamped into a chosen corner, bleeding slightly off the edge — for hero panels, cards, and receipts. Size, opacity, and colour are overridable via className.

corner="tl"

COLDHARBOR

corner="tr"

COLDHARBOR

corner="bl"

COLDHARBOR

corner="br"

COLDHARBOR

<div className="relative overflow-hidden">
  <BrandWatermark corner="br" />
  {/* card content */}
</div>

--ch-fg-faint