diff --git a/docs-site/src/components/Wordmark.tsx b/docs-site/src/components/Wordmark.tsx
new file mode 100644
index 0000000..35b2f34
--- /dev/null
+++ b/docs-site/src/components/Wordmark.tsx
@@ -0,0 +1,27 @@
+// The punktfunk "funk" wordmark — the real brand typo from the marketing site.
+// The source asset is a single light-violet variant (made for dark surfaces), so
+// rather than an <img> we paint it as a CSS mask and colour it per theme: the
+// deep-violet brand on light, the light-violet lens highlight on dark (matching
+// the site). Size it by setting a height (e.g. `h-5`); width follows the 579×136
+// aspect ratio.
+const maskStyle = {
+  maskImage: 'url(/funk-wordmark.webp)',
+  WebkitMaskImage: 'url(/funk-wordmark.webp)',
+  maskRepeat: 'no-repeat',
+  WebkitMaskRepeat: 'no-repeat',
+  maskSize: 'contain',
+  WebkitMaskSize: 'contain',
+  maskPosition: 'center',
+  WebkitMaskPosition: 'center',
+} as const
+
+export default function Wordmark({ className = '' }: { className?: string }) {
+  return (
+    <span
+      role="img"
+      aria-label="punktfunk"
+      style={maskStyle}
+      className={`inline-block aspect-[579/136] bg-[var(--pf-brand)] dark:bg-[var(--pf-highlight)] ${className}`}
+    />
+  )
+}
diff --git a/docs-site/src/lib/layout.shared.tsx b/docs-site/src/lib/layout.shared.tsx
index d447ae3..41d2f95 100644
--- a/docs-site/src/lib/layout.shared.tsx
+++ b/docs-site/src/lib/layout.shared.tsx
@@ -1,5 +1,6 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 import BrandMark from '@/components/BrandMark'
+import Wordmark from '@/components/Wordmark'
 
 // Shared chrome (nav title, links) for both the docs layout and the home layout.
 // The lens mark + wordmark mirror the punktfunk marketing site's header.
@@ -9,7 +10,7 @@ export function baseOptions(): BaseLayoutProps {
       title: (
         <>
           <BrandMark className="size-6" />
-          <span className="font-display font-semibold tracking-tight">punktfunk</span>
+          <Wordmark className="h-4" />
         </>
       ),
     },
diff --git a/docs-site/src/routes/index.tsx b/docs-site/src/routes/index.tsx
index 6e8b79c..d0b8f93 100644
--- a/docs-site/src/routes/index.tsx
+++ b/docs-site/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { HomeLayout } from 'fumadocs-ui/layouts/home'
 import BrandMark from '@/components/BrandMark'
+import Wordmark from '@/components/Wordmark'
 import { baseOptions } from '@/lib/layout.shared'
 
 export const Route = createFileRoute('/')({ component: Home })
@@ -10,7 +11,7 @@ function Home() {
     <HomeLayout {...baseOptions()}>
       <main className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-24 text-center">
         <BrandMark className="size-20 drop-shadow-[0_8px_30px_rgba(108,91,243,0.45)]" />
-        <h1 className="font-display text-4xl font-bold tracking-tight">punktfunk</h1>
+        <Wordmark className="h-12 md:h-14" />
         <p className="max-w-xl text-fd-muted-foreground">
           Linux-first, low-latency desktop and game streaming — a shared Rust protocol
           core with native clients per platform.