diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css
index 6bfb7f698..d70e5392c 100644
--- a/app/assets/tailwind/sure-design-system/_generated.css
+++ b/app/assets/tailwind/sure-design-system/_generated.css
@@ -15,6 +15,7 @@
   --color-info: var(--color-blue-600);
   --color-shadow: --alpha(var(--color-black) / 6%);
   --color-link: var(--color-blue-600);
+  --color-focus-ring: var(--color-alpha-black-700);
   --color-tertiary: var(--color-alpha-black-100);
   --color-surface: var(--color-gray-50);
   --color-surface-hover: var(--color-gray-100);
@@ -216,6 +217,7 @@
     --color-info: var(--color-blue-500);
     --color-shadow: --alpha(var(--color-white) / 8%);
     --color-link: var(--color-blue-500);
+    --color-focus-ring: var(--color-alpha-white-700);
     --color-tertiary: var(--color-alpha-white-200);
     --color-surface: var(--color-black);
     --color-surface-hover: var(--color-gray-800);
diff --git a/app/assets/tailwind/sure-design-system/base.css b/app/assets/tailwind/sure-design-system/base.css
index b23d9fb9e..9bf606a10 100644
--- a/app/assets/tailwind/sure-design-system/base.css
+++ b/app/assets/tailwind/sure-design-system/base.css
@@ -11,10 +11,21 @@
   }
 
   button {
-    @apply cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-alpha-black-300;
+    @apply cursor-pointer;
 
-    @variant theme-dark {
-      @apply focus-visible:ring-alpha-white-300;
+    /* Canonical keyboard-focus indicator (#2136) — the same recipe as
+       `.focus-ring` in components.css, applied here so every <button> gets
+       it by default. This used to be a `ring-2 ring-offset-2` box-shadow,
+       which double-painted alongside the `.focus-ring` outline on DS
+       primitives (Buttonish, tabs, popover, tooltip): box-shadow and
+       outline are independent properties, so the components-layer class
+       could never clear it. Transparent resting outline for the same
+       transition reasoning as `.focus-ring`. */
+    outline: 2px solid transparent;
+    outline-offset: 0;
+
+    &:focus-visible {
+      outline-color: var(--color-focus-ring);
     }
   }
 
diff --git a/app/assets/tailwind/sure-design-system/components.css b/app/assets/tailwind/sure-design-system/components.css
index 7e96c3645..63c1229fe 100644
--- a/app/assets/tailwind/sure-design-system/components.css
+++ b/app/assets/tailwind/sure-design-system/components.css
@@ -1,4 +1,39 @@
 @layer components {
+  /*
+    Canonical keyboard-focus indicator (#2136). One recipe for every focusable
+    primitive: a neutral 2px `outline` that hugs the control (`outline-offset: 0`
+    so it sits right at the edge and follows the border-radius), in the
+    theme-aware `focus-ring` token.
+
+    `outline` — NOT box-shadow — on purpose: a components-layer box-shadow loses
+    to any utility-layer `shadow-*` (or `focus-within:shadow-none` on the field)
+    on the same element, so the ring silently vanished on shadowed controls.
+    `outline` is a separate property with no such conflict, and it doubles as the
+    forced-colors (Windows high-contrast) indicator. `:focus-visible` only, so it
+    never shows for mouse/touch. `.focus-ring-within` mirrors it onto a wrapper
+    whose focus lands on a child input. `.form-field` deliberately does NOT
+    adopt it: form fields keep their original always-on soft halo (ring-4 at
+    low alpha) — a resting decoration, not a keyboard-only indicator.
+  */
+  /* Base: an always-present transparent outline so consumers that carry
+     `transition-all` (or any transition touching outline-color) animate
+     transparent -> token instead of passing through `currentColor` — the
+     latter reads as a black border flashing in and out. */
+  .focus-ring,
+  .focus-ring-within {
+    outline: 2px solid transparent;
+    outline-offset: 0;
+  }
+
+  .focus-ring:focus-visible,
+  .focus-ring-within:focus-within {
+    /* Note: consumers carrying `transition-colors` animate this in over
+       150ms — Tailwind v4's color transition list includes outline-color.
+       Combined with the transparent base above, that reads as a quick
+       fade-in rather than a pop, never a flash through currentColor. */
+    outline-color: var(--color-focus-ring);
+  }
+
   /* Forms */
   .form-field {
     @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;
@@ -168,8 +203,9 @@
     because `@apply`-ing a custom utility drops its dark override. The near-black
     dark track (alpha-black-700) is what makes the gray-700 selected pill read —
     the bespoke controls used a too-light `container-inset` track, hence the
-    audit's "selected pill invisible on dark." Focus = neutral outline (matches
-    the canonical focus ring; inlined until that token lands on main).
+    audit's "selected pill invisible on dark." Focus comes from the canonical
+    recipe (`focus-ring` on link segments, the base button rule on button
+    segments), not from this block.
   */
   .segmented-control {
     @apply inline-flex items-center gap-0.5 p-1 rounded-lg bg-gray-50;
@@ -182,8 +218,6 @@
     @apply inline-flex items-center justify-center px-2 py-1 rounded-md whitespace-nowrap;
     @apply text-sm font-medium text-secondary cursor-pointer transition-colors duration-200;
     @apply hover:bg-gray-200;
-    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
-    @apply focus-visible:outline-alpha-black-400 theme-dark:focus-visible:outline-alpha-white-400;
     @variant theme-dark {
       @apply hover:bg-gray-800;
     }
diff --git a/app/components/DS/buttonish.rb b/app/components/DS/buttonish.rb
index 82ed45b17..967874fba 100644
--- a/app/components/DS/buttonish.rb
+++ b/app/components/DS/buttonish.rb
@@ -92,7 +92,7 @@ class DS::Buttonish < DesignSystemComponent
       # `aria-disabled` to stay clickable/focusable (e.g. submit buttons whose
       # click handler surfaces validation errors — a truly disabled default
       # submit would also swallow Enter-key implicit submission).
-      "font-medium whitespace-nowrap disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+      "font-medium whitespace-nowrap focus-ring disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
       merged_base_classes,
       full_width ? "w-full justify-center" : nil,
       container_size_classes,
diff --git a/app/components/DS/disclosure.rb b/app/components/DS/disclosure.rb
index 1acb7dfe0..b32433a6f 100644
--- a/app/components/DS/disclosure.rb
+++ b/app/components/DS/disclosure.rb
@@ -68,15 +68,15 @@ class DS::Disclosure < DesignSystemComponent
       # surface. Keep cursor + focus-visible ring + flex baseline.
       # Ring token matches `settings/provider_card.html.erb` (the
       # established focus pattern on container cards).
-      "list-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300 rounded-xl"
+      "list-none cursor-pointer focus-ring rounded-xl"
     when :inline
       # Inline variant: no surface, no padding — the summary reads as
       # plain text-link copy. Caller markup (text + optional chevron)
       # provides the visual. Keep cursor + focus-visible ring + matching
       # alpha-black-300 token used by the card variants for consistency.
-      "list-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300 rounded-sm"
+      "list-none cursor-pointer focus-ring rounded-sm"
     else
-      "px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300"
+      "px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface focus-ring min-h-11"
     end
   end
 end
diff --git a/app/components/DS/link.rb b/app/components/DS/link.rb
index 9ca73aacb..0d5c8501a 100644
--- a/app/components/DS/link.rb
+++ b/app/components/DS/link.rb
@@ -6,12 +6,9 @@ class DS::Link < DS::Buttonish
   VARIANTS = VARIANTS.reverse_merge(
     default: {
       # Underline + `text-link` so the link is distinguishable by more
-      # than color alone (WCAG 1.4.1). Focus ring uses the established
-      # alpha-ring DS pattern (also used by DS::Toggle, DS::Tooltip,
-      # provider_card, form-field) so theming stays centralized.
-      container_classes: "text-link underline underline-offset-2 hover:no-underline " \
-                         "focus-visible:ring-2 focus-visible:ring-alpha-black-300 " \
-                         "theme-dark:focus-visible:ring-alpha-white-300",
+      # than color alone (WCAG 1.4.1). Keyboard focus uses the canonical
+      # `.focus-ring` (#2136) so every primitive shares one indicator.
+      container_classes: "text-link underline underline-offset-2 hover:no-underline focus-ring",
       icon_classes: "text-secondary"
     }
   ).freeze
diff --git a/app/components/DS/menu_item.rb b/app/components/DS/menu_item.rb
index a6e07b414..f798f1d5d 100644
--- a/app/components/DS/menu_item.rb
+++ b/app/components/DS/menu_item.rb
@@ -81,7 +81,7 @@ class DS::MenuItem < DesignSystemComponent
 
     def container_classes
       [
-        "flex items-center gap-2 p-2 rounded-md w-full",
+        "flex items-center gap-2 p-2 rounded-md w-full focus-ring",
         destructive? ? "hover:bg-red-tint-5 theme-dark:hover:bg-red-tint-10" : "hover:bg-container-hover"
       ].join(" ")
     end
diff --git a/app/components/DS/popover.html.erb b/app/components/DS/popover.html.erb
index 1f5baf58b..611dd33fe 100644
--- a/app/components/DS/popover.html.erb
+++ b/app/components/DS/popover.html.erb
@@ -9,7 +9,7 @@
         the fallback `ds.popover.avatar_default_label` is used. %>
     <button type="button"
             data-DS--popover-target="button"
-            class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 theme-dark:focus-visible:outline-white"
+            class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 cursor-pointer rounded-full focus-ring"
             aria-label="<%= trigger_aria_label %>"
             aria-haspopup="dialog"
             aria-expanded="false"
diff --git a/app/components/DS/search_input.rb b/app/components/DS/search_input.rb
index 51c3dc9ca..919d59fcc 100644
--- a/app/components/DS/search_input.rb
+++ b/app/components/DS/search_input.rb
@@ -53,15 +53,11 @@ class DS::SearchInput < DesignSystemComponent
         "h-10 pl-10 w-full border-none rounded-lg " \
         "focus:outline-hidden focus:ring-0"
     else
-      # `focus-visible:outline-*` matches the focus-ring pattern from
-      # DS::Button (base.css) so every interactive surface in the design
-      # system uses the same ring token. Replaces the broken
-      # `focus:ring-gray-500` from the inline callsites — that utility
-      # had no backing token and rendered invisibly on the bordered
-      # bg-container surface.
+      # Canonical `.focus-ring` (#2136) — one shared keyboard-focus
+      # indicator across every DS primitive. Replaces the earlier neutral
+      # `outline-gray-900 / theme-dark:outline-white` pair.
       "block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container text-base sm:text-sm " \
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 " \
-        "theme-dark:focus-visible:outline-white"
+        "focus-ring"
     end
   end
 
diff --git a/app/components/DS/segmented_control.rb b/app/components/DS/segmented_control.rb
index 38c000e75..f055dff9e 100644
--- a/app/components/DS/segmented_control.rb
+++ b/app/components/DS/segmented_control.rb
@@ -10,8 +10,11 @@ class DS::SegmentedControl < DesignSystemComponent
   # `full_width: true` stretches segments to equal width (the "equal-footprint"
   # the #2137 audit asked for); default is content width.
   renders_many :segments, ->(label, active: false, href: nil, **opts) do
+    # `focus-ring` is for link segments — button segments already get the
+    # canonical outline from the base-layer button rule (it's an idempotent
+    # duplicate there).
     classes = class_names(
-      "segmented-control__segment",
+      "segmented-control__segment focus-ring",
       ("flex-1" if full_width),
       ("segmented-control__segment--active" if active),
       opts.delete(:class)
diff --git a/app/components/DS/select.html.erb b/app/components/DS/select.html.erb
index be136d947..db6231925 100644
--- a/app/components/DS/select.html.erb
+++ b/app/components/DS/select.html.erb
@@ -33,7 +33,7 @@
   </div>
   <div class="absolute z-50 p-1.5 w-full min-w-32 rounded-lg shadow-border-lg bg-container mt-1.5 transition duration-150 ease-out -translate-y-1 opacity-0 hidden" data-select-target="menu">
     <% if searchable %>
-      <div class="flex items-center bg-container border border-secondary rounded-lg mb-1 focus-within:ring-4 focus-within:ring-alpha-black-200 theme-dark:focus-within:ring-alpha-white-300 transition-shadow">
+      <div class="flex items-center bg-container border border-secondary rounded-lg mb-1 focus-ring-within transition-shadow">
         <%= render DS::SearchInput.new(
           variant: :embedded,
           placeholder: t("helpers.select.search_placeholder"),
diff --git a/app/components/DS/tabs/nav.rb b/app/components/DS/tabs/nav.rb
index eb77672fa..ba84d13b9 100644
--- a/app/components/DS/tabs/nav.rb
+++ b/app/components/DS/tabs/nav.rb
@@ -22,7 +22,7 @@ class DS::Tabs::Nav < DesignSystemComponent
     content_tag(
       :button, label, id: "#{dom_prefix}-tab-#{id}",
       type: "button",
-      class: class_names(btn_classes, is_active ? active_btn_classes : inactive_btn_classes, classes),
+      class: class_names("focus-ring", btn_classes, is_active ? active_btn_classes : inactive_btn_classes, classes),
       role: "tab",
       "aria-selected": is_active.to_s,
       "aria-controls": "#{dom_prefix}-panel-#{id}",
diff --git a/app/components/DS/toggle.rb b/app/components/DS/toggle.rb
index b1a47da4a..36912d5aa 100644
--- a/app/components/DS/toggle.rb
+++ b/app/components/DS/toggle.rb
@@ -27,11 +27,10 @@ class DS::Toggle < DesignSystemComponent
        "after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:shadow-sm",
        "motion-safe:after:transition-transform motion-safe:after:duration-300 motion-safe:after:ease-in-out",
        "peer-checked:bg-success peer-checked:after:translate-x-4",
-       # Focus ring driven from the sr-only input via `peer-focus-visible:`.
-       # Offset places the ring outside the track so it lands on the
-       # surrounding chrome regardless of theme.
-       "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
-       "peer-focus-visible:ring-alpha-black-300 theme-dark:peer-focus-visible:ring-alpha-white-300",
+       # Canonical focus ring (#2136), driven from the sr-only input via
+       # `peer-focus-visible:`. outline-offset places it just outside the track
+       # so it lands on surrounding chrome in either theme.
+       "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring",
        "peer-disabled:opacity-70 peer-disabled:cursor-not-allowed"
     )
   end
diff --git a/app/components/DS/tooltip.html.erb b/app/components/DS/tooltip.html.erb
index fe0c04366..281f2d8e6 100644
--- a/app/components/DS/tooltip.html.erb
+++ b/app/components/DS/tooltip.html.erb
@@ -6,7 +6,7 @@
         name comes from `aria-label`, and the tooltip text is exposed
         via `aria-describedby`. %>
     <button type="button"
-            class="inline-flex items-center cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-300 theme-dark:focus-visible:ring-alpha-white-300 rounded"
+            class="inline-flex items-center cursor-default focus-ring rounded"
             aria-describedby="<%= tooltip_id %>"
             aria-label="<%= t("ds.tooltip.trigger_label", default: "More info") %>">
       <%= helpers.icon icon_name, size: size, color: color %>
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index 9099fd215..02e8948e1 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -18,7 +18,7 @@
       ),
       method: :patch,
       data: { turbo_frame: "category_dropdown" },
-      class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %>
+      class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
 
     <span class="flex items-center justify-center w-5 h-5 shrink-0">
       <% if is_selected %><%= icon("check") %><% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5a00adda6..55f437a91 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -60,7 +60,7 @@ end %>
 
       <div class="flex items-center gap-1">
         <button type="button"
-                class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 rounded-lg text-secondary hover:text-primary hover:bg-container-inset-hover transition-colors"
+                class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 rounded-lg text-secondary hover:text-primary hover:bg-container-inset-hover transition-colors focus-ring"
                 data-action="click->privacy-mode#toggle"
                 data-privacy-mode-target="toggle"
                 title="<%= t("layouts.application.privacy_mode") %>"
@@ -158,7 +158,7 @@ end %>
 
           <div class="flex items-center gap-2">
             <button type="button"
-                    class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 rounded-lg text-secondary hover:text-primary hover:bg-container-inset-hover transition-colors"
+                    class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 rounded-lg text-secondary hover:text-primary hover:bg-container-inset-hover transition-colors focus-ring"
                     data-action="click->privacy-mode#toggle"
                     data-privacy-mode-target="toggle"
                     title="<%= t("layouts.application.privacy_mode") %>"
diff --git a/app/views/layouts/shared/_nav_item.html.erb b/app/views/layouts/shared/_nav_item.html.erb
index b7b226c42..4f9a0b24d 100644
--- a/app/views/layouts/shared/_nav_item.html.erb
+++ b/app/views/layouts/shared/_nav_item.html.erb
@@ -1,6 +1,6 @@
 <%# locals: (name:, path:, icon:, icon_custom:, active:, mobile_only: false, preview: false) %>
 
-<%= link_to path, class: "space-y-1 group block relative pb-1", aria: { current: ("page" if active) } do %>
+<%= link_to path, class: "space-y-1 group block relative pb-1 focus-ring rounded-lg", aria: { current: ("page" if active) } do %>
   <div class="grow flex flex-col lg:flex-row gap-1 items-center">
     <%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
 
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
index 7d9a7b25e..46edc712d 100644
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -53,7 +53,7 @@
             action: "input->password-validator#validate"
           } %>
       <button type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary hover:text-primary focus:outline-none"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary hover:text-primary"
               data-action="click->password-visibility#toggle">
         <div data-password-visibility-target="showIcon">
           <%= icon("eye") %>
diff --git a/app/views/settings/_settings_nav_item.html.erb b/app/views/settings/_settings_nav_item.html.erb
index cbf513113..7ac31724c 100644
--- a/app/views/settings/_settings_nav_item.html.erb
+++ b/app/views/settings/_settings_nav_item.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (name:, path:, icon:) %>
 
 <%= link_to path, class: class_names(
-  "flex items-center gap-2 whitespace-nowrap px-3 py-2 rounded-lg text-sm",
+  "flex items-center gap-2 whitespace-nowrap px-3 py-2 rounded-lg text-sm focus-ring",
   page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-surface-hover border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
   <%= icon(icon) if icon %>
diff --git a/app/views/shared/notifications/_notice.html.erb b/app/views/shared/notifications/_notice.html.erb
index a715f674e..6eabe16e7 100644
--- a/app/views/shared/notifications/_notice.html.erb
+++ b/app/views/shared/notifications/_notice.html.erb
@@ -31,6 +31,6 @@
   </div>
 
   <div class="absolute -top-2 -right-2">
-    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-container text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
+    <%= icon "x", class: "p-0.5 hidden group-hover:inline-block rounded-lg bg-container shadow-xs text-subdued hover:text-primary cursor-pointer", data: { action: "click->element-removal#remove" } %>
   </div>
 <% end %>
diff --git a/design/tokens/sure.tokens.json b/design/tokens/sure.tokens.json
index 578cd6703..a0a9b001a 100644
--- a/design/tokens/sure.tokens.json
+++ b/design/tokens/sure.tokens.json
@@ -25,6 +25,7 @@
     "shadow":      { "$value": "{color.black|6%}",   "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } },
 
     "link":                  { "$value": "{color.blue.600}",         "$type": "color", "$extensions": { "sure.dark": "{color.blue.500}" } },
+    "focus-ring":            { "$value": "{color.alpha-black.700}",  "$type": "color", "$extensions": { "sure.dark": "{color.alpha-white.700}" } },
     "tertiary":              { "$value": "{color.alpha-black.100}",  "$type": "color", "$extensions": { "sure.dark": "{color.alpha-white.200}" } },
     "surface":               { "$value": "{color.gray.50}",          "$type": "color", "$extensions": { "sure.dark": "{color.black}" } },
     "surface-hover":         { "$value": "{color.gray.100}",         "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },