diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6955352350..56bc9c8901 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -38,6 +38,9 @@ const closeModal = () => modalRef.value?.close?.()
             <LinkBase :to="{ name: 'translation-status' }">
               {{ $t('translation_status.title') }}
             </LinkBase>
+            <LinkBase :to="{ name: 'brand' }">
+              {{ $t('footer.brand') }}
+            </LinkBase>
             <button
               type="button"
               class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8f0cb2290c..1ccfc31d40 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -92,6 +92,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-lucide:languages',
       },
+      {
+        name: 'Brand',
+        label: $t('footer.brand'),
+        to: { name: 'brand' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:palette',
+      },
     ],
   },
   {
@@ -218,17 +226,18 @@ onKeyStroke(
       class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
     >
       <!-- Mobile: Logo (navigates home) -->
-      <NuxtLink
-        v-if="!isSearchExpanded && !isOnHomePage"
-        to="/"
-        :aria-label="$t('header.home')"
-        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
-      >
-        <AppMark class="w-6 h-auto" />
-      </NuxtLink>
+      <LogoContextMenu v-if="!isSearchExpanded && !isOnHomePage" class="sm:hidden flex-shrink-0">
+        <NuxtLink
+          to="/"
+          :aria-label="$t('header.home')"
+          class="font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
+        >
+          <AppMark class="w-6 h-auto" />
+        </NuxtLink>
+      </LogoContextMenu>
 
       <!-- Desktop: Logo (navigates home) -->
-      <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
+      <LogoContextMenu v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
         <NuxtLink
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
@@ -243,7 +252,7 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
-      </div>
+      </LogoContextMenu>
 
       <NuxtLink
         v-if="showLogo && !isSearchExpanded && prNumber"
diff --git a/app/components/Brand/Customize.vue b/app/components/Brand/Customize.vue
new file mode 100644
index 0000000000..35855fed18
--- /dev/null
+++ b/app/components/Brand/Customize.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants'
+
+const { selectedAccentColor } = useAccentColor()
+const { t } = useI18n()
+
+const customAccent = ref<string | null>(null)
+const customBgDark = ref(true)
+const customLogoRef = useTemplateRef('customLogoRef')
+
+const activeAccentId = computed(() => customAccent.value ?? selectedAccentColor.value ?? 'sky')
+
+// Use the palette matching the preview background, not the site theme
+const previewPalette = computed(() =>
+  customBgDark.value ? ACCENT_COLORS.dark : ACCENT_COLORS.light,
+)
+
+const activeAccentColor = computed(() => {
+  return previewPalette.value[activeAccentId.value as AccentColorId] ?? previewPalette.value.sky
+})
+
+const accentColorLabels = computed<Record<AccentColorId, string>>(() => ({
+  sky: t('settings.accent_colors.sky'),
+  coral: t('settings.accent_colors.coral'),
+  amber: t('settings.accent_colors.amber'),
+  emerald: t('settings.accent_colors.emerald'),
+  violet: t('settings.accent_colors.violet'),
+  magenta: t('settings.accent_colors.magenta'),
+  neutral: t('settings.clear_accent'),
+}))
+
+// Color swatches match the preview background palette so the circles reflect what the logo will render
+const pickerColors = computed(() =>
+  Object.entries(previewPalette.value).map(([id, value]) => ({
+    id: id as AccentColorId,
+    label: accentColorLabels.value[id as AccentColorId],
+    value,
+  })),
+)
+
+function getCustomSvgString(): string {
+  const el = customLogoRef.value?.$el as SVGElement | undefined
+  if (!el) return ''
+  const clone = el.cloneNode(true) as SVGElement
+  clone.querySelectorAll<SVGElement>('[fill="currentColor"]').forEach(path => {
+    path.setAttribute('fill', customBgDark.value ? '#fafafa' : '#0a0a0a')
+  })
+  clone.querySelectorAll<SVGElement>('[fill="var(--accent)"]').forEach(path => {
+    const style = getComputedStyle(path as SVGElement)
+    path.setAttribute('fill', style.fill || activeAccentColor.value)
+  })
+  clone.removeAttribute('aria-hidden')
+  clone.removeAttribute('class')
+  return new XMLSerializer().serializeToString(clone)
+}
+
+const svgLoading = ref(false)
+
+function downloadCustomSvg() {
+  const svg = getCustomSvgString()
+  if (!svg) return
+  svgLoading.value = true
+  try {
+    const blob = new Blob([svg], { type: 'image/svg+xml' })
+    downloadFile(blob, `npmx-logo-${activeAccentId.value}.svg`)
+  } finally {
+    svgLoading.value = false
+  }
+}
+
+const pngLoading = ref(false)
+
+async function downloadCustomPng() {
+  const svg = getCustomSvgString()
+  if (!svg) return
+  pngLoading.value = true
+
+  const blob = new Blob([svg], { type: 'image/svg+xml' })
+  const url = URL.createObjectURL(blob)
+
+  try {
+    await document.fonts.ready
+
+    const img = new Image()
+    const loaded = new Promise<void>((resolve, reject) => {
+      // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
+      img.onload = () => resolve()
+      // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
+      img.onerror = () => reject(new Error('Failed to load custom SVG'))
+    })
+    img.src = url
+    await loaded
+
+    const scale = 2
+    const canvas = document.createElement('canvas')
+    canvas.width = 602 * scale
+    canvas.height = 170 * scale
+    const ctx = canvas.getContext('2d')!
+    ctx.fillStyle = customBgDark.value ? '#0a0a0a' : '#ffffff'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    ctx.scale(scale, scale)
+    ctx.drawImage(img, 0, 0, 602, 170)
+
+    await new Promise<void>(resolve => {
+      canvas.toBlob(pngBlob => {
+        if (pngBlob) downloadFile(pngBlob, `npmx-logo-${activeAccentId.value}.png`)
+        resolve()
+      }, 'image/png')
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+    pngLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <section aria-labelledby="brand-customize-heading">
+    <h2 id="brand-customize-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
+      {{ $t('brand.customize.title') }}
+    </h2>
+    <p class="text-fg-muted leading-relaxed mb-8">
+      {{ $t('brand.customize.description') }}
+    </p>
+
+    <div class="border border-border rounded-lg overflow-hidden">
+      <!-- Live preview -->
+      <div
+        class="flex items-center justify-center p-10 sm:p-16 transition-colors duration-300 motion-reduce:transition-none"
+        :class="customBgDark ? 'bg-[#0a0a0a]' : 'bg-white'"
+      >
+        <AppLogo
+          ref="customLogoRef"
+          class="h-10 sm:h-14 w-auto max-w-full transition-colors duration-300 motion-reduce:transition-none"
+          :class="customBgDark ? 'text-[#fafafa]' : 'text-[#0a0a0a]'"
+          :style="{ '--accent': activeAccentColor }"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div
+        class="border-t border-border p-4 sm:p-6 flex flex-col sm:flex-row sm:items-center gap-4"
+      >
+        <!-- Accent color picker -->
+        <fieldset class="flex items-center gap-3 flex-1 border-none p-0 m-0">
+          <legend class="sr-only">{{ $t('brand.customize.accent_label') }}</legend>
+          <span class="text-xs font-mono text-fg-muted shrink-0">{{
+            $t('brand.customize.accent_label')
+          }}</span>
+          <div class="flex items-center gap-1.5" role="radiogroup">
+            <ButtonBase
+              v-for="color in pickerColors"
+              :key="color.id"
+              role="radio"
+              :aria-checked="activeAccentId === color.id"
+              :aria-label="color.label"
+              class="!w-6 !h-6 !rounded-full !border-2 !p-0 !min-w-0 transition-all duration-150 motion-reduce:transition-none"
+              :class="
+                activeAccentId === color.id
+                  ? '!border-fg scale-110'
+                  : color.id === 'neutral'
+                    ? '!border-border hover:!border-border-hover'
+                    : '!border-transparent hover:!border-border-hover'
+              "
+              :style="{ backgroundColor: color.value }"
+              @click="customAccent = color.id"
+            />
+          </div>
+        </fieldset>
+
+        <!-- Background toggle -->
+        <div class="flex items-center gap-3">
+          <span class="text-xs font-mono text-fg-muted">{{ $t('brand.customize.bg_label') }}</span>
+          <div
+            class="flex items-center border border-border rounded-md overflow-hidden"
+            role="radiogroup"
+          >
+            <ButtonBase
+              size="sm"
+              role="radio"
+              :aria-checked="customBgDark"
+              :aria-label="$t('brand.logos.on_dark')"
+              class="!border-none !rounded-none motion-reduce:transition-none"
+              :class="
+                customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'
+              "
+              @click="customBgDark = true"
+            >
+              {{ $t('brand.logos.on_dark') }}
+            </ButtonBase>
+            <ButtonBase
+              size="sm"
+              role="radio"
+              :aria-checked="!customBgDark"
+              :aria-label="$t('brand.logos.on_light')"
+              class="!border-none !rounded-none border-is border-is-border motion-reduce:transition-none"
+              :class="
+                !customBgDark ? 'bg-bg-muted text-fg' : 'bg-transparent text-fg-muted hover:text-fg'
+              "
+              @click="customBgDark = false"
+            >
+              {{ $t('brand.logos.on_light') }}
+            </ButtonBase>
+          </div>
+        </div>
+
+        <!-- Download buttons -->
+        <div class="flex items-center gap-2">
+          <ButtonBase
+            size="sm"
+            :aria-label="$t('brand.customize.download_svg_aria')"
+            :disabled="svgLoading"
+            @click="downloadCustomSvg"
+          >
+            <span
+              class="size-[1em]"
+              aria-hidden="true"
+              :class="svgLoading ? 'i-lucide:loader-circle animate-spin' : 'i-lucide:download'"
+            />
+            {{ $t('brand.logos.download_svg') }}
+          </ButtonBase>
+          <ButtonBase
+            size="sm"
+            :aria-label="$t('brand.customize.download_png_aria')"
+            :disabled="pngLoading"
+            @click="downloadCustomPng"
+          >
+            <span
+              class="size-[1em]"
+              aria-hidden="true"
+              :class="pngLoading ? 'i-lucide:loader-circle animate-spin' : 'i-lucide:download'"
+            />
+            {{ $t('brand.logos.download_png') }}
+          </ButtonBase>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/components/LogoContextMenu.vue b/app/components/LogoContextMenu.vue
new file mode 100644
index 0000000000..873c8d322d
--- /dev/null
+++ b/app/components/LogoContextMenu.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+const show = shallowRef(false)
+const x = shallowRef(0)
+const y = shallowRef(0)
+const menuRef = useTemplateRef('menuRef')
+
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault()
+  x.value = e.clientX
+  y.value = e.clientY
+  show.value = true
+  nextTick(() => {
+    menuRef.value?.focus()
+    clampPosition()
+  })
+}
+
+function clampPosition() {
+  const el = menuRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  if (rect.right > window.innerWidth) {
+    x.value -= rect.right - window.innerWidth + 8
+  }
+  if (rect.bottom > window.innerHeight) {
+    y.value -= rect.bottom - window.innerHeight + 8
+  }
+}
+
+function close() {
+  show.value = false
+}
+
+const copied = shallowRef(false)
+
+async function copySvg() {
+  try {
+    // Build the ClipboardItem synchronously so Safari keeps the user-gesture context.
+    // The blob *value* can be a promise — Safari resolves it while the gesture is still valid.
+    const textPromise = fetch('/logo.svg').then(r => r.text())
+    const item = new ClipboardItem({
+      'text/plain': textPromise.then(t => new Blob([t], { type: 'text/plain' })),
+    })
+    await navigator.clipboard.write([item])
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch {
+    // Fallback for older browsers that don't support ClipboardItem with promises
+    const res = await fetch('/logo.svg')
+    const svg = await res.text()
+    const textarea = document.createElement('textarea')
+    textarea.value = svg
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textarea)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  }
+  setTimeout(close, 1000)
+}
+
+function goToBrand() {
+  close()
+  navigateTo({ name: 'brand' })
+}
+
+onClickOutside(menuRef, close)
+
+onKeyStroke('Escape', () => {
+  if (show.value) close()
+})
+</script>
+
+<template>
+  <div class="contents" @contextmenu="onContextMenu">
+    <slot />
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-100 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div
+          v-if="show"
+          ref="menuRef"
+          role="menu"
+          tabindex="-1"
+          class="fixed z-[999] flex flex-col bg-bg-elevated border border-border rounded-lg shadow-lg py-1 origin-top-left focus:outline-none motion-reduce:transition-none"
+          :style="{ left: `${x}px`, top: `${y}px` }"
+          @keydown.escape="close"
+        >
+          <ButtonBase
+            role="menuitem"
+            size="sm"
+            class="text-start gap-x-2 border-none !px-3 !py-1.5"
+            :classicon="copied ? 'i-lucide:check text-badge-green' : 'i-lucide:copy'"
+            @click="copySvg"
+          >
+            {{ copied ? $t('logo_menu.copied') : $t('logo_menu.copy_svg') }}
+          </ButtonBase>
+          <ButtonBase
+            role="menuitem"
+            size="sm"
+            class="text-start gap-x-2 border-none !px-3 !py-1.5"
+            classicon="i-lucide:palette"
+            @click="goToBrand"
+          >
+            {{ $t('logo_menu.browse_brand') }}
+          </ButtonBase>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/app/components/Package/DownloadButton.vue b/app/components/Package/DownloadButton.vue
index 9ad1e47cd3..741583c80b 100644
--- a/app/components/Package/DownloadButton.vue
+++ b/app/components/Package/DownloadButton.vue
@@ -32,14 +32,14 @@ async function downloadPackage() {
 
   const downloadUrl = await getDownloadUrl(tarballUrl)
 
-  const link = document.createElement('a')
-  link.href = downloadUrl ?? tarballUrl
-  link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  downloadFileLink(
+    downloadUrl ?? tarballUrl,
+    `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`,
+  )
 
   if (downloadUrl) {
+    // We're creating the object url in getDownloadUrl,
+    // but need to clean it up here
     URL.revokeObjectURL(downloadUrl)
   }
 
diff --git a/app/pages/brand.vue b/app/pages/brand.vue
new file mode 100644
index 0000000000..95196a13a2
--- /dev/null
+++ b/app/pages/brand.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { ACCENT_COLORS } from '#shared/utils/constants'
+
+useSeoMeta({
+  title: () => `${$t('brand.title')} - npmx`,
+  ogTitle: () => `${$t('brand.title')} - npmx`,
+  twitterTitle: () => `${$t('brand.title')} - npmx`,
+  description: () => $t('brand.meta_description'),
+  ogDescription: () => $t('brand.meta_description'),
+  twitterDescription: () => $t('brand.meta_description'),
+})
+
+defineOgImageComponent('Default', {
+  primaryColor: '#51c8fc',
+  title: $t('brand.title'),
+  description: $t('brand.meta_description'),
+})
+
+const logos = [
+  {
+    name: () => $t('brand.logos.wordmark'),
+    src: '/logo.svg',
+    srcLight: '/logo-light.svg',
+    altDark: () => $t('brand.logos.wordmark_alt'),
+    altLight: () => $t('brand.logos.wordmark_light_alt'),
+    width: 602,
+    height: 170,
+    span: true,
+  },
+  {
+    name: () => $t('brand.logos.mark'),
+    src: '/logo-mark.svg',
+    srcLight: '/logo-mark-light.svg',
+    altDark: () => $t('brand.logos.mark_alt'),
+    altLight: () => $t('brand.logos.mark_light_alt'),
+    width: 153,
+    height: 153,
+    span: true,
+  },
+]
+
+const typographySizes = ['text-2xl', 'text-xl', 'text-lg', 'text-base', 'text-sm']
+
+const svgLoading = ref(new Set<string>())
+const pngLoading = ref(new Set<string>())
+
+function handleSvgDownload(src: string) {
+  if (svgLoading.value.has(src)) return
+  svgLoading.value.add(src)
+  try {
+    downloadFileLink(src, src.replace('/', ''))
+  } finally {
+    svgLoading.value.delete(src)
+  }
+}
+
+async function handlePngDownload(logo: (typeof logos)[number]) {
+  if (pngLoading.value.has(logo.src)) return
+  pngLoading.value.add(logo.src)
+  try {
+    const blob = await svgToPng(logo.src, logo.width, logo.height)
+    const filename = logo.src.replace(/^\//, '').replace('.svg', '.png')
+    downloadFile(blob, filename)
+  } finally {
+    pngLoading.value.delete(logo.src)
+  }
+}
+</script>
+
+<template>
+  <main class="container flex-1 py-12 sm:py-16 overflow-x-hidden">
+    <article class="max-w-4xl mx-auto">
+      <!-- Header -->
+      <header class="mb-12">
+        <div class="flex items-baseline justify-between gap-4 mb-4">
+          <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+            {{ $t('brand.heading') }}
+          </h1>
+          <BackButton />
+        </div>
+        <p class="text-fg-muted text-lg">
+          {{ $t('brand.intro') }}
+        </p>
+      </header>
+
+      <div class="flex flex-col gap-16">
+        <!-- Logos Section -->
+        <section aria-labelledby="brand-logos-heading">
+          <h2 id="brand-logos-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
+            {{ $t('brand.logos.title') }}
+          </h2>
+          <p class="text-fg-muted leading-relaxed mb-8">
+            {{ $t('brand.logos.description') }}
+          </p>
+
+          <div>
+            <figure
+              v-for="logo in logos"
+              :key="logo.src"
+              class="m-0 mt-12 first:mt-0"
+              role="group"
+              :aria-label="logo.name()"
+            >
+              <figcaption class="font-mono text-sm text-fg mb-3">
+                {{ logo.name() }}
+              </figcaption>
+
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <!-- Dark variant -->
+                <div class="flex flex-col">
+                  <div
+                    class="bg-[#0a0a0a] rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-40 flex-1"
+                  >
+                    <img
+                      :src="logo.src"
+                      :alt="logo.altDark()"
+                      class="max-h-16 w-auto max-w-full"
+                      :class="{ 'max-h-20': logo.span }"
+                    />
+                  </div>
+                  <div class="flex items-center justify-between mt-2">
+                    <span class="text-xs text-fg-subtle font-mono">{{
+                      $t('brand.logos.on_dark')
+                    }}</span>
+                    <div class="flex items-center gap-2">
+                      <ButtonBase
+                        size="sm"
+                        :aria-label="
+                          $t('brand.logos.download_svg_aria', {
+                            name: `${logo.name()} (${$t('brand.logos.on_dark')})`,
+                          })
+                        "
+                        :disabled="svgLoading.has(logo.src)"
+                        @click="handleSvgDownload(logo.src)"
+                      >
+                        <span
+                          class="size-[1em]"
+                          aria-hidden="true"
+                          :class="
+                            svgLoading.has(logo.src)
+                              ? 'i-lucide:loader-circle animate-spin'
+                              : 'i-lucide:download'
+                          "
+                        />
+                        {{ $t('brand.logos.download_svg') }}
+                      </ButtonBase>
+                      <ButtonBase
+                        size="sm"
+                        :aria-label="
+                          $t('brand.logos.download_png_aria', {
+                            name: `${logo.name()} (${$t('brand.logos.on_dark')})`,
+                          })
+                        "
+                        :disabled="pngLoading.has(logo.src)"
+                        @click="handlePngDownload(logo)"
+                      >
+                        <span
+                          class="size-[1em]"
+                          aria-hidden="true"
+                          :class="
+                            pngLoading.has(logo.src)
+                              ? 'i-lucide:loader-circle animate-spin'
+                              : 'i-lucide:download'
+                          "
+                        />
+                        {{ $t('brand.logos.download_png') }}
+                      </ButtonBase>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Light variant -->
+                <div class="flex flex-col">
+                  <div
+                    class="bg-white rounded-lg p-6 sm:p-8 flex items-center justify-center border border-border min-h-40 flex-1"
+                  >
+                    <AppLogo
+                      v-if="logo.src === '/logo.svg'"
+                      class="max-h-20 w-auto max-w-full text-[#0a0a0a]"
+                      :style="{ '--accent': ACCENT_COLORS.light.sky }"
+                      :aria-label="logo.altLight()"
+                    />
+                    <img
+                      v-else
+                      :src="logo.srcLight ?? logo.src"
+                      :alt="logo.altLight()"
+                      class="max-h-16 w-auto max-w-full"
+                      :class="{ 'max-h-20': logo.span }"
+                    />
+                  </div>
+                  <div class="flex items-center justify-between mt-2">
+                    <span class="text-xs text-fg-subtle font-mono">{{
+                      $t('brand.logos.on_light')
+                    }}</span>
+                    <div class="flex items-center gap-2">
+                      <ButtonBase
+                        size="sm"
+                        :aria-label="
+                          $t('brand.logos.download_svg_aria', {
+                            name: `${logo.name()} (${$t('brand.logos.on_light')})`,
+                          })
+                        "
+                        :disabled="svgLoading.has(logo.srcLight ?? logo.src)"
+                        @click="handleSvgDownload(logo.srcLight ?? logo.src)"
+                      >
+                        <span
+                          class="size-[1em]"
+                          aria-hidden="true"
+                          :class="
+                            svgLoading.has(logo.srcLight ?? logo.src)
+                              ? 'i-lucide:loader-circle animate-spin'
+                              : 'i-lucide:download'
+                          "
+                        />
+                        {{ $t('brand.logos.download_svg') }}
+                      </ButtonBase>
+                      <ButtonBase
+                        size="sm"
+                        :aria-label="
+                          $t('brand.logos.download_png_aria', {
+                            name: `${logo.name()} (${$t('brand.logos.on_light')})`,
+                          })
+                        "
+                        :disabled="pngLoading.has(logo.src)"
+                        @click="handlePngDownload(logo)"
+                      >
+                        <span
+                          class="size-[1em]"
+                          aria-hidden="true"
+                          :class="
+                            pngLoading.has(logo.src)
+                              ? 'i-lucide:loader-circle animate-spin'
+                              : 'i-lucide:download'
+                          "
+                        />
+                        {{ $t('brand.logos.download_png') }}
+                      </ButtonBase>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </figure>
+          </div>
+        </section>
+
+        <!-- Customize Section (client-only: needs DOM for accent colors + canvas export) -->
+        <ClientOnly>
+          <BrandCustomize />
+        </ClientOnly>
+
+        <!-- Typography Section -->
+        <section aria-labelledby="brand-typography-heading">
+          <h2 id="brand-typography-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
+            {{ $t('brand.typography.title') }}
+          </h2>
+          <p class="text-fg-muted leading-relaxed mb-8">
+            {{ $t('brand.typography.description') }}
+          </p>
+
+          <div class="space-y-10">
+            <!-- Geist Sans -->
+            <div>
+              <h3 class="font-mono text-sm text-fg uppercase tracking-wider mb-1">
+                {{ $t('brand.typography.sans') }}
+              </h3>
+              <p class="text-fg-subtle text-sm mb-4 m-0">
+                {{ $t('brand.typography.sans_desc') }}
+              </p>
+              <div class="space-y-2 border border-border rounded-lg p-6">
+                <p
+                  v-for="size in typographySizes"
+                  :key="`sans-${size}`"
+                  class="font-sans text-fg m-0"
+                  :class="size"
+                >
+                  {{ $t('brand.typography.pangram') }}
+                </p>
+                <p class="font-sans text-fg text-lg m-0 mt-4 tracking-widest">
+                  {{ $t('brand.typography.numbers') }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Geist Mono -->
+            <div>
+              <h3 class="font-mono text-sm text-fg uppercase tracking-wider mb-1">
+                {{ $t('brand.typography.mono') }}
+              </h3>
+              <p class="text-fg-subtle text-sm mb-4 m-0">
+                {{ $t('brand.typography.mono_desc') }}
+              </p>
+              <div class="space-y-2 border border-border rounded-lg p-6">
+                <p
+                  v-for="size in typographySizes"
+                  :key="`mono-${size}`"
+                  class="font-mono text-fg m-0"
+                  :class="size"
+                >
+                  {{ $t('brand.typography.pangram') }}
+                </p>
+                <p class="font-mono text-fg text-lg m-0 mt-4 tracking-widest">
+                  {{ $t('brand.typography.numbers') }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Guidelines -->
+        <section aria-labelledby="brand-guidelines-heading">
+          <h2 id="brand-guidelines-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
+            {{ $t('brand.guidelines.title') }}
+          </h2>
+          <blockquote
+            class="border-is-2 border-is-accent ps-6 py-2 text-fg-muted leading-relaxed italic"
+          >
+            {{ $t('brand.guidelines.message') }}
+          </blockquote>
+        </section>
+      </div>
+    </article>
+  </main>
+</template>
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index 12ed2c0958..b11c8775bd 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -637,6 +637,7 @@ export async function copyAltTextForCompareFacetBarChart({
 }
 
 // Used in chart context menu callbacks
+// @todo replace with downloadFileLink
 export function loadFile(link: string, filename: string) {
   const a = document.createElement('a')
   a.href = link
diff --git a/app/utils/download.ts b/app/utils/download.ts
new file mode 100644
index 0000000000..4b2c062bdc
--- /dev/null
+++ b/app/utils/download.ts
@@ -0,0 +1,30 @@
+/**
+ * Prompts the user to download the file that is at the given link, using
+ * the given default filename.
+ *
+ * Note: some browsers may ignore the `download` attribute for cross-origin URLs.
+ *
+ * @param link - The URL of the resource to download. This can be a normal URL,
+ *               a data URL (e.g. "data:..."), or an object URL created via
+ *               `URL.createObjectURL`.
+ * @param filename - Suggested filename for the downloaded file. The browser may
+ *                   override this value depending on user settings or the URL.
+ */
+export function downloadFileLink(link: string, filename: string) {
+  const a = document.createElement('a')
+  a.href = link
+  a.download = filename
+  a.click()
+}
+
+/**
+ * Prompt the user to download the provided Blob as a file with the given filename.
+ *
+ * @param blob - The Blob to download.
+ * @param filename - The filename that will be suggested to the user when saving.
+ */
+export function downloadFile(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  downloadFileLink(url, filename)
+  URL.revokeObjectURL(url)
+}
diff --git a/app/utils/svg.ts b/app/utils/svg.ts
new file mode 100644
index 0000000000..2e0ac8b385
--- /dev/null
+++ b/app/utils/svg.ts
@@ -0,0 +1,47 @@
+/**
+ * Convert an SVG (URL or data URI) into a PNG Blob.
+ *
+ * @param svgUrl - URL or data URI pointing to the SVG to convert. If remote,
+ *                 the resource must be accessible (CORS allowed) for use in a canvas.
+ * @param width - Desired logical width (CSS pixels) of the output image.
+ * @param height - Desired logical height (CSS pixels) of the output image.
+ * @param scale - Optional pixel scale multiplier (use 2 for high-DPI output). Default: 2.
+ * @returns A Promise that resolves with a PNG Blob containing the rendered image.
+ * @throws {Error} If the SVG fails to load or if the canvas cannot produce a Blob.
+ */
+export async function svgToPng(
+  svgUrl: string,
+  width: number,
+  height: number,
+  scale = 2,
+): Promise<Blob> {
+  await document.fonts.ready
+
+  const img = new Image()
+  img.crossOrigin = 'anonymous'
+
+  const loaded = new Promise<void>((resolve, reject) => {
+    // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
+    img.onload = () => resolve()
+    // oxlint-disable-next-line eslint-plugin-unicorn(prefer-add-event-listener)
+    img.onerror = () => reject(new Error(`Failed to load SVG: ${svgUrl}`))
+  })
+
+  img.src = svgUrl
+  await loaded
+
+  const canvas = document.createElement('canvas')
+  canvas.width = width * scale
+  canvas.height = height * scale
+
+  const ctx = canvas.getContext('2d')!
+  ctx.scale(scale, scale)
+  ctx.drawImage(img, 0, 0, width, height)
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(blob => {
+      if (blob) resolve(blob)
+      else reject(new Error('Canvas toBlob failed'))
+    }, 'image/png')
+  })
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f03ed84bf1..5007e2a68c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -19,7 +19,8 @@
     "social": "social",
     "chat": "chat",
     "builders_chat": "builders",
-    "keyboard_shortcuts": "keyboard shortcuts"
+    "keyboard_shortcuts": "keyboard shortcuts",
+    "brand": "brand"
   },
   "shortcuts": {
     "section": {
@@ -1473,5 +1474,54 @@
     "selection": "0 selected | 1 selected | {count} selected",
     "shortcut": "Press \"{key}\" to focus actions",
     "button_close_aria_label": "Close action bar"
+  },
+  "logo_menu": {
+    "copy_svg": "Copy logo as SVG",
+    "copied": "Copied!",
+    "browse_brand": "Browse brand kit"
+  },
+  "brand": {
+    "title": "Brand",
+    "heading": "brand",
+    "meta_description": "npmx brand guidelines, logos, colors, and typography for use in press and media.",
+    "intro": "Resources and guidelines for using the npmx brand in your projects, articles, and media.",
+    "logos": {
+      "title": "logos",
+      "description": "Download npmx logos in SVG and PNG formats. Use the appropriate variant for your background.",
+      "wordmark": "Full wordmark",
+      "wordmark_alt": "npmx full wordmark logo with blue slash on dark background",
+      "wordmark_light_alt": "npmx full wordmark logo with accent slash on light background",
+      "mark": "Logo mark",
+      "mark_alt": "npmx logo mark with dot and slash on dark background",
+      "mark_light_alt": "npmx logo mark with dot and slash on light background",
+      "on_dark": "On dark",
+      "on_light": "On light",
+      "download_svg": "SVG",
+      "download_png": "PNG",
+      "download_svg_aria": "Download {name} as SVG",
+      "download_png_aria": "Download {name} as PNG"
+    },
+    "customize": {
+      "title": "customize your logo",
+      "description": "Preview the npmx logo with your accent color and background. The preview reflects your current settings — pick a color, toggle the background, and download.",
+      "accent_label": "Accent",
+      "bg_label": "Background",
+      "download_svg_aria": "Download customized logo as SVG",
+      "download_png_aria": "Download customized logo as PNG"
+    },
+    "typography": {
+      "title": "typography",
+      "description": "npmx uses the Geist font family by Vercel for both interface text and code.",
+      "sans": "Geist Sans",
+      "sans_desc": "Used for body text and UI elements.",
+      "mono": "Geist Mono",
+      "mono_desc": "Used for code, headings, and technical content.",
+      "pangram": "The quick brown fox jumps over the lazy dog",
+      "numbers": "0123456789"
+    },
+    "guidelines": {
+      "title": "just a note",
+      "message": "When using the npmx logo, we kindly ask that you keep it legible — ensure there's enough contrast against the background and don't go smaller than 24px. Accessibility matters to us, and we appreciate you keeping that in mind."
+    }
   }
 }
diff --git a/i18n/schema.json b/i18n/schema.json
index e1ae6a54eb..ac049f6e9b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -63,6 +63,9 @@
         },
         "keyboard_shortcuts": {
           "type": "string"
+        },
+        "brand": {
+          "type": "string"
         }
       },
       "additionalProperties": false
@@ -4426,6 +4429,153 @@
       },
       "additionalProperties": false
     },
+    "logo_menu": {
+      "type": "object",
+      "properties": {
+        "copy_svg": {
+          "type": "string"
+        },
+        "copied": {
+          "type": "string"
+        },
+        "browse_brand": {
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "brand": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "heading": {
+          "type": "string"
+        },
+        "meta_description": {
+          "type": "string"
+        },
+        "intro": {
+          "type": "string"
+        },
+        "logos": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "wordmark": {
+              "type": "string"
+            },
+            "wordmark_alt": {
+              "type": "string"
+            },
+            "wordmark_light_alt": {
+              "type": "string"
+            },
+            "mark": {
+              "type": "string"
+            },
+            "mark_alt": {
+              "type": "string"
+            },
+            "mark_light_alt": {
+              "type": "string"
+            },
+            "on_dark": {
+              "type": "string"
+            },
+            "on_light": {
+              "type": "string"
+            },
+            "download_svg": {
+              "type": "string"
+            },
+            "download_png": {
+              "type": "string"
+            },
+            "download_svg_aria": {
+              "type": "string"
+            },
+            "download_png_aria": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "customize": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "accent_label": {
+              "type": "string"
+            },
+            "bg_label": {
+              "type": "string"
+            },
+            "download_svg_aria": {
+              "type": "string"
+            },
+            "download_png_aria": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "typography": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "sans": {
+              "type": "string"
+            },
+            "sans_desc": {
+              "type": "string"
+            },
+            "mono": {
+              "type": "string"
+            },
+            "mono_desc": {
+              "type": "string"
+            },
+            "pangram": {
+              "type": "string"
+            },
+            "numbers": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "guidelines": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "message": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "$schema": {
       "type": "string"
     }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 88d3822376..b6daaa2f96 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -174,6 +174,7 @@ export default defineNuxtConfig({
     '/200.html': { prerender: true },
     '/about': { prerender: true },
     '/accessibility': { prerender: true },
+    '/brand': { prerender: true },
     '/privacy': { prerender: true },
     '/search': { isr: false, cache: false }, // never cache
     '/settings': { prerender: true },
diff --git a/public/logo-light.svg b/public/logo-light.svg
new file mode 100644
index 0000000000..231a50c8c6
--- /dev/null
+++ b/public/logo-light.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="602" height="170" version="1.1" viewBox="0 0 602 170" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 14.602)"><path d="m0.93476 97.205h24.081v23.693h-24.081z" fill="#0a0a0a"/><path d="m176.66 17.97h14.954l0.3884 18.449q4.0783-10.293 12.817-15.536 8.9334-5.2435 20.003-5.2435 17.09 0 26.412 11.07 9.3218 10.875 9.3218 27.965v66.223h-16.313v-61.562q0-29.325-22.916-29.325-12.429 0-20.391 7.7681-7.9623 7.7681-7.9623 21.557v61.562h-16.313z" fill="#0a0a0a"/><path d="m386.95 17.97h14.954l0.38842 15.148q2.7188-8.3507 7.9624-12.817 5.2435-4.6609 12.429-4.6609 15.925 0 19.42 20.197 2.5246-9.516 8.3507-14.759 5.8261-5.4377 13.788-5.4377 12.429 0 18.061 8.7392 5.6319 8.545 5.6319 28.159v68.36h-16.313v-66.029q0-13.4-2.9131-19.032-2.913-5.8261-9.1276-5.8261-6.4087 0-10.293 6.4087-3.6899 6.2145-3.6899 18.838v65.641h-16.313v-66.029q0-13.206-2.913-19.032-2.7188-5.8261-9.1276-5.8261t-10.293 6.4087q-3.6899 6.2145-3.6899 18.838v65.641h-16.313z" fill="#0a0a0a"/><path d="m279.21 17.97h15.148l0.19415 16.507q4.6609-9.1276 12.817-13.983 8.3508-4.8551 18.838-4.8551 14.759 0 24.664 7.3797 9.9044 7.1855 14.759 19.42t4.8551 26.994q0 14.759-4.8551 26.994t-14.759 19.615q-9.9044 7.1855-24.664 7.1855-10.099 0-18.449-4.2725-8.1565-4.2725-12.235-11.652v42.725h-16.313zm45.444 89.722q13.4 0 20.974-10.099 7.7682-10.099 7.7682-28.159 0-18.061-7.7682-28.159-7.5739-10.099-20.974-10.099-13.594 0-21.362 9.9044-7.7682 9.7102-7.7682 28.354 0 18.644 7.5739 28.548 7.7682 9.7102 21.557 9.7102z" fill="#0a0a0a"/><path d="m543.04 68.074-35.928-50.104h19.032l26.994 38.841 26.412-38.841h19.42l-35.733 50.493 37.481 52.435h-19.032l-28.548-41.56-28.548 41.56h-19.42z" fill="#0a0a0a"/><path d="m103.12-9.2307-3.6211 10.246-46.309 131-3.6211 10.246h15.537l3.6211-10.246 11.717-33.148 38.211-108.1z" fill="#006fc2"/></g></svg>
diff --git a/public/logo-mark-light.svg b/public/logo-mark-light.svg
new file mode 100644
index 0000000000..88c5c05a23
--- /dev/null
+++ b/public/logo-mark-light.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="153" height="153" version="1.1" viewBox="0 0 153 153" xmlns="http://www.w3.org/2000/svg"><g transform="translate(16.704 9.9827)"><path d="m0.93476 97.205h24.081v23.693h-24.081z" fill="#0a0a0a"/><path d="m103.12-9.2307-3.6211 10.246-46.309 131-3.6211 10.246h15.537l3.6211-10.246 11.717-33.148 38.211-108.1z" fill="#006fc2"/></g></svg>
diff --git a/server/middleware/canonical-redirects.global.ts b/server/middleware/canonical-redirects.global.ts
index f4087858f0..e9139a8493 100644
--- a/server/middleware/canonical-redirects.global.ts
+++ b/server/middleware/canonical-redirects.global.ts
@@ -19,6 +19,7 @@ const pages = [
   '/about',
   '/accessibility',
   '/blog',
+  '/brand',
   '/compare',
   '/org',
   '/package',
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index ec2f95a8a7..a73b58dd6d 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -29,6 +29,10 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
 
   // Client-only components with complex dependencies
   'Header/AuthModal.client.vue': 'Complex auth modal with navigation - requires full app context',
+  'Brand/Customize.vue':
+    'Client-only component using useAccentColor, useLocalStorage, and canvas API',
+  'LogoContextMenu.vue':
+    'Client-only context menu using Teleport, clipboard API, and pointer events',
 
   // Complex components requiring full app context or specific runtime conditions
   'Header/OrgsDropdown.vue': 'Requires connector context and API calls',