diff --git a/docs-site/public/funk-wordmark.png b/docs-site/public/funk-wordmark.png
deleted file mode 100644
index 9ff3fa8..0000000
Binary files a/docs-site/public/funk-wordmark.png and /dev/null differ
diff --git a/docs-site/public/funk-wordmark.webp b/docs-site/public/funk-wordmark.webp
deleted file mode 100644
index b90a04b..0000000
Binary files a/docs-site/public/funk-wordmark.webp and /dev/null differ
diff --git a/docs-site/src/components/Wordmark.tsx b/docs-site/src/components/Wordmark.tsx
index 35b2f34..e5e8a42 100644
--- a/docs-site/src/components/Wordmark.tsx
+++ b/docs-site/src/components/Wordmark.tsx
@@ -1,27 +1,23 @@
-// 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 ![]()
we paint it as a CSS mask and colour it per theme: the
+// The punktfunk "funk" wordmark — vectorised from
+// Export/Punktfunk_Logo-Text_No-Border_Dark.svg (the white export background is
+// dropped). Inline SVG using currentColor so it recolours 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
-
+// the marketing site). Size via height (e.g. `h-4`); width follows the viewBox.
export default function Wordmark({ className = '' }: { className?: string }) {
return (
-
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 579 136"
+ fill="currentColor"
+ className={`w-auto text-[var(--pf-brand)] dark:text-[var(--pf-highlight)] ${className}`}
+ >
+ punktfunk
+
+
+
+
+
)
}