diff --git a/apps/design-system/content/docs/accessibility.mdx b/apps/design-system/content/docs/accessibility.mdx
index a549d1eb7b6..0d71788abac 100644
--- a/apps/design-system/content/docs/accessibility.mdx
+++ b/apps/design-system/content/docs/accessibility.mdx
@@ -25,14 +25,68 @@ All interactive page elements should be reachable by keyboard. Given the below i
 
 Chromium-based browsers and Firefox handle this automatically via the Tab key. Safari, by default, requires the Option key to also be held down. Enabling _Keyboard navigation_ on macOS Settings [removes this requirement](https://mayank.co/blog/safari-focus/#keyboard-navigation) but makes links non-tabbable as a result.
 
-Interactive page elements should also provide visual feedback upon selection via a `focus-visible` state. We use consistent focus styles such as `inset-focus` so users recognize this state instantly.
+Interactive page elements should also provide visual feedback upon selection via a `focus-visible` state. We use one shared focus ring so users recognize this state instantly.
 
-[Button](components/button) has all of the above built-in. The same explicit `tabIndex` default is also baked into Checkbox, Switch, Select Trigger, Toggle, Accordion Trigger, Collapsible Trigger, Dropdown Menu Trigger, Popover Trigger, Dialog Trigger, Sheet Trigger, Alert Dialog Trigger, and the Sidebar Menu and action buttons. Bespoke interactive elements however, such as the below interactive [Table Row](components/table#examples), require these props to be added manually:
+### Focus ring recipe
+
+Prefer the shared utilities over inventing local styles:
+
+| Utility       | Use when                                                                   |
+| ------------- | -------------------------------------------------------------------------- |
+| `focus-ring`  | Buttons, inputs, and most controls (offset **ring**)                       |
+| `focus-inset` | Dense or flush surfaces such as interactive table rows (inset **outline**) |
+
+```tsx
+className = 'focus-ring'
+// or
+className = 'relative cursor-pointer focus-inset'
+```
+
+These expand to:
+
+**`focus-ring`**
+
+```txt
+outline-hidden
+focus-visible:ring-2
+focus-visible:ring-ring
+focus-visible:ring-offset-2
+focus-visible:ring-offset-background
+```
+
+**`focus-inset`**
+
+Uses `outline` (not `ring`) so it paints reliably on interactive `<tr>`s. Tailwind `ring` is `box-shadow`, which browsers often skip on `display: table-row` (notably Safari). Do not put `focus-ring` or raw `ring-*` on a `<tr>`, and do not add `outline-hidden` alongside `focus-inset`. `outline-hidden` sets `outline-style: none` and will hide the indicator.
+
+```txt
+&:focus-visible {
+  outline-style: solid
+  outline-width: 2px
+  outline-offset: -2px
+  outline-color: var(--ring)
+  border-radius: var(--radius-md)
+}
+```
+
+`outline-hidden` is always on (not `focus-visible:`-prefixed) so mouse click does not show the browser’s default outline; the focus indicator replaces it for keyboard focus only.
+
+Rules:
+
+- Prefer `:focus-visible` over `:focus` so click/tap does not show a focus indicator
+- Never use `outline-none` / `outline-hidden` without a ring or outline replacement
+- Always use the shared color (`ring-ring` / `outline-ring`). Variants (primary, danger, warning) do not change focus colour
+- Do not animate the focus indicator; avoid `transition-all` / `transition` on controls that show one (prefer `transition-colors`)
+- Prefer `focus-ring` / `focus-inset` over copy-pasting the class stack
+- On interactive `<tr>`s, use `focus-inset` only. `focus-ring` will look fine in some browsers and invisible in others
+
+When the focused element is not the thing that should show the ring (e.g. a wrapping `Link` with `group`, or an `InputGroup` parent using `:has()`), keep the explicit `group-focus-visible:ring-*` / `has-[…]:focus-visible:ring-*` stack. The utilities bake in `:focus-visible` on the same element and do not compose as `group-focus-visible:focus-ring`.
+
+[Button](components/button) has focus, `tabIndex`, and the shared ring built-in. The same explicit `tabIndex` default is also baked into Checkbox, Switch, Select Trigger, Toggle, Accordion Trigger, Collapsible Trigger, Dropdown Menu Trigger, Popover Trigger, Dialog Trigger, Sheet Trigger, Alert Dialog Trigger, and the Sidebar Menu and action buttons. Bespoke interactive elements however, such as the below interactive [Table Row](components/table#examples), require these props to be added manually:
 
 ```tsx showLineNumbers {4-14}
 <TableRow
   key={id}
-  className="relative cursor-pointer h-16 inset-focus"
+  className="relative cursor-pointer h-16 focus-inset"
   onClick={(event) => {
     if (event.currentTarget !== event.target) return
     handleBucketNavigation(bucket.id, event)
diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
index 43afbfad43f..ffa96da53df 100644
--- a/apps/design-system/content/docs/components/button.mdx
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -144,5 +144,6 @@ Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions,
 - Enabled buttons default to `tabIndex={0}` (keyboard accessible)
 - Disabled buttons default to `tabIndex={-1}` (removed from tab order)
 - You can still override with an explicit `tabIndex` prop when needed
+- Keyboard focus uses the shared `focus-ring` utility; variants do not change ring colour
 
 You therefore don't need to manually set `tabIndex`, as Button handles it automatically based on its `disabled` state.
diff --git a/apps/design-system/content/docs/components/table.mdx b/apps/design-system/content/docs/components/table.mdx
index f25a80fe12f..d0ab5ccb536 100644
--- a/apps/design-system/content/docs/components/table.mdx
+++ b/apps/design-system/content/docs/components/table.mdx
@@ -221,7 +221,7 @@ Avoid adding other actions when using row-level navigation, as multiple interact
 When implementing row-level navigation, pay close attention to [Accessibility](/accessibility#focus-management) requirements. The row must be keyboard accessible with proper focus management. Also consider these affordances:
 
 - Handle `Enter` and `Space` key presses for activation
-- Provide visual focus indicators using classes like `inset-focus`
+- Provide visual focus indicators using classes like `focus-inset`
 - Support modifier keys (`Ctrl`/`Cmd`, middle-click) for opening links in new tabs
   - Consider using the shared `createNavigationHandler` function to handle modifier keys
 - Avoid bubbling up action events from _within_ the row
diff --git a/apps/design-system/registry/default/example/table-row-link-actions.tsx b/apps/design-system/registry/default/example/table-row-link-actions.tsx
index 7e744df1b89..5e366aec446 100644
--- a/apps/design-system/registry/default/example/table-row-link-actions.tsx
+++ b/apps/design-system/registry/default/example/table-row-link-actions.tsx
@@ -70,7 +70,7 @@ export default function TableRowLinkActions() {
           {policies.map((policy) => (
             <TableRow
               key={policy.id}
-              className="relative cursor-pointer inset-focus"
+              className="relative cursor-pointer focus-inset"
               onClick={(event) => {
                 if (event.currentTarget !== event.target) return
                 handlePolicyNavigation(policy.id, event)
diff --git a/apps/design-system/registry/default/example/table-row-link.tsx b/apps/design-system/registry/default/example/table-row-link.tsx
index be4716eff24..25850a88203 100644
--- a/apps/design-system/registry/default/example/table-row-link.tsx
+++ b/apps/design-system/registry/default/example/table-row-link.tsx
@@ -54,7 +54,7 @@ export default function TableRowLink() {
           {buckets.map((bucket) => (
             <TableRow
               key={bucket.id}
-              className="relative cursor-pointer inset-focus"
+              className="relative cursor-pointer focus-inset"
               onClick={(event) => {
                 if (event.currentTarget !== event.target) return
                 handleBucketNavigation(bucket.id, event)
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 470e5620f97..db84ba3159e 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -62,7 +62,7 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
       onAuxClick={handleNavigation}
       onKeyDown={handleNavigation}
       tabIndex={0}
-      className="cursor-pointer inset-focus"
+      className="cursor-pointer focus-inset"
     >
       <TableCell>
         <p className="text-sm text-foreground whitespace-nowrap py-2">{item.name}</p>
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
index a8e20c56d36..967a4a252fb 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -75,7 +75,7 @@ export const ProjectTableRow = ({
   return (
     <>
       <TableRow
-        className="cursor-pointer hover:bg-surface-200 inset-focus"
+        className="cursor-pointer hover:bg-surface-200 focus-inset"
         onClick={handleNavigation}
         onAuxClick={handleNavigation}
         onKeyDown={handleNavigation}
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
index 358ada0b955..b7d67fd8641 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
@@ -321,7 +321,7 @@ export const PlatformWebhooksEndpointDetails = ({
                 paginatedDeliveries.map((row) => (
                   <TableRow
                     key={row.id}
-                    className="cursor-pointer inset-focus"
+                    className="cursor-pointer focus-inset"
                     onClick={() => onOpenDelivery(row.original.id)}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter' || event.key === ' ') {
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
index 766c1997268..732202461f9 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
@@ -170,7 +170,7 @@ export const PlatformWebhooksEndpointList = ({
                 return (
                   <TableRow
                     key={endpoint.id}
-                    className="relative cursor-pointer inset-focus"
+                    className="relative cursor-pointer focus-inset"
                     onClick={createNavigationHandler(
                       `${webhooksHref}/${encodeURIComponent(endpoint.id)}`,
                       router
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
index 1daf07960e7..ec11659d7b0 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRulesTable.tsx
@@ -127,7 +127,7 @@ export function JitDbAccessRulesTable({
                 return (
                   <TableRow
                     key={user.id}
-                    className={rowIsInteractive ? 'relative inset-focus cursor-pointer' : undefined}
+                    className={rowIsInteractive ? 'relative focus-inset cursor-pointer' : undefined}
                     onClick={
                       rowIsInteractive
                         ? (event) => {
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
index ef3505c7b2e..92c594863c3 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
@@ -154,7 +154,7 @@ export const AnalyticsBuckets = () => {
                               return (
                                 <TableRow
                                   key={bucket.name}
-                                  className="relative cursor-pointer h-16 inset-focus"
+                                  className="relative cursor-pointer h-16 focus-inset"
                                   onClick={handleBucketNavigation}
                                   onAuxClick={handleBucketNavigation}
                                   onKeyDown={handleBucketNavigation}
diff --git a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketTableRow.tsx b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketTableRow.tsx
index 41e6989fe89..06115535f5d 100644
--- a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketTableRow.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketTableRow.tsx
@@ -80,7 +80,7 @@ export const BucketTableRow = ({
           key={bucket.id}
           data-bucket-id={bucket.id}
           className={cn(
-            'relative cursor-pointer h-16 group inset-focus',
+            'relative cursor-pointer h-16 group focus-inset',
             isDisabled && 'opacity-50 [&>td]:hover:bg-transparent cursor-not-allowed'
           )}
           onClick={handleRowActivate}
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx
index 8fc7e89519e..5ce3d537792 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx
@@ -107,7 +107,7 @@ export const BucketTableRow = ({
     <BucketTableRow
       key={bucket.id}
       data-bucket-id={bucket.id}
-      className="relative cursor-pointer h-16 group inset-focus"
+      className="relative cursor-pointer h-16 group focus-inset"
       onClick={handleBucketNavigation}
       onAuxClick={handleBucketNavigation}
       onKeyDown={handleBucketNavigation}
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx
index 4003cc2db9c..ffb23a83cd3 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx
@@ -130,7 +130,7 @@ export const VectorsBuckets = () => {
                               return (
                                 <TableRow
                                   key={id}
-                                  className="relative cursor-pointer h-16 inset-focus"
+                                  className="relative cursor-pointer h-16 focus-inset"
                                   onClick={handleBucketNavigation}
                                   onAuxClick={handleBucketNavigation}
                                   onKeyDown={handleBucketNavigation}
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
index 2b897d78724..7a186455ee1 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
@@ -195,7 +195,7 @@ export const ProjectNeedsSecuringView = ({
                       return (
                         <TableRow
                           key={getTableKey(table)}
-                          className="relative cursor-pointer inset-focus"
+                          className="relative cursor-pointer focus-inset"
                           onClick={(event) => {
                             trackViewPolicies()
                             handleNavigation(event)
diff --git a/apps/studio/components/layouts/Tabs/SortableTab.tsx b/apps/studio/components/layouts/Tabs/SortableTab.tsx
index 23240722b91..c66a3a003a1 100644
--- a/apps/studio/components/layouts/Tabs/SortableTab.tsx
+++ b/apps/studio/components/layouts/Tabs/SortableTab.tsx
@@ -158,7 +158,7 @@ export const SortableTab = ({
             'absolute top-1/2 right-2.5 z-10 -translate-y-1/2',
             'flex size-5 items-center justify-center rounded-xs',
             'opacity-0 group-hover/tab:opacity-100 group-focus-within/tab:opacity-100 focus-visible:opacity-100',
-            'hover:bg-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'hover:bg-200 focus-ring',
             'cursor-pointer'
           )}
         >
diff --git a/apps/studio/components/layouts/Tabs/Tabs.tsx b/apps/studio/components/layouts/Tabs/Tabs.tsx
index 72b06e913ac..9ee549892b3 100644
--- a/apps/studio/components/layouts/Tabs/Tabs.tsx
+++ b/apps/studio/components/layouts/Tabs/Tabs.tsx
@@ -259,7 +259,7 @@ export const EditorTabs = () => {
                   className={cn(
                     'absolute top-1/2 right-3 z-10 flex -translate-y-1/2 items-center justify-center rounded-xs',
                     'opacity-0 group-hover/new-tab:opacity-100 group-focus-within/new-tab:opacity-100 focus-visible:opacity-100',
-                    'hover:bg-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                    'hover:bg-200 focus-ring',
                     'cursor-pointer'
                   )}
                 >
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
index 01d5f1d1967..2ce56bf564b 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
@@ -153,7 +153,7 @@ export function DataTableFilterCheckbox<TData>({
                       className={cn(
                         'text-xs text-muted-foreground hover:text-foreground',
                         'absolute inset-y-0 right-0 hidden bg-surface-100 group-hover:flex group-focus-within:flex items-center cursor-pointer',
-                        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                        'focus-ring'
                       )}
                     >
                       <span className="pl-1 pr-2">Only</span>
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
index a8ba1cea405..6b44f955cdf 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
@@ -123,7 +123,7 @@ export function DataTableFilterCheckboxAsync<TData>({
                     className={cn(
                       'text-xs text-muted-foreground hover:text-foreground',
                       'absolute inset-y-0 right-0 hidden bg-surface-100 group-hover:flex group-focus-within:flex items-center cursor-pointer',
-                      'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+                      'focus-ring'
                     )}
                   >
                     <span className="px-2">Only</span>
diff --git a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
index d832a349511..207f4dc9687 100644
--- a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
@@ -187,12 +187,7 @@ export function DataTableSheetRowAction<TData, TFields extends DataTableFilterFi
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger
           asChild
-          className={cn(
-            'rounded-md ring-offset-background',
-            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-            'relative py-0',
-            className
-          )}
+          className={cn('rounded-md', 'focus-ring', 'relative py-0', className)}
           onKeyDown={(e) => {
             if (e.key === 'ArrowDown') {
               // REMINDER: default behavior is to open the dropdown menu
diff --git a/apps/studio/components/ui/DataTable/primitives/Slider.tsx b/apps/studio/components/ui/DataTable/primitives/Slider.tsx
index a5ab8302b15..c3b0cec7aae 100644
--- a/apps/studio/components/ui/DataTable/primitives/Slider.tsx
+++ b/apps/studio/components/ui/DataTable/primitives/Slider.tsx
@@ -22,7 +22,7 @@ export const Slider = forwardRef<
       </SliderPrimitive.Track>
       {initialValue.map((_, index) => (
         <Fragment key={index}>
-          <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+          <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50" />
         </Fragment>
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index a1c2ecb786a..26ee2b57cbf 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -85,7 +85,7 @@ export const ProductMenuItem = ({
     }
 
     const link = (
-      <Link href={url} className="block" target={target} onClick={onClick}>
+      <Link href={url} className="group block" target={target} onClick={onClick}>
         {menuItem}
       </Link>
     )
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index b4559f72dbd..f7b7474a307 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -1,5 +1,4 @@
 import '@/styles/code.css'
-import '@/styles/focus.css'
 import '@/styles/globals.css'
 import '@/styles/graphiql-base.css'
 import '@/styles/grid.css'
diff --git a/apps/studio/routes/__root.tsx b/apps/studio/routes/__root.tsx
index a8b53eb521b..1e5542d5c7f 100644
--- a/apps/studio/routes/__root.tsx
+++ b/apps/studio/routes/__root.tsx
@@ -2,7 +2,6 @@
 
 import 'react-data-grid/lib/styles.css'
 import '@/styles/code.css'
-import '@/styles/focus.css'
 // Vite-only: defines @font-face for the custom fonts. The Next pipeline
 // (pages/_app.tsx) loads these via next/font instead, so this import has no
 // counterpart there — but dropping it under Vite makes the browser fall back
diff --git a/apps/studio/styles/focus.css b/apps/studio/styles/focus.css
deleted file mode 100644
index 605031f36d1..00000000000
--- a/apps/studio/styles/focus.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@reference "./globals.css";
-
-/* Focus styles for keyboard navigation on interactive table rows */
-.inset-focus {
-  @apply ease-out duration-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-600 focus-visible:rounded-md transition-all;
-}
diff --git a/packages/config/css/utilities.css b/packages/config/css/utilities.css
index 7ea8e9d28a1..473245def85 100644
--- a/packages/config/css/utilities.css
+++ b/packages/config/css/utilities.css
@@ -180,3 +180,29 @@
     -webkit-text-fill-color: currentColor;
   }
 }
+
+/*
+ * Canonical keyboard focus rings. Prefer these over inventing local ring/outline
+ * stacks.
+ *
+ * - focus-ring: default offset ring (buttons, inputs, most controls).
+ *   `outline-hidden` stays always-on so mouse click does not show the browser
+ *   default; the ring is `:focus-visible` only.
+ * - focus-inset: dense/flush surfaces such as interactive <tr>s. Must use
+ *   outline (not ring/box-shadow) — box-shadow on table-row is unreliable,
+ *   especially in Safari. Do NOT pair with outline-hidden: that sets
+ *   outline-style: none and suppresses the focus outline.
+ */
+@utility focus-ring {
+  @apply outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+}
+
+@utility focus-inset {
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: -2px;
+    outline-color: var(--ring);
+    border-radius: var(--radius-md, 0.375rem);
+  }
+}
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index 415350946f8..30fabea2155 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -160,7 +160,7 @@ function CommandMenuTrigger({ children }: PropsWithChildren) {
       'rounded-md border border-input bg-background',
       'text-sm',
       'hover:bg-accent hover:text-accent-foreground',
-      'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'focus-ring',
       'disabled:pointer-events-none disabled:opacity-50',
       'transition-colors',
       childFromProps.props.className
@@ -182,6 +182,7 @@ function CommandMenuTriggerInput({
     <CommandMenuTrigger>
       <button
         type="button"
+        tabIndex={0}
         className={cn(
           'group',
           'grow md:min-w-44 xl:min-w-56 h-[30px] rounded-md',
@@ -189,8 +190,8 @@ function CommandMenuTriggerInput({
           'flex items-center justify-between',
           'bg-surface-100/75 text-foreground-lighter border',
           'hover:bg-surface-100/100  hover:border-stronger',
-          'focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background',
-          'transition',
+          'focus-ring',
+          'transition-colors',
           className
         )}
       >
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index 02f63de7a81..292d8f53a92 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -585,7 +585,7 @@ const MultiSelectorItem = React.forwardRef<
           'peer h-4 w-4 shrink-0 rounded-sm border border-control bg-control/25 ring-offset-background',
           'transition-colors duration-150 ease-in-out',
           'hover:border-strong',
-          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'focus-ring',
           'disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=checked]:text-background',
           isSelected ? 'bg-foreground text-background' : '[&_svg]:invisible'
         )}
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 28e4d5a9471..04e5499c49f 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -20,12 +20,8 @@ const buttonVariants = cva(
   ease-out
   duration-200
   rounded-md
-  outline-hidden
-  transition-all
-  outline-0
-  focus-visible:outline-solid
-  focus-visible:outline-4
-  focus-visible:outline-offset-1
+  transition-colors
+  focus-ring
   border
   `,
   {
@@ -37,35 +33,26 @@ const buttonVariants = cva(
           text-foreground
           border-brand-500/75 dark:border-brand/30
           hover:border-brand-600 dark:hover:border-brand
-          focus-visible:outline-brand-600
           data-[state=open]:bg-brand-400/80 dark:data-[state=open]:bg-brand-500/80
-          data-[state=open]:outline-brand-600
           `,
         default: `
           text-foreground
           bg-alternative dark:bg-muted  hover:bg-selection
           border-strong hover:border-stronger
-          focus-visible:outline-border-strong
           data-[state=open]:bg-selection
-          data-[state=open]:outline-border-strong
           data-[state=open]:border-button-hover
           `,
         secondary: `
           bg-foreground
           text-background hover:text-background/80
-          focus-visible:text-border-control
           border-foreground-light hover:border-foreground-lighter
-          focus-visible:outline-border-strong
           data-[state=open]:border-foreground-lighter
-          data-[state=open]:outline-border-strong
         `,
         outline: `
           text-foreground
           bg-transparent
           border-strong hover:border-foreground-muted
-          focus-visible:outline-border-strong
           data-[state=open]:border-stronger
-          data-[state=open]:outline-border-strong
         `,
         dashed: `
           text-foreground
@@ -73,9 +60,7 @@ const buttonVariants = cva(
           border-dashed
           border-strong hover:border-stronger
           bg-transparent
-          focus-visible:outline-border-strong
           data-[state=open]:border-stronger
-          data-[state=open]:outline-border-strong
         `,
         link: `
           text-brand-600
@@ -83,17 +68,13 @@ const buttonVariants = cva(
           border-transparent/0
           hover:bg-brand-400
           shadow-none
-          focus-visible:outline-border-strong
           data-[state=open]:bg-brand-400
-          data-[state=open]:outline-border-strong
         `,
         text: `
           text-foreground
           hover:bg-accent
           shadow-none
-          focus-visible:outline-border-strong
           data-[state=open]:bg-accent
-          data-[state=open]:outline-border-strong
           border-transparent
         `,
         danger: `
@@ -101,20 +82,16 @@ const buttonVariants = cva(
           bg-destructive-300 dark:bg-destructive-400 hover:bg-destructive-400 dark:hover:bg-destructive/50
           border-border-destructive hover:border-destructive
           hover:text-hi-contrast
-          focus-visible:outline-destructive
           data-[state=open]:border-destructive
           data-[state=open]:bg-destructive-400 dark:data-[state=open]:bg-destructive/50
-          data-[state=open]:outline-destructive
         `,
         warning: `
           text-foreground
           bg-warning-300 dark:bg-warning-400 hover:bg-warning-400 dark:hover:bg-warning/50
           border-border-warning hover:border-warning
           hover:text-hi-contrast
-          focus-visible:outline-warning
           data-[state=open]:border-warning
           data-[state=open]:bg-warning-400 dark:data-[state=open]:bg-warning/50
-          data-[state=open]:outline-warning
         `,
       },
       block: {
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 9a6066f3941..9c4b8ff4936 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -45,7 +45,13 @@ interface ItemProps {
 
 export const menuItemVariants = cva(
   cn(
-    'cursor-pointer flex space-x-3 items-center outline-hidden focus-visible:ring-1 ring-foreground-muted focus-visible:z-10 group'
+    // focus-ring: when the item itself is focused.
+    // group-focus-visible: when a wrapping Link/button (e.g. ProductMenu) is the
+    // focus target — cannot use focus-ring here (utility targets :focus-visible
+    // on the same element).
+    'cursor-pointer flex space-x-3 items-center focus-visible:z-10 group',
+    'focus-ring',
+    'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background'
   ),
   {
     variants: {
diff --git a/packages/ui/src/components/NavMenu/index.tsx b/packages/ui/src/components/NavMenu/index.tsx
index d67e0b361ff..9a2b534e769 100644
--- a/packages/ui/src/components/NavMenu/index.tsx
+++ b/packages/ui/src/components/NavMenu/index.tsx
@@ -33,7 +33,7 @@ export const NavMenuItem = forwardRef<HTMLLIElement, NavMenuItemProps>(
       aria-selected={active ? 'true' : 'false'}
       data-state={active ? 'active' : 'inactive'}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:py-1.5',
+        'inline-flex items-center justify-center whitespace-nowrap text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:py-1.5',
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/radio-group-card.tsx b/packages/ui/src/components/radio-group-card.tsx
index 5c66da6c7fc..fc58fa7757c 100644
--- a/packages/ui/src/components/radio-group-card.tsx
+++ b/packages/ui/src/components/radio-group-card.tsx
@@ -58,10 +58,10 @@ const RadioGroupCardItem = React.forwardRef<
                 group-hover:border-foreground-muted
                 ring-offset-background
                 group-focus:outline-hidden
-                group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2
+                group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background
                 group-disabled:cursor-not-allowed group-disabled:opacity-50
                 flex items-center justify-center
-                transition
+                transition-colors
           "
           >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
diff --git a/packages/ui/src/components/shadcn/ui/button.tsx b/packages/ui/src/components/shadcn/ui/button.tsx
index 222cc08dcb6..ce40d2f00db 100644
--- a/packages/ui/src/components/shadcn/ui/button.tsx
+++ b/packages/ui/src/components/shadcn/ui/button.tsx
@@ -8,7 +8,7 @@ import { cn } from '../../../lib/utils/cn'
 import { getExplicitTabIndex } from '../../../lib/utils/getExplicitTabIndex'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/components/shadcn/ui/checkbox.tsx b/packages/ui/src/components/shadcn/ui/checkbox.tsx
index 33bfcc93242..7b6ff62b280 100644
--- a/packages/ui/src/components/shadcn/ui/checkbox.tsx
+++ b/packages/ui/src/components/shadcn/ui/checkbox.tsx
@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
         'peer flex items-center justify-center h-4 w-4 shrink-0 rounded-sm border border-control bg-control/25 ring-offset-background',
         'transition-colors duration-150 ease-in-out',
         'hover:border-strong',
-        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted',
+        'focus-ring',
         'disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=checked]:text-background',
         className
       )}
diff --git a/packages/ui/src/components/shadcn/ui/input-group.tsx b/packages/ui/src/components/shadcn/ui/input-group.tsx
index df0b9a019b7..0a5752b25b5 100644
--- a/packages/ui/src/components/shadcn/ui/input-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/input-group.tsx
@@ -55,8 +55,9 @@ function InputGroup({
         'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
         'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
-        // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:outline-hidden has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-background-control has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-foreground-muted',
+        // Focus state. Parent listens via :has() — cannot use the focus-ring utility
+        // (that utility targets :focus-visible on the element itself).
+        'has-[[data-slot=input-group-control]:focus-visible]:outline-hidden has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background',
 
         // Error state.
         'has-[[data-slot][aria-invalid=true]]:bg-destructive-200 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive-400 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
diff --git a/packages/ui/src/components/shadcn/ui/input.tsx b/packages/ui/src/components/shadcn/ui/input.tsx
index f3a80dc8074..b2933fb903a 100644
--- a/packages/ui/src/components/shadcn/ui/input.tsx
+++ b/packages/ui/src/components/shadcn/ui/input.tsx
@@ -12,7 +12,7 @@ export interface InputProps
 export const InputVariants = cva(
   cn(
     'flex h-10 w-full rounded-md border border-control read-only:border-button bg-foreground/[.026] px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted read-only:text-foreground-light',
-    'focus:ring-background-control focus:border-control focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:text-foreground-muted',
+    'focus:border-control focus-ring disabled:cursor-not-allowed disabled:text-foreground-muted',
     'aria-[] aria-[invalid=true]:bg-destructive-200 aria-[invalid=true]:border-destructive-400 aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus-visible:border-destructive'
   ),
   {
diff --git a/packages/ui/src/components/shadcn/ui/radio-group.tsx b/packages/ui/src/components/shadcn/ui/radio-group.tsx
index 1358cfe9244..2aa4fac0e00 100644
--- a/packages/ui/src/components/shadcn/ui/radio-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/radio-group.tsx
@@ -22,7 +22,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'relative aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'relative aspect-square h-4 w-4 rounded-full border border-primary text-primary focus-ring disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/shadcn/ui/select.tsx b/packages/ui/src/components/shadcn/ui/select.tsx
index bc86b96559a..8b647aa0c2d 100644
--- a/packages/ui/src/components/shadcn/ui/select.tsx
+++ b/packages/ui/src/components/shadcn/ui/select.tsx
@@ -47,7 +47,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex w-full items-center justify-between rounded-md border border-strong hover:border-stronger bg-alternative dark:bg-muted hover:bg-selection text-xs ring-offset-background-control data-[placeholder]:text-foreground-lighter focus:outline-hidden ring-border-control focus:ring-2 focus:ring-background-control focus:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',
+      'flex w-full items-center justify-between rounded-md border border-strong hover:border-stronger bg-alternative dark:bg-muted hover:bg-selection text-xs data-[placeholder]:text-foreground-lighter ring-border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
       'data-[state=open]:bg-selection data-[state=open]:border-stronger',
       'gap-2',
       '[&>span]:truncate text-left', // [kemal] This is to prevent double lines rendering when a string is particularly long.
diff --git a/packages/ui/src/components/shadcn/ui/slider.tsx b/packages/ui/src/components/shadcn/ui/slider.tsx
index b0e6e161070..9a3655cfde2 100644
--- a/packages/ui/src/components/shadcn/ui/slider.tsx
+++ b/packages/ui/src/components/shadcn/ui/slider.tsx
@@ -41,7 +41,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="block h-5 w-5 rounded-full border-2 border-background-surface-100 bg-foreground ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+          className="block h-5 w-5 rounded-full border-2 border-background-surface-100 bg-foreground transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/packages/ui/src/components/shadcn/ui/switch.tsx b/packages/ui/src/components/shadcn/ui/switch.tsx
index c6a93f809f6..c453fe9bf45 100644
--- a/packages/ui/src/components/shadcn/ui/switch.tsx
+++ b/packages/ui/src/components/shadcn/ui/switch.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { cn } from '../../../lib/utils/cn'
 
 const switchRootVariants = cva(
-  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border',
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border',
   {
     variants: {
       size: {
diff --git a/packages/ui/src/components/shadcn/ui/tabs.tsx b/packages/ui/src/components/shadcn/ui/tabs.tsx
index d728386471a..5b7667990e9 100644
--- a/packages/ui/src/components/shadcn/ui/tabs.tsx
+++ b/packages/ui/src/components/shadcn/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap py-1.5 text-sm  ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
+      'inline-flex items-center justify-center whitespace-nowrap py-1.5 text-sm transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent',
       'group',
       className
     )}
@@ -39,14 +39,7 @@ const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-4 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
+  <TabsPrimitive.Content ref={ref} className={cn('mt-4 focus-ring', className)} {...props} />
 ))
 TabsContent.displayName = TabsPrimitive.Content.displayName
 
diff --git a/packages/ui/src/components/shadcn/ui/text-area.tsx b/packages/ui/src/components/shadcn/ui/text-area.tsx
index 547f5dfe950..f54a9a50d91 100644
--- a/packages/ui/src/components/shadcn/ui/text-area.tsx
+++ b/packages/ui/src/components/shadcn/ui/text-area.tsx
@@ -12,7 +12,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       <textarea
         className={cn(
           'flex min-h-10 w-full rounded-md border border-control focus:border-control bg-control px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-muted',
-          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-background-control focus-visible:ring-offset-2 focus-visible:ring-offset-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
+          'focus-ring disabled:cursor-not-allowed disabled:opacity-50',
           ...customClasses,
           className
         )}
diff --git a/packages/ui/src/components/shadcn/ui/textarea.tsx b/packages/ui/src/components/shadcn/ui/textarea.tsx
index 53af0f39342..288e57abb7d 100644
--- a/packages/ui/src/components/shadcn/ui/textarea.tsx
+++ b/packages/ui/src/components/shadcn/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-control bg-foreground/[.026] px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-foreground-muted focus:ring-background-control focus:border-control focus-visible:border-control focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-foreground-muted focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex min-h-[80px] w-full rounded-md border border-control bg-foreground/[.026] px-3 py-2 text-base md:text-sm placeholder:text-foreground-muted focus:border-control focus-visible:border-control focus-ring disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/packages/ui/src/components/shadcn/ui/toggle.tsx b/packages/ui/src/components/shadcn/ui/toggle.tsx
index 7264f15c40b..dac9c6ab638 100644
--- a/packages/ui/src/components/shadcn/ui/toggle.tsx
+++ b/packages/ui/src/components/shadcn/ui/toggle.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { cn } from '../../../lib/utils/cn'
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-foreground-light data-[state=on]:bg-accent data-[state=on]:bg-surface-300 data-[state=on]:text-foreground aria-checked:bg-accent aria-checked:bg-surface-300 aria-checked:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto transition-all',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-foreground-light data-[state=on]:bg-accent data-[state=on]:bg-surface-300 data-[state=on]:text-foreground aria-checked:bg-accent aria-checked:bg-surface-300 aria-checked:text-foreground focus-ring disabled:pointer-events-none disabled:opacity-50 bg-surface-200 hover:bg-surface-300 px-3 py-1 h-auto',
   {
     variants: {
       variant: {
diff --git a/packages/ui/src/lib/commonCva.ts b/packages/ui/src/lib/commonCva.ts
index 25d4e33a610..59d7ac094e2 100644
--- a/packages/ui/src/lib/commonCva.ts
+++ b/packages/ui/src/lib/commonCva.ts
@@ -19,17 +19,6 @@ const defaults = {
     alternative: 'border-alternative',
   },
   placeholder: 'placeholder-border-stronger',
-  focus: `
-    outline-hidden
-    focus:ring-current focus:ring-2
-  `,
-  'focus-visible': `
-    outline-hidden
-    transition-all
-    outline-0
-    focus-visible:outline-4
-    focus-visible:outline-offset-1
-  `,
   size: {
     // buttons, inputs, input labels use these sizes
     text: {