diff --git a/app/assets/main.css b/app/assets/main.css
index db6eea27a..b89dfc052 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -196,9 +196,9 @@ a:hover {
 }
 
 a:focus-visible {
-  outline: 2px solid var(--border);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
@@ -215,6 +215,13 @@ button {
   padding: 0;
 }
 
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 12a17dab3..0018fc414 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -15,14 +15,14 @@ const isHome = computed(() => route.name === 'index')
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
-          <NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
+          <NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -31,7 +31,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -40,7 +40,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -49,7 +49,7 @@ const isHome = computed(() => route.name === 'index')
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 0a1de37f8..a1a8f75f0 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -95,18 +95,11 @@ onKeyStroke(
       <button
         v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
-        <img
-          aria-hidden="true"
-          :alt="$t('alt_logo')"
-          src="/logo.svg"
-          width="96"
-          height="96"
-          class="w-8 h-8 rounded-lg"
-        />
+        <AppLogo class="w-8 h-8 rounded-lg" />
         <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
       </button>
 
@@ -116,16 +109,9 @@ onKeyStroke(
           to="/"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
+          class="inline-flex items-center gap-2 header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
         >
-          <img
-            aria-hidden="true"
-            :alt="$t('alt_logo')"
-            src="/logo.svg"
-            width="96"
-            height="96"
-            class="w-8 h-8 rounded-lg"
-          />
+          <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
         </NuxtLink>
       </div>
@@ -163,11 +149,11 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6">
+      <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
           aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
@@ -182,7 +168,7 @@ onKeyStroke(
         <!-- Desktop: Settings link -->
         <NuxtLink
           to="/settings"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
@@ -202,7 +188,7 @@ onKeyStroke(
         <!-- Mobile: Menu button (always visible, toggles menu) -->
         <button
           type="button"
-          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"
diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue
new file mode 100644
index 000000000..b16c49868
--- /dev/null
+++ b/app/components/AppLogo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    width="96"
+    height="96"
+    :class="class"
+  >
+    <title>{{ $t('alt_logo') }}</title>
+    <rect fill="var(--bg)" width="512" height="512" rx="64" />
+    <rect fill="var(--fg)" x="110" y="310" width="60" height="60" />
+    <text
+      fill="var(--accent)"
+      x="320"
+      y="370"
+      font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-size="420"
+      font-weight="500"
+      text-anchor="middle"
+    >
+      <tspan>/</tspan>
+    </text>
+  </svg>
+</template>
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 78e4b16ef..af9a878b1 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -76,7 +76,7 @@ useHead({
 
 <template>
   <section class="scroll-mt-20" :data-anchor-id="id">
-    <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
         :id="headingId"
@@ -85,7 +85,7 @@ useHead({
         <button
           :id="buttonId"
           type="button"
-          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
@@ -118,14 +118,17 @@ useHead({
       </component>
 
       <!-- Actions slot for buttons or other elements -->
-      <slot name="actions" />
+      <div class="pe-1">
+        <slot name="actions" />
+      </div>
     </div>
 
     <div
       :id="contentId"
       class="grid ms-6 transition-[grid-template-rows] duration-200 ease-in-out collapsible-content overflow-hidden"
+      :inert="!isOpen"
     >
-      <div class="min-h-0 min-w-0">
+      <div class="min-h-0 min-w-0 p-1">
         <slot />
       </div>
     </div>
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 40b1838a7..a5f0f1fab 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -34,7 +34,7 @@ function isCategoryNoneSelected(category: string): boolean {
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -51,7 +51,7 @@ function isCategoryNoneSelected(category: string): boolean {
         <span class="text-[10px] text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
@@ -77,7 +77,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
           :aria-label="facet.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-accent/70"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index 19d95afa6..48304e478 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -71,7 +71,7 @@ function handleBlur() {
         </NuxtLink>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
           :aria-label="$t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
@@ -82,12 +82,12 @@ function handleBlur() {
 
     <!-- Add package input -->
     <div v-if="packages.length < maxPackages" class="relative">
-      <div class="relative">
+      <div class="relative group">
         <label for="package-search" class="sr-only">
           {{ $t('compare.selector.search_label') }}
         </label>
         <span
-          class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle flex"
+          class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
           aria-hidden="true"
         >
           <span class="i-carbon:search w-4 h-4" />
@@ -101,7 +101,7 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
+          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 111313a86..10828b993 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -59,7 +59,7 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
     <button
       type="button"
-      class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index 32f83f372..151921e74 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -34,7 +34,7 @@ async function handleLogin() {
         </div>
       </div>
       <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="logout"
       >
         {{ $t('auth.modal.disconnect') }}
@@ -61,13 +61,13 @@ async function handleLogin() {
             :placeholder="$t('auth.modal.handle_placeholder')"
             autocomplete="off"
             spellcheck="false"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
           />
         </div>
 
         <details class="text-sm">
           <summary
-            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
+            class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
             {{ $t('auth.modal.what_is_atmosphere') }}
           </summary>
@@ -99,21 +99,21 @@ async function handleLogin() {
       <button
         type="submit"
         :disabled="!handleInput.trim()"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ $t('auth.modal.connect') }}
       </button>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleCreateAccount"
       >
         {{ $t('auth.modal.create_account') }}
       </button>
-      <hr />
+      <hr class="color-border" />
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
         @click="handleBlueskySignIn"
       >
         {{ $t('auth.modal.connect_bluesky') }}
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index c87febd4b..fa0cb1116 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -70,7 +70,7 @@ function handleDisconnect() {
 
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="handleDisconnect"
       >
         {{ $t('connector.modal.disconnect') }}
@@ -114,7 +114,7 @@ function handleDisconnect() {
         <button
           type="button"
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           @click="copy('pnpm npmx-connector')"
         >
           <span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
@@ -136,7 +136,7 @@ function handleDisconnect() {
                           :aria-label="
                             copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                           "
-                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
                           @click="copyCommand"
                         >
                           <span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
@@ -167,7 +167,7 @@ function handleDisconnect() {
             name="connector-token"
             :placeholder="$t('connector.modal.token_placeholder')"
             v-bind="noCorrect"
-            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
           />
         </div>
 
@@ -191,7 +191,7 @@ function handleDisconnect() {
               name="connector-port"
               inputmode="numeric"
               autocomplete="off"
-              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
             />
           </div>
         </details>
@@ -222,7 +222,7 @@ function handleDisconnect() {
       <button
         type="submit"
         :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       >
         {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
       </button>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index f8224856f..1f589db39 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -91,7 +91,7 @@ onUnmounted(deactivate)
               <span class="font-mono text-sm text-fg-muted">{{ $t('nav.menu') }}</span>
               <button
                 type="button"
-                class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+                class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 41d3331a4..fb25d91eb 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -122,7 +122,7 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             v-bind="noCorrect"
-            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            class="w-full min-w-25 bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:(outline-2 outline-accent/70)"
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 333de3294..a8e2831b2 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -25,7 +25,7 @@ defineExpose({
     <dialog
       ref="dialogRef"
       closedby="any"
-      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg"
+      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >
@@ -36,7 +36,7 @@ defineExpose({
         </h2>
         <button
           type="button"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index d8ca64645..ebc694680 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -296,7 +296,7 @@ watch(lastExecutionTime, () => {
       </h2>
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         :aria-label="$t('org.members.refresh')"
         :disabled="isLoading"
         @click="refreshData"
@@ -324,7 +324,7 @@ watch(lastExecutionTime, () => {
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
         />
       </div>
       <div
@@ -336,7 +336,7 @@ watch(lastExecutionTime, () => {
           v-for="role in ['all', 'owner', 'admin', 'developer'] as const"
           :key="role"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-200 focus-visible:outline-accent/70"
           :class="filterRole === role ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
@@ -352,7 +352,7 @@ watch(lastExecutionTime, () => {
           id="team-filter"
           v-model="filterTeam"
           name="team-filter"
-          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
         >
           <option :value="null">{{ $t('org.members.all_teams') }}</option>
           <option v-for="team in teamNames" :key="team" :value="team">
@@ -367,7 +367,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -377,7 +377,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
           :class="sortBy === 'role' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'role'"
           @click="toggleSort('role')"
@@ -404,7 +404,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         @click="loadMembers"
       >
         {{ $t('common.try_again') }}
@@ -451,7 +451,7 @@ watch(lastExecutionTime, () => {
               :id="`role-${member.name}`"
               :value="member.role"
               :name="`role-${member.name}`"
-              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+              class="px-1.5 py-0.5 font-mono text-xs bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
               @change="
                 handleChangeRole(
                   member.name,
@@ -466,7 +466,7 @@ watch(lastExecutionTime, () => {
             <!-- Remove button -->
             <button
               type="button"
-              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
@@ -480,7 +480,7 @@ watch(lastExecutionTime, () => {
             v-for="team in member.teams"
             :key="team"
             type="button"
-            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted border border-border rounded hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:outline-accent/70"
             :aria-label="$t('org.members.view_team', { team })"
             @click="handleTeamClick(team)"
           >
@@ -509,7 +509,7 @@ watch(lastExecutionTime, () => {
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
             v-bind="noCorrect"
-            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
           />
           <div class="flex items-center gap-2">
             <label for="new-member-role" class="sr-only">{{ $t('org.members.role_label') }}</label>
@@ -517,7 +517,7 @@ watch(lastExecutionTime, () => {
               id="new-member-role"
               v-model="newRole"
               name="new-member-role"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
             >
               <option value="developer">{{ $t('org.members.role.developer') }}</option>
               <option value="admin">{{ $t('org.members.role.admin') }}</option>
@@ -529,7 +529,7 @@ watch(lastExecutionTime, () => {
               id="new-member-team"
               v-model="newTeam"
               name="new-member-team"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
             >
               <option value="">{{ $t('org.members.no_team') }}</option>
               <option v-for="team in teamNames" :key="team" :value="team">
@@ -539,13 +539,13 @@ watch(lastExecutionTime, () => {
             <button
               type="submit"
               :disabled="!newUsername.trim() || isAddingMember"
-              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
             >
               {{ isAddingMember ? '…' : $t('org.members.add_button') }}
             </button>
             <button
               type="button"
-              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
@@ -557,7 +557,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="showAddMember = true"
       >
         {{ $t('org.members.add_member') }}
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index d398d1ca6..6d3732058 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -129,7 +129,7 @@ watch(isExecuting, executing => {
         <button
           v-if="hasOperations"
           type="button"
-          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg bg-bg-subtle border border-border rounded transition-colors duration-200 hover:border-border-hover focus-visible:outline-accent/70"
           :aria-label="$t('operations.queue.clear_all')"
           @click="handleClearAll"
         >
@@ -137,7 +137,7 @@ watch(isExecuting, executing => {
         </button>
         <button
           type="button"
-          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
@@ -209,7 +209,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status === 'pending'"
             type="button"
-            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-muted hover:text-green-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
@@ -218,7 +218,7 @@ watch(isExecuting, executing => {
           <button
             v-if="op.status !== 'running'"
             type="button"
-            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-muted hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
@@ -252,7 +252,7 @@ watch(isExecuting, executing => {
           :placeholder="$t('operations.queue.otp_placeholder')"
           autocomplete="one-time-code"
           spellcheck="false"
-          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-3 py-1.5 font-mono text-sm bg-bg border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
         />
         <button
           type="submit"
@@ -269,7 +269,7 @@ watch(isExecuting, executing => {
       <button
         v-if="hasPendingOperations"
         type="button"
-        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="flex-1 px-4 py-2 font-mono text-sm text-fg bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:border-border-hover focus-visible:outline-accent/70"
         @click="handleApproveAll"
       >
         {{ $t('operations.queue.approve_all') }} ({{ pendingOperations.length }})
@@ -278,7 +278,7 @@ watch(isExecuting, executing => {
         v-if="hasApprovedOperations && !hasOtpFailures"
         type="button"
         :disabled="isExecuting"
-        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="flex-1 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
         @click="handleExecute()"
       >
         {{
@@ -327,7 +327,7 @@ watch(isExecuting, executing => {
           </div>
           <button
             type="button"
-            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-0.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index af0bd0bce..095aa5cf2 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -266,7 +266,7 @@ watch(lastExecutionTime, () => {
       <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
       <button
         type="button"
-        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1.5 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         :aria-label="$t('org.teams.refresh')"
         :disabled="isLoadingTeams"
         @click="loadTeams"
@@ -294,7 +294,7 @@ watch(lastExecutionTime, () => {
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
         />
       </div>
       <div
@@ -304,7 +304,7 @@ watch(lastExecutionTime, () => {
       >
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
           :class="sortBy === 'name' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'name'"
           @click="toggleSort('name')"
@@ -314,7 +314,7 @@ watch(lastExecutionTime, () => {
         </button>
         <button
           type="button"
-          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono rounded transition-colors duration-200 focus-visible:outline-accent/70"
           :class="sortBy === 'members' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
           :aria-pressed="sortBy === 'members'"
           @click="toggleSort('members')"
@@ -341,7 +341,7 @@ watch(lastExecutionTime, () => {
       </p>
       <button
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         @click="loadTeams"
       >
         {{ $t('common.try_again') }}
@@ -362,7 +362,7 @@ watch(lastExecutionTime, () => {
         >
           <button
             type="button"
-            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 flex items-center gap-2 text-start rounded focus-visible:outline-accent/70"
             :aria-expanded="expandedTeams.has(teamName)"
             :aria-controls="`team-${teamName}-members`"
             @click="toggleTeam(teamName)"
@@ -394,7 +394,7 @@ watch(lastExecutionTime, () => {
           <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
@@ -428,7 +428,7 @@ watch(lastExecutionTime, () => {
               <span class="font-mono text-sm text-fg">{{ teamName }}</span>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 rounded focus-visible:outline-accent/70"
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
@@ -453,18 +453,18 @@ watch(lastExecutionTime, () => {
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
                 v-bind="noCorrect"
-                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
               />
               <button
                 type="submit"
                 :disabled="!newUserUsername.trim() || isAddingUser"
-                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
               >
                 {{ isAddingUser ? '…' : $t('org.teams.add_button') }}
               </button>
               <button
                 type="button"
-                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
@@ -475,7 +475,7 @@ watch(lastExecutionTime, () => {
           <button
             v-else
             type="button"
-            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="mt-2 px-2 py-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
             @click="showAddUserFor = teamName"
           >
             {{ $t('org.teams.add_member') }}
@@ -509,19 +509,19 @@ watch(lastExecutionTime, () => {
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
               v-bind="noCorrect"
-              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg border border-border rounded-ie text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
             />
           </div>
           <button
             type="submit"
             :disabled="!newTeamName.trim() || isCreatingTeam"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
           >
             {{ isCreatingTeam ? '…' : $t('org.teams.create_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
@@ -532,7 +532,7 @@ watch(lastExecutionTime, () => {
       <button
         v-else
         type="button"
-        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-2 font-mono text-sm text-fg-muted bg-bg border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="showCreateTeam = true"
       >
         {{ $t('org.teams.create_team') }}
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
index ef23bef77..c3d9a7d89 100644
--- a/app/components/Package/AccessControls.vue
+++ b/app/components/Package/AccessControls.vue
@@ -157,7 +157,7 @@ watch(
       </h2>
       <button
         type="button"
-        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="p-1 text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         :aria-label="$t('package.access.refresh')"
         :disabled="isLoadingCollaborators"
         @click="loadCollaborators"
@@ -225,7 +225,7 @@ watch(
         <button
           v-if="collab.isTeam"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-accent/70"
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
@@ -250,7 +250,7 @@ watch(
             id="grant-team-select"
             v-model="selectedTeam"
             name="grant-team"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
             :disabled="isLoadingTeams"
           >
             <option value="" disabled>
@@ -273,7 +273,7 @@ watch(
             id="grant-permission-select"
             v-model="permission"
             name="grant-permission"
-            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg transition-colors duration-200 focus:border-border-hover"
           >
             <option value="read-only">{{ $t('package.access.permission.read_only') }}</option>
             <option value="read-write">{{ $t('package.access.permission.read_write') }}</option>
@@ -281,13 +281,13 @@ watch(
           <button
             type="submit"
             :disabled="!selectedTeam || isGranting"
-            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-3 py-1.5 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
           >
             {{ isGranting ? '…' : $t('package.access.grant_button') }}
           </button>
           <button
             type="button"
-            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1.5 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
@@ -299,7 +299,7 @@ watch(
     <button
       v-else
       type="button"
-      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
       @click="showGrantAccess = true"
     >
       {{ $t('package.access.grant_access') }}
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index 7cbc698be..ce8d48d7e 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -174,14 +174,14 @@ const previewPackageJson = computed(() => {
       <div class="flex gap-3">
         <NuxtLink
           :to="`/package/${packageName}`"
-          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
           @click="close"
         >
           {{ $t('claim.modal.view_package') }}
         </NuxtLink>
         <button
           type="button"
-          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="flex-1 px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
           @click="close"
         >
           {{ $t('common.close') }}
@@ -278,7 +278,7 @@ const previewPackageJson = computed(() => {
               <div class="min-w-0">
                 <NuxtLink
                   :to="`/package/${pkg.name}`"
-                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="font-mono text-sm text-fg hover:underline focus-visible:outline-accent/70 rounded"
                   target="_blank"
                 >
                   {{ pkg.name }}
@@ -328,7 +328,7 @@ const previewPackageJson = computed(() => {
           </div>
           <button
             type="button"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
             @click="connectorModal.open"
           >
             {{ $t('claim.modal.connect_button') }}
@@ -356,7 +356,7 @@ const previewPackageJson = computed(() => {
           <button
             type="button"
             :disabled="isPublishing"
-            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
             @click="handleClaim"
           >
             {{ isPublishing ? $t('claim.modal.publishing') : $t('claim.modal.claim_button') }}
@@ -368,7 +368,7 @@ const previewPackageJson = computed(() => {
       <button
         v-if="!checkResult.available || !checkResult.valid"
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="close"
       >
         {{ $t('common.close') }}
@@ -385,7 +385,7 @@ const previewPackageJson = computed(() => {
       </div>
       <button
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="() => checkAvailability()"
       >
         {{ $t('common.retry') }}
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index ad19b9f4b..965a67712 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -75,7 +75,7 @@ const sortedOptionalDependencies = computed(() => {
       id="dependencies"
       :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
     >
-      <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -145,7 +145,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         @click="depsExpanded = true"
       >
         {{
@@ -166,10 +166,7 @@ const sortedOptionalDependencies = computed(() => {
         })
       "
     >
-      <ul
-        class="space-y-1 list-none m-0 p-0"
-        :aria-label="$t('package.peer_dependencies.list_label')"
-      >
+      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.peer_dependencies.list_label')">
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
@@ -208,7 +205,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         @click="peerDepsExpanded = true"
       >
         {{
@@ -230,7 +227,7 @@ const sortedOptionalDependencies = computed(() => {
       "
     >
       <ul
-        class="space-y-1 list-none m-0 p-0"
+        class="space-y-1 list-none m-0"
         :aria-label="$t('package.optional_dependencies.list_label')"
       >
         <li
@@ -262,7 +259,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
         @click="optionalDepsExpanded = true"
       >
         {{
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index 6f700fdc4..3521876eb 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -48,7 +48,7 @@ function getDepthStyle(depth: DependencyDepth) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/70"
         :aria-expanded="isExpanded"
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index f7bae740d..0d1315b1b 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -46,7 +46,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
-  for (const item of accentColors) {
+  for (const item of accentColors.value) {
     map[item.id] = item.value
   }
   return map
@@ -620,13 +620,11 @@ const config = computed(() => {
             {{ $t('package.downloads.granularity') }}
           </label>
 
-          <div
-            class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
-          >
+          <div class="flex items-center bg-bg-subtle border border-border rounded-md">
             <select
               id="granularity"
               v-model="selectedGranularity"
-              class="w-full bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none"
+              class="w-full px-2.5 py-1.75 bg-bg-subtle font-mono text-sm text-fg outline-none appearance-none focus-visible:outline-accent/70"
             >
               <option value="daily">{{ $t('package.downloads.granularity_daily') }}</option>
               <option value="weekly">{{ $t('package.downloads.granularity_weekly') }}</option>
@@ -646,7 +644,7 @@ const config = computed(() => {
               {{ $t('package.downloads.start_date') }}
             </label>
             <div
-              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
+              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
             >
               <span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
               <input
@@ -666,7 +664,7 @@ const config = computed(() => {
               {{ $t('package.downloads.end_date') }}
             </label>
             <div
-              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
+              class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
             >
               <span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
               <input
@@ -684,7 +682,7 @@ const config = computed(() => {
           v-if="showResetButton"
           type="button"
           aria-label="Reset date range"
-          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 sm:mb-0"
+          class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
           @click="
             () => {
               hasUserEditedDates = false
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index 7e70756c1..dde493782 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -31,7 +31,7 @@ const isExpanded = shallowRef(false)
         <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
         <dd
           tabindex="0"
-          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:(outline-2 outline-accent outline-offset-2)"
           :title="installScripts.content?.[scriptName]"
         >
           {{ installScripts.content?.[scriptName] || $t('package.install_scripts.script_label') }}
@@ -43,7 +43,7 @@ const isExpanded = shallowRef(false)
     <div v-if="hasNpxDeps" class="mt-3">
       <button
         type="button"
-        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
         :aria-expanded="isExpanded"
         aria-controls="npx-packages-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index 4ce868cb5..45f25431c 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -5,7 +5,7 @@ defineProps<{
 </script>
 <template>
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
-    <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
+    <ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
         <TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index 4008ec0c5..1b31f318b 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -67,7 +67,7 @@ const showFilteredCount = computed(() => {
         type="search"
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
         v-bind="noCorrect"
-        class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
+        class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
       />
     </div>
 
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index d206f7966..811e42996 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -160,7 +160,7 @@ function getSortKeyLabelKey(key: SortKey): string {
             <select
               id="sort-select"
               :value="currentSort.key"
-              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+              class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
               @change="handleSortKeyChange"
             >
               <option
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 391a1b946..2ef84d492 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -173,7 +173,10 @@ watch(
     id="maintainers"
     :title="$t('package.maintainers.title')"
   >
-    <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
+    <ul
+      class="space-y-2 list-none m-0 p-0 my-1 px-1"
+      :aria-label="$t('package.maintainers.list_label')"
+    >
       <li
         v-for="maintainer in visibleMaintainers"
         :key="maintainer.name ?? maintainer.email"
@@ -214,7 +217,7 @@ watch(
         <button
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-accent/70"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
@@ -231,7 +234,7 @@ watch(
     <button
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
       type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
@@ -257,18 +260,18 @@ watch(
             name="add-owner-username"
             :placeholder="$t('package.maintainers.username_placeholder')"
             v-bind="noCorrect"
-            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
           />
           <button
             type="submit"
             :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
           >
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
           </button>
           <button
             type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
           >
@@ -279,7 +282,7 @@ watch(
       <button
         v-else
         type="button"
-        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="showAddOwner = true"
       >
         {{ $t('package.maintainers.add_owner') }}
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 8a9bc4df7..34203cd35 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -88,7 +88,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 56673a686..d3c720027 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -60,13 +60,13 @@ const typesHref = computed(() => {
           :is="typesHref ? NuxtLink : 'span'"
           :to="typesHref"
           :tabindex="!typesHref ? 0 : undefined"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="[
             hasTypes
               ? 'text-fg-muted bg-bg-muted border border-border'
               : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
             typesHref
-              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
+              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-accent/70'
               : '',
           ]"
         >
@@ -85,7 +85,7 @@ const typesHref = computed(() => {
       <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
           :class="
             hasEsm
               ? 'text-fg-muted bg-bg-muted border border-border'
@@ -107,7 +107,7 @@ const typesHref = computed(() => {
       <TooltipApp :text="$t('package.metrics.cjs')">
         <span
           tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
         >
           <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS
diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index 15b575013..83a6cdefb 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/app/components/Package/Playgrounds.vue
@@ -109,7 +109,7 @@ function focusMenuItem(index: number) {
 </script>
 
 <template>
-  <section v-if="links.length > 0">
+  <section v-if="links.length > 0" class="px-1">
     <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
       {{ $t('package.playgrounds.title') }}
     </h2>
@@ -121,7 +121,7 @@ function focusMenuItem(index: number) {
           :href="firstLink.url"
           target="_blank"
           rel="noopener noreferrer"
-          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
         >
           <span
             :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
@@ -137,7 +137,7 @@ function focusMenuItem(index: number) {
         type="button"
         aria-haspopup="true"
         :aria-expanded="isOpen"
-        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
         @click="isOpen = !isOpen"
         @keydown="handleKeydown"
       >
@@ -176,7 +176,7 @@ function focusMenuItem(index: number) {
               target="_blank"
               rel="noopener noreferrer"
               role="menuitem"
-              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-none focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
+              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-accent/70 focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
               @click="closeDropdown"
             >
               <span
diff --git a/app/components/Package/SkillsCard.vue b/app/components/Package/SkillsCard.vue
index 4673801e4..bdcb89f60 100644
--- a/app/components/Package/SkillsCard.vue
+++ b/app/components/Package/SkillsCard.vue
@@ -14,7 +14,7 @@ const skillsModal = useModal('skills-modal')
   <CollapsibleSection v-if="skills.length" :title="$t('package.skills.title')" id="skills">
     <button
       type="button"
-      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-accent/70 transition-colors duration-200"
       @click="skillsModal.open()"
     >
       <span class="i-custom:agent-skills w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 02bf0472b..8261e378b 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -62,7 +62,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-npm'"
           :tabindex="selectedMethod === 'skills-npm' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70"
           :class="
             selectedMethod === 'skills-npm'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -77,7 +77,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           :aria-selected="selectedMethod === 'skills-cli'"
           :tabindex="selectedMethod === 'skills-cli' ? 0 : -1"
           type="button"
-          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70"
           :class="
             selectedMethod === 'skills-cli'
               ? 'bg-bg border-border shadow-sm text-fg'
@@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           </code>
           <button
             type="button"
-            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyCommand"
           >
@@ -154,7 +154,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
       <li v-for="skill in skills" :key="skill.dirName">
         <button
           type="button"
-          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-accent/70"
           :aria-expanded="expandedSkills.has(skill.dirName)"
           @click="toggleSkill(skill.dirName)"
         >
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index e9024a51b..9461da3d8 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -311,7 +311,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
         :title="$t('package.downloads.community_distribution')"
       >
         <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />
@@ -322,14 +322,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">
         <div
-          class="flex items-center gap-2 pe-2"
+          class="flex items-center gap-2 pe-2 px-1"
           :class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
         >
           <!-- Expand button (only if there are more versions to show) -->
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -362,7 +362,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div>
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
+                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 hover:text-red-300'
@@ -477,10 +477,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
       </div>
 
       <!-- Other versions section -->
-      <div class="pt-1">
+      <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
@@ -579,7 +579,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center gap-2 min-w-0">
                     <button
                       type="button"
-                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm"
                       :aria-expanded="expandedMajorGroups.has(group.groupKey)"
                       :aria-label="
                         expandedMajorGroups.has(group.groupKey)
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 0b5b2a429..9b505ea0d 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -67,7 +67,7 @@ function getDepthStyle(depth: string | undefined) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/70"
         :aria-expanded="isExpanded"
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 1a5b257b3..0ccf6e0ce 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -64,7 +64,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
-  for (const item of accentColors) {
+  for (const item of accentColors.value) {
     map[item.id] = item.value
   }
   return map
@@ -202,7 +202,7 @@ const config = computed(() => {
         <button
           type="button"
           @click="openChartModal"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
         >
           <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
index 279eafd79..25f5dfab1 100644
--- a/app/components/PaginationControls.vue
+++ b/app/components/PaginationControls.vue
@@ -153,7 +153,7 @@ function handlePageSizeChange(event: Event) {
         <select
           id="page-size"
           :value="pageSize"
-          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+          class="appearance-none bg-bg-subtle border border-border rounded-md ps-3 pe-8 py-1 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover"
           @change="handlePageSizeChange"
         >
           <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index 17b8c8ebd..c928a17f4 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -60,7 +60,7 @@ function handleClick(event: MouseEvent) {
 
 <template>
   <article
-    class="readme prose prose-invert max-w-[70ch] lg:max-w-none"
+    class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
     v-html="html"
     @click="handleClick"
   />
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 36226ee24..c81c82457 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -148,7 +148,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.readme.toc_title')"
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 0a4361d74..11fc79365 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -22,7 +22,7 @@ const checked = defineModel<boolean>({
     </span>
     <span
       class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 transition-colors duration-200 ease-in-out motion-reduce:transition-none cursor-pointer"
-      :class="checked ? 'bg-accent border-transparent shadow-sm' : 'bg-bg border border-border'"
+      :class="checked ? 'bg-accent border-transparent shadow-sm' : 'bg-bg border border-border/50'"
       aria-hidden="true"
     >
       <span
diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index 32e336399..b0f48c99b 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -68,7 +68,7 @@ ${template}`
         </h4>
         <button
           type="button"
-          class="text-xs text-accent hover:underline rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+          class="text-xs text-accent hover:underline rounded focus-visible:outline-accent/70"
           @click="copyMissingKeysTemplate"
         >
           {{ copied ? $t('common.copied') : $t('i18n.copy_keys') }}
@@ -84,7 +84,7 @@ ${template}`
       <button
         v-if="hasMoreKeys"
         type="button"
-        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-accent/70"
         @click="showAll = true"
       >
         {{ $t('i18n.show_more_keys', { count: remainingCount }) }}
@@ -102,7 +102,7 @@ ${template}`
           :href="status.githubEditUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-accent/70"
         >
           <span class="i-carbon-edit w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.edit_on_github') }}
@@ -112,7 +112,7 @@ ${template}`
           :href="contributionGuideUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-accent/70"
         >
           <span class="i-carbon-document w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.view_guide') }}
diff --git a/app/components/Terminal/Execute.vue b/app/components/Terminal/Execute.vue
index e21b82f46..0484ef646 100644
--- a/app/components/Terminal/Execute.vue
+++ b/app/components/Terminal/Execute.vue
@@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyExecuteCommand"
           >
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 0a096dbd2..c4a2154af 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
@@ -150,7 +150,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <NuxtLink
               :to="`/package/${typesPackageName}`"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
@@ -185,7 +185,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
             >
               {{ runCopied ? $t('common.copied') : $t('common.copy') }}
@@ -202,7 +202,8 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <NuxtLink
               :to="`/package/${createPackageInfo.packageName}`"
-              class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+              class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-accent/70 rounded"
+              :title="$t('package.create.view', { packageName: createPackageInfo.packageName })"
             >
               <TooltipApp
                 :text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
@@ -232,7 +233,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
             >
             <button
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
               :aria-label="$t('package.create.copy_command')"
               @click.stop="copyCreateCommand"
             >
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 7c7b2e44e..21fc35366 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -154,7 +154,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
       :aria-activedescendant="
         highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined
       "
-      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="w-full px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70 disabled:opacity-50 disabled:cursor-not-allowed"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index b0c2f6ff6..98c313957 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -6,7 +6,7 @@ import { BACKGROUND_THEMES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
-type AccentColorId = keyof typeof ACCENT_COLORS
+type AccentColorId = keyof typeof ACCENT_COLORS.light
 
 /**
  * Application settings stored in localStorage
@@ -76,16 +76,23 @@ export function useRelativeDates() {
  */
 export function useAccentColor() {
   const { settings } = useSettings()
+  const colorMode = useColorMode()
 
-  const accentColors = Object.entries(ACCENT_COLORS).map(([id, value]) => ({
-    id: id as AccentColorId,
-    name: id,
-    value,
-  }))
+  const accentColors = computed(() => {
+    const isDark = colorMode.value === 'dark'
+    const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
+
+    return Object.entries(colors).map(([id, value]) => ({
+      id: id as AccentColorId,
+      name: id,
+      value,
+    }))
+  })
 
   function setAccentColor(id: AccentColorId | null) {
-    const color = id ? ACCENT_COLORS[id] : null
-    if (color) {
+    if (id) {
+      const isDark = colorMode.value === 'dark'
+      const color = isDark ? ACCENT_COLORS.dark[id] : ACCENT_COLORS.light[id]
       document.documentElement.style.setProperty('--accent-color', color)
     } else {
       document.documentElement.style.removeProperty('--accent-color')
@@ -93,6 +100,16 @@ export function useAccentColor() {
     settings.value.accentColorId = id
   }
 
+  // Update accent color when color mode changes
+  watch(
+    () => colorMode.value,
+    () => {
+      if (settings.value.accentColorId) {
+        setAccentColor(settings.value.accentColorId)
+      }
+    },
+  )
+
   return {
     accentColors,
     selectedAccentColor: computed(() => settings.value.accentColorId),
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 45d0a0408..1afa7b981 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -216,7 +216,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
       <footer class="mt-16 pt-8 border-t border-border">
         <NuxtLink
           to="/"
-          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-accent/70"
         >
           <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('about.back_home') }}
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 0ac2a2e78..ec14deaa0 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -85,7 +85,7 @@ useSeoMeta({
           </h2>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
@@ -96,7 +96,7 @@ useSeoMeta({
           <span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
           <button
             type="button"
-            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
+            class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
             :class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index de689018b..d50641f2e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -59,14 +59,7 @@ defineOgImageComponent('Default', {
           dir="ltr"
           class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
         >
-          <img
-            aria-hidden="true"
-            :alt="$t('alt_logo')"
-            src="/logo.svg"
-            width="48"
-            height="48"
-            class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl"
-          />
+          <AppLogo class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl" />
           <span class="pb-4">npmx</span>
         </h1>
 
@@ -107,13 +100,13 @@ defineOgImageComponent('Default', {
                   autofocus
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
                   @input="handleInput"
                 />
 
                 <button
                   type="submit"
-                  class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                  class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-accent/70"
                 >
                   <span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span>
                   {{ $t('search.button') }}
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 9ef07ae6a..5248fabe3 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -407,7 +407,7 @@ defineOgImageComponent('Default', {
                   v-for="mode in markdownViewModes"
                   :key="mode.key"
                   role="tab"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
                   :class="
                     markdownViewMode === mode.key
                       ? 'bg-bg shadow text-fg border-border'
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 11be99087..fd90af793 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -488,17 +488,22 @@ defineOgImageComponent('Package', {
             </h1>
 
             <!-- Floating copy button -->
-            <TooltipAnnounce :text="$t('common.copied')" :isVisible="copiedPkgName">
-              <button
-                type="button"
-                @click="copyPkgName()"
-                class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
-                :aria-label="$t('package.copy_name')"
-              >
-                <span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
-                {{ $t('package.copy_name') }}
-              </button>
-            </TooltipAnnounce>
+            <button
+              type="button"
+              @click="copyPkgName()"
+              class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+              :class="
+                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
+              "
+              :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
+            >
+              <span
+                :class="copiedPkgName ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                class="w-3.5 h-3.5"
+                aria-hidden="true"
+              />
+              {{ copiedPkgName ? $t('common.copied') : $t('package.copy_name') }}
+            </button>
           </div>
           <span
             v-if="resolvedVersion"
@@ -582,7 +587,7 @@ defineOgImageComponent('Package', {
             <NuxtLink
               v-if="docsLink"
               :to="docsLink"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="d"
             >
               <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
@@ -596,7 +601,7 @@ defineOgImageComponent('Package', {
             </NuxtLink>
             <NuxtLink
               :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="."
             >
               <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
@@ -610,7 +615,7 @@ defineOgImageComponent('Package', {
             </NuxtLink>
             <NuxtLink
               :to="{ path: '/compare', query: { packages: pkg.name } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
+              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="c"
             >
               <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
@@ -833,7 +838,7 @@ defineOgImageComponent('Package', {
                 :href="`https://npmgraph.js.org/?q=${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
                 :title="$t('package.stats.view_dependency_graph')"
               >
                 <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
@@ -845,7 +850,7 @@ defineOgImageComponent('Package', {
                 :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
                 :title="$t('package.stats.inspect_dependency_tree')"
               >
                 <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
@@ -1036,11 +1041,11 @@ defineOgImageComponent('Package', {
 
       <!-- README -->
       <section id="readme" class="area-readme min-w-0 scroll-mt-20">
-        <div class="flex flex-wrap items-center justify-between mb-3">
+        <div class="flex flex-wrap items-center justify-between mb-4 px-1">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <a
               href="#readme"
-              class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+              class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline mt-1"
             >
               {{ $t('package.readme.title') }}
               <span
@@ -1076,7 +1081,7 @@ defineOgImageComponent('Package', {
 
       <div class="area-sidebar">
         <!-- Sidebar -->
-        <div class="sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-hidden xl:(top-22 pt-2)">
+        <div class="sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-hidden xl:(top-22) pt-1">
           <!-- Maintainers (with admin actions when connected) -->
           <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
index d01e0d9db..046ce95f9 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -640,7 +640,7 @@ defineOgImageComponent('Default', {
             </div>
             <button
               type="button"
-              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
               @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}
@@ -736,7 +736,7 @@ defineOgImageComponent('Default', {
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
                 <button
                   type="button"
-                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                  class="px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
                   @click="claimPackageModalRef?.open()"
                 >
                   {{ $t('search.claim_button', { name: query }) }}
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 38bba087b..91211c50b 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -46,7 +46,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 shrink-0"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
@@ -74,7 +74,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
@@ -161,7 +161,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -193,7 +193,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
               >
                 <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
diff --git a/app/utils/prehydrate.ts b/app/utils/prehydrate.ts
index 562ef40b7..d5b1d4c5c 100644
--- a/app/utils/prehydrate.ts
+++ b/app/utils/prehydrate.ts
@@ -1,6 +1,6 @@
 import type { ACCENT_COLORS } from '#shared/utils/constants'
 
-type AccentColorId = keyof typeof ACCENT_COLORS
+type AccentColorId = keyof typeof ACCENT_COLORS.light // for both themes color names are same
 
 /**
  * Initialize user preferences before hydration to prevent flash/layout shift.
@@ -14,13 +14,24 @@ export function initPreferencesOnPrehydrate() {
   // All constants must be hardcoded inside the callback.
   onPrehydrate(() => {
     // Accent colors - hardcoded since ACCENT_COLORS can't be referenced
-    const colors: Record<AccentColorId, string> = {
-      rose: 'oklch(0.797 0.084 11.056)',
-      amber: 'oklch(0.828 0.165 84.429)',
-      emerald: 'oklch(0.792 0.153 166.95)',
-      sky: 'oklch(0.787 0.128 230.318)',
-      violet: 'oklch(0.714 0.148 286.067)',
-      coral: 'oklch(0.704 0.177 14.75)',
+
+    const colors = {
+      light: {
+        coral: 'oklch(0.70 0.19 14.75)',
+        amber: 'oklch(0.8 0.25 84.429)',
+        emerald: 'oklch(0.70 0.17 166.95)',
+        sky: 'oklch(0.70 0.15 230.318)',
+        violet: 'oklch(0.70 0.17 286.067)',
+        magenta: 'oklch(0.75 0.18 330)',
+      },
+      dark: {
+        coral: 'oklch(0.704 0.177 14.75)',
+        amber: 'oklch(0.828 0.165 84.429)',
+        emerald: 'oklch(0.792 0.153 166.95)',
+        sky: 'oklch(0.787 0.128 230.318)',
+        violet: 'oklch(0.78 0.148 286.067)',
+        magenta: 'oklch(0.78 0.15 330)',
+      },
     }
 
     // Valid package manager IDs
@@ -29,10 +40,13 @@ export function initPreferencesOnPrehydrate() {
     // Read settings from localStorage
     const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
 
-    // Apply accent color
-    const color = settings.accentColorId ? colors[settings.accentColorId as AccentColorId] : null
-    if (color) {
-      document.documentElement.style.setProperty('--accent-color', color)
+    // Determine theme (default to 'dark')
+    const theme = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'
+
+    // Apply accent color based on theme
+    const accentColorId = settings.accentColorId as AccentColorId | undefined
+    if (accentColorId && colors[theme][accentColorId]) {
+      document.documentElement.style.setProperty('--accent-color', colors[theme][accentColorId])
     }
 
     // Apply background accent
diff --git a/public-dev/favicon.svg b/public-dev/favicon.svg
index cd3f0752c..befaf6550 100644
--- a/public-dev/favicon.svg
+++ b/public-dev/favicon.svg
@@ -1,12 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
   <text
-    x="256"
-    y="320"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-    font-size="280"
+    x="320"
+    y="370"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-size="420"
     font-weight="500"
     text-anchor="middle"
-    fill="#91BA4D"
-  ><tspan fill="#20461A">.</tspan>/</text>
+    fill="#fafafa"
+  ><tspan>/</tspan></text>
 </svg>
diff --git a/public-dev/logo.svg b/public-dev/logo.svg
index 2be0bf86f..befaf6550 100644
--- a/public-dev/logo.svg
+++ b/public-dev/logo.svg
@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
-  <rect x="110" y="310" width="60" height="60" fill="#20461A"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
   <text
     x="320"
     y="370"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
     font-size="420"
     font-weight="500"
     text-anchor="middle"
-    fill="#91BA4D"
+    fill="#fafafa"
   ><tspan>/</tspan></text>
 </svg>
diff --git a/public-staging/favicon.svg b/public-staging/favicon.svg
index 364688c3d..befaf6550 100644
--- a/public-staging/favicon.svg
+++ b/public-staging/favicon.svg
@@ -1,12 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
   <text
-    x="256"
-    y="320"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-    font-size="280"
+    x="320"
+    y="370"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-size="420"
     font-weight="500"
     text-anchor="middle"
-    fill="#5AB1CC"
-  ><tspan fill="#1E4E5E">.</tspan>/</text>
+    fill="#fafafa"
+  ><tspan>/</tspan></text>
 </svg>
diff --git a/public-staging/logo.svg b/public-staging/logo.svg
index 97b35a4fc..befaf6550 100644
--- a/public-staging/logo.svg
+++ b/public-staging/logo.svg
@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
-  <rect x="110" y="310" width="60" height="60" fill="#1E4E5E"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
   <text
     x="320"
     y="370"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
     font-size="420"
     font-weight="500"
     text-anchor="middle"
-    fill="#5AB1CC"
+    fill="#fafafa"
   ><tspan>/</tspan></text>
 </svg>
diff --git a/public/favicon.svg b/public/favicon.svg
index 73af71b2c..befaf6550 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,12 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
   <rect width="512" height="512" rx="64" fill="#0a0a0a"/>
+  <rect x="110" y="310" width="60" height="60" fill="#525252"/>
   <text
-    x="256"
-    y="320"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
-    font-size="280"
+    x="320"
+    y="370"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-size="420"
     font-weight="500"
     text-anchor="middle"
     fill="#fafafa"
-  ><tspan fill="#525252">.</tspan>/</text>
+  ><tspan>/</tspan></text>
 </svg>
diff --git a/public/logo.svg b/public/logo.svg
index 0f93226fc..befaf6550 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -4,7 +4,7 @@
   <text
     x="320"
     y="370"
-    font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    font-family="'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
     font-size="420"
     font-weight="500"
     text-anchor="middle"
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index ffbc7ccf4..2c5817c1b 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -45,12 +45,22 @@ export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
 
 // Theming
 export const ACCENT_COLORS = {
-  rose: 'oklch(0.797 0.084 11.056)',
-  amber: 'oklch(0.828 0.165 84.429)',
-  emerald: 'oklch(0.792 0.153 166.95)',
-  sky: 'oklch(0.787 0.128 230.318)',
-  violet: 'oklch(0.714 0.148 286.067)',
-  coral: 'oklch(0.704 0.177 14.75)',
+  light: {
+    coral: 'oklch(0.70 0.19 14.75)',
+    amber: 'oklch(0.8 0.25 84.429)',
+    emerald: 'oklch(0.70 0.17 166.95)',
+    sky: 'oklch(0.70 0.15 230.318)',
+    violet: 'oklch(0.70 0.17 286.067)',
+    magenta: 'oklch(0.75 0.18 330)',
+  },
+  dark: {
+    coral: 'oklch(0.704 0.177 14.75)',
+    amber: 'oklch(0.828 0.165 84.429)',
+    emerald: 'oklch(0.792 0.153 166.95)',
+    sky: 'oklch(0.787 0.128 230.318)',
+    violet: 'oklch(0.78 0.148 286.067)',
+    magenta: 'oklch(0.78 0.15 330)',
+  },
 } as const
 
 export const BACKGROUND_THEMES = {
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 44af085b0..8ed874e4e 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -61,6 +61,7 @@ afterEach(() => {
 import {
   AppFooter,
   AppHeader,
+  AppLogo,
   BaseCard,
   BuildEnvironment,
   CallToAction,
@@ -224,6 +225,22 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('AppLogo', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AppLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom class', async () => {
+      const component = await mountSuspended(AppLogo, {
+        props: { class: 'h-6 w-6 text-accent' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('BaseCard', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BaseCard, {
diff --git a/uno.config.ts b/uno.config.ts
index f49fd3ab0..e89ce5738 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -123,7 +123,7 @@ export default defineConfig({
     ['container-sm', 'max-w-5xl mx-auto px-4 sm:px-6'],
 
     // Focus states - subtle but accessible
-    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],
+    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/50 ring-offset-2)'],
 
     // Buttons
     [