diff --git a/app/app.vue b/app/app.vue
index 2b0a58740..f1edafa6e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -142,11 +142,12 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
+  left: 0.25rem;
   z-index: 100;
 }
 
 .skip-link:focus {
-  top: 0;
+  top: 0.25rem;
 }
 </style>
 
diff --git a/app/assets/main.css b/app/assets/main.css
index dbf096b22..6e8517b98 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -222,13 +222,8 @@ body {
   line-height: 1.6;
 }
 
-:focus-visible,
 :-moz-focusring {
-  /* weird Firefox behavior makes it necessary to add `!important` 
-  or otherwise the selector would need to be more specific,
-  which it explicitly should not be. */
-  outline: 2px solid var(--accent) !important;
-  outline-offset: 2px !important;
+  outline: auto;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index cf7961ecb..6098ab03c 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -25,7 +25,7 @@ const showModal = () => modalRef.value?.showModal?.()
           </LinkBase>
           <button
             type="button"
-            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index a55ea3217..3e420fa8b 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -193,7 +193,7 @@ 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 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 focus-visible(outline-2 outline-accent)"
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
@@ -207,7 +207,7 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded focus-visible:(outline-2 outline-accent)"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
@@ -251,12 +251,12 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
-        <!-- Desktop: Explore link -->
+      <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
+        <!-- Desktop links -->
         <LinkBase
           v-for="link in desktopLinks"
           :key="link.name"
-          class="border-none"
+          class="border-0"
           variant="button-secondary"
           :to="link.to"
           :aria-keyshortcuts="link.keyshortcut"
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 41f227486..80b13b9b2 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -5,10 +5,9 @@ const props = withDefaults(
     type?: 'button' | 'submit'
     variant?: 'primary' | 'secondary'
     size?: 'small' | 'medium'
+    classicon?: string
     ariaKeyshortcuts?: string
     block?: boolean
-
-    classicon?: string
   }>(),
   {
     type: 'button',
@@ -28,16 +27,15 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-colors duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,
     }"
     :type="props.type"
     :disabled="
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index f84d8653d..1d9eea95b 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ms-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
   >
     <slot />
   </component>
diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index 3e3f133ad..0ea77aec4 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -37,7 +37,7 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent"
       >
         <h3 class="z-1 flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 65a2a45cc..0ba01a871 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -84,7 +84,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-accent/70 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-2 outline-offset-2 outline-accent) rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index e3fb55b95..9008a63d0 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -69,7 +69,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-accent/70"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 3d5446e07..3a4fdea8b 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -56,13 +56,13 @@ function openAuthModal() {
 </script>
 
 <template>
-  <div ref="accountMenuRef" class="relative flex min-w-28 justify-end">
+  <div ref="accountMenuRef">
     <ButtonBase
       type="button"
+      class="border-0"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
-      class="border-none"
     >
       <!-- Stacked avatars when connected -->
       <span
@@ -106,7 +106,7 @@ function openAuthModal() {
       </span>
 
       <!-- "connect" text when not connected -->
-      <span v-if="!hasAnyConnection" class="font-mono text-sm">
+      <span v-if="!hasAnyConnection" class="font-sans text-sm">
         {{ $t('account_menu.connect') }}
       </span>
 
@@ -137,7 +137,7 @@ function openAuthModal() {
     >
       <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
         <div
-          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
+          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/10 overflow-hidden px-1"
         >
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
@@ -227,10 +227,12 @@ function openAuthModal() {
               v-if="!isNpmConnected"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span
                   v-if="isNpmConnecting"
                   class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
@@ -254,10 +256,12 @@ function openAuthModal() {
               v-if="!atprotoUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
index f5fc08ad0..044f77166 100644
--- a/app/components/Header/AccountMenu.server.vue
+++ b/app/components/Header/AccountMenu.server.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="relative flex min-w-28 justify-end">
-    <div
-      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
-    >
-      <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
-      <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
-    </div>
+  <div
+    class="inline-flex gap-x-1.5 items-center justify-center font-mono rounded-md text-sm px-4 py-2 bg-transparent text-fg"
+  >
+    <span class="font-sans text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
+    <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
   </div>
 </template>
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 51e2c3567..a65b1a2d3 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -109,7 +109,8 @@ defineExpose({ focus })
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
           <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            aria-hidden="true"
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
           >
             /
           </span>
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index eda37feec..ccb6c220e 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -18,7 +18,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         :href="token.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="link-subtle"
+        class="focus-visible:(outline-2 outline-accent) rounded-sm"
         :title="$t('package.license.view_spdx')"
       >
         {{ token.value }}
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index eeb1b9bf9..11a463614 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -70,26 +70,27 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
-    ><slot
-  /></span>
+  >
+    <slot />
+  </span>
   <NuxtLink
     v-else
-    class="group/link gap-x-1 items-center"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"
     :class="{
       'flex': block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
         !isLinkAnchor && isLink && !noUnderline,
-      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+      'justify-start font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
         isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200':
+      'justify-center font-mono border border-solid border-border rounded-md  outline-offset-2':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'text-bg bg-fg border-fg hover:(bg-fg/80) aria-[current=true]:(bg-fg/80)':
         variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10) aria-[current=true]:(bg-fg/10 border-fg/10)':
+        variant === 'button-secondary',
     }"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index bab0a08fc..8328f1e8d 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -85,7 +85,7 @@ const numberFormatter = useNumberFormatter()
         )
       "
     >
-      <ul class="px-1 space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0 px-1" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -143,7 +143,7 @@ const numberFormatter = useNumberFormatter()
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        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"
+        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:(outline-2 outline-offset-2 outline-accent)"
         @click="depsExpanded = true"
       >
         {{
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index e812087df..221405f47 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="cursor-pointer 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"
+    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 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) hover:text-fg cursor-pointer"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
@@ -150,7 +150,7 @@ function handleKeydown(event: KeyboardEvent) {
           :key="pm.id"
           role="option"
           :aria-selected="selectedPM === pm.id"
-          class="cursor-pointer flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-color cursor-pointer duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
             highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 5f9fd0221..cf29aa27d 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -324,7 +324,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <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 rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -465,7 +465,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 5cf37a7e8..497b9b75e 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -222,7 +222,6 @@ const config = computed(() => {
           v-if="hasWeeklyDownloads"
           type="button"
           @click="openChartModal"
-          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')"
           classicon="i-carbon:data-analytics"
         >
diff --git a/app/components/PackageProvenanceSection.vue b/app/components/PackageProvenanceSection.vue
index caf6cd36d..a0ea69383 100644
--- a/app/components/PackageProvenanceSection.vue
+++ b/app/components/PackageProvenanceSection.vue
@@ -33,7 +33,7 @@ defineProps<{
           :href="details.buildSummaryUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="link text-sm text-fg-muted inline-flex"
+          class="link text-sm text-fg-muted inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
         >
           {{ $t('package.provenance_section.view_build_summary') }}
         </a>
@@ -49,7 +49,7 @@ defineProps<{
               :href="details.sourceCommitUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 truncate"
+              class="link font-mono text-sm block min-w-0 truncate rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.sourceCommitSha ?? details.sourceCommitUrl"
             >
               {{
@@ -70,7 +70,7 @@ defineProps<{
               :href="details.buildFileUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 break-words"
+              class="link font-mono text-sm block min-w-0 break-words rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.buildFilePath ?? details.buildFileUrl"
             >
               {{ details.buildFilePath ?? details.buildFileUrl }}
@@ -87,7 +87,7 @@ defineProps<{
               :href="details.publicLedgerUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link text-sm inline-flex"
+              class="link text-sm inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
             >
               {{ $t('package.provenance_section.transparency_log_entry') }}
             </a>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index 512e217cf..4bc87ad34 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -152,6 +152,13 @@ function handleClick(event: MouseEvent) {
   text-decoration-color: var(--accent);
 }
 
+.readme :deep(a:focus-visible),
+.readme :deep(button:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 .readme :deep(code) {
   @apply font-mono;
   font-size: 0.875em;
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index e5d3b2ce8..5c7ad0444 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -24,7 +24,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
     <label
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index cd7f7f41a..3ba508127 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -16,7 +16,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
     <label
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 0e57ac247..b12027641 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
 <template>
   <component
     :is="as"
-    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 outline-none"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 908cc2e8d..97214170b 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -125,7 +125,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-accent/70 select-none"
+            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-98 focus-visible:(opacity-100 outline-2 outline-accent) select-none"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index a3c9a7c8d..10becef6f 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -117,7 +117,7 @@ useSeoMeta({
           </h1>
           <button
             type="button"
-            class="cursor-pointer 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"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-if="canGoBack"
           >
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 2fac440f4..509a2b4b8 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -579,11 +579,8 @@ onKeyStroke(
             <button
               type="button"
               @click="copyPkgName()"
-              class="absolute z-20 inset-is-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="[
-                $style.copyButton,
-                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
-              ]"
+              class="absolute z-20 inset-is-0 top-full inline-flex items-center bg-bg 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 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0)"
+              :class="copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted border-border'"
               :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
             >
               <span
@@ -645,7 +642,7 @@ onKeyStroke(
             v-if="resolvedVersion"
             as="nav"
             :aria-label="$t('package.navigation')"
-            class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
+            class="ms-auto flex max-sm:(fixed bottom-4 inset-is-1/2 -translate-x-1/2 z-40 backdrop-blur-md)"
             :class="$style.packageNav"
           >
             <LinkBase
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 14d50e110..a1ff9c965 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -51,7 +51,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="cursor-pointer 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 p-1.5 -mx-1.5"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-if="canGoBack"
           >
@@ -248,15 +248,13 @@ const setLocale: typeof setNuxti18nLocale = locale => {
 
             <!-- Simple help link for source locale -->
             <template v-else>
-              <a
-                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-accent/70 rounded"
+              <LinkBase
+                classicon="i-carbon:logo-github"
+                class="font-sans"
+                to="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
               >
-                <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
-              </a>
+              </LinkBase>
             </template>
           </div>
         </section>