diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index 00e5cea7..64ded001 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -72,7 +72,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        box-shadow: 0 0 0 2px var(--blue) inset;
+        box-shadow: var(--focus-ring);
         border-radius: inherit;
     }
 
diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
index b9b49c78..e5ef9bc4 100644
--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -58,7 +58,7 @@
 
     #processing-status.completed {
         box-shadow:
-            0 0 0 2px var(--blue) inset,
+            var(--focus-ring),
             var(--processing-status-glow);
     }
 
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 6f3a7224..fb49d1b2 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -91,7 +91,7 @@
     }
 
     #download-button:focus-visible {
-        box-shadow: 0 0 0 2px var(--blue) inset;
+        box-shadow: var(--focus-ring);
     }
 
     #download-state {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index e4271d21..5f4d0458 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -114,6 +114,8 @@
         --green: #51cf5e;
         --blue: #2f8af9;
 
+        --focus-ring: 0 0 0 2px var(--blue) inset;
+
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
         --button-active-hover: #2a2a2a;
@@ -364,7 +366,7 @@
     }
 
     :global(:focus-visible) {
-        box-shadow: 0 0 0 2px var(--blue) inset !important;
+        box-shadow: var(--focus-ring) !important;
         outline: none;
         z-index: 1;
     }