diff --git a/apps/design-system/components/color-palette.tsx b/apps/design-system/components/color-palette.tsx
index 92f85bdbd8cc2..f568da8c511e0 100644
--- a/apps/design-system/components/color-palette.tsx
+++ b/apps/design-system/components/color-palette.tsx
@@ -64,7 +64,7 @@ const ColorPalette = () => {
                     key={step * 100}
                     type="button"
                     onClick={() => handleCopy(reference)}
-                    className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition hover:scale-[1.05] focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
+                    className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition-transform hover:scale-[1.05] focus-ring"
                     style={{ backgroundColor: reference }}
                     title={reference}
                   >
diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index 0ca56bf42ac97..1b3a146e357f8 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -319,7 +319,7 @@ export default function FormPatternsSidePanel() {
                             tabIndex={0}
                             type="button"
                             onClick={() => uploadButtonRef.current?.click()}
-                            className="flex items-center justify-center h-10 w-10 shrink-0 text-foreground-lighter hover:text-foreground-light overflow-hidden rounded-full bg-cover border hover:border-strong focus-visible:outline-brand-600"
+                            className="flex items-center justify-center h-10 w-10 shrink-0 text-foreground-lighter hover:text-foreground-light overflow-hidden rounded-full bg-cover border hover:border-strong focus-ring"
                             style={{
                               backgroundImage: logoUrl ? `url("${logoUrl}")` : 'none',
                             }}
diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
index b3f69894d6c27..619222551c2ab 100644
--- a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx
@@ -29,7 +29,7 @@ const listItem = {
 }
 
 const itemClassName =
-  'block py-2 pl-2 pr-3.5 text-sm text-foreground-light hover:bg-surface-200 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:rounded-sm'
+  'block py-2 pl-2 pr-3.5 text-sm text-foreground-light hover:bg-surface-200 focus-ring rounded-sm'
 
 const AccordionMenuItem = ({ section }: { section: DropdownMenuItem[] }) => {
   const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
@@ -145,7 +145,7 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => {
                   tabIndex={0}
                   onClick={() => setOpen(false)}
                   type="button"
-                  className="inline-flex items-center justify-center focus:ring-brand bg-surface-100 hover:bg-surface-200 focus:outline-hidden focus:ring-2 focus:ring-inset border border-default bg-surface-100/75 text-foreground-light rounded-sm min-w-[30px] w-[30px] h-[30px]"
+                  className="inline-flex items-center justify-center bg-surface-100 hover:bg-surface-200 border border-default bg-surface-100/75 text-foreground-light rounded-sm min-w-[30px] w-[30px] h-[30px] focus-ring"
                 >
                   <span className="sr-only">Close menu</span>
                   <X />
diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx
index 3b6c71ed599a0..bd3c81b821189 100644
--- a/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/GlobalNavigationMenu.tsx
@@ -59,7 +59,7 @@ export const useActiveMenuLabel = (menu: typeof GLOBAL_MENU_ITEMS) => {
 const GlobalNavigationMenu: FC = () => {
   const activeLabel = useActiveMenuLabel(GLOBAL_MENU_ITEMS)
   const triggerClassName =
-    'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:bg-transparent hover:text-foreground data-open:bg-transparent! data-open:text-foreground! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none! outline-hidden transition-all outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600'
+    'h-(--header-height) p-2 bg-transparent border-0 border-b-2 border-transparent font-normal rounded-none text-foreground-light hover:bg-transparent hover:text-foreground data-open:bg-transparent! data-open:text-foreground! focus-ring focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none!'
 
   return (
     <div className="flex relative gap-2 justify-start items-end w-full h-full">
@@ -172,7 +172,7 @@ export const MenuItem = React.forwardRef<
       ref={ref}
       className={cn(
         'group/menu-item flex items-center gap-2',
-        'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline outline-hidden! focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
+        'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground',
         className
       )}
       {...props}
diff --git a/apps/docs/features/ui/PromptPanel.tsx b/apps/docs/features/ui/PromptPanel.tsx
index 9182f290b42da..8155548b70396 100644
--- a/apps/docs/features/ui/PromptPanel.tsx
+++ b/apps/docs/features/ui/PromptPanel.tsx
@@ -133,7 +133,7 @@ function ExpandableContent({ children }: { children: ReactNode }) {
         tabIndex={0}
         type="button"
         onClick={() => setIsExpanded((expanded) => !expanded)}
-        className="mt-2 text-sm text-brand-link transition-colors hover:text-brand focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted"
+        className="mt-2 text-sm text-brand-link transition-colors hover:text-brand focus-ring"
         aria-expanded={isExpanded}
       >
         {isExpanded ? 'Show less' : 'Show more'}
@@ -192,7 +192,7 @@ function CopyButton({ label, value }: { label: string; value: string }) {
           setCopied(true)
         })
       }}
-      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted"
+      className="rounded-sm p-1.5 text-foreground-muted transition-colors hover:bg-surface-200 hover:text-foreground focus-ring"
       aria-label={copied ? `${label} copied` : `Copy ${label}`}
       title={copied ? 'Copied' : 'Copy to clipboard'}
     >
diff --git a/apps/docs/features/ui/Tabs.tsx b/apps/docs/features/ui/Tabs.tsx
index c227a87062011..2c01f57be29fe 100644
--- a/apps/docs/features/ui/Tabs.tsx
+++ b/apps/docs/features/ui/Tabs.tsx
@@ -55,7 +55,7 @@ export const tabsListVariants = cva(cn('flex'), {
 
 export const tabsTriggerListVariants = cva(
   cn(
-    'relative cursor-pointer flex items-center space-x-2 text-center transition focus:outline-hidden focus-visible:ring-3 focus-visible:ring-foreground-muted focus-visible:border-foreground-muted'
+    'relative cursor-pointer flex items-center space-x-2 text-center transition-colors focus-ring'
   ),
   {
     variants: {
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
index 1fa18fbba32f8..c46a10f81e478 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
@@ -260,10 +260,8 @@ export const CreateOrUpdateCustomProviderSheet = ({
           <div className="flex flex-row gap-3 items-center">
             <SheetClose
               className={cn(
-                'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-                'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-                'disabled:pointer-events-none data-[state=open]:bg-secondary',
-                'transition'
+                'text-muted hover:text hover:opacity-100 focus-ring',
+                'disabled:pointer-events-none data-[state=open]:bg-secondary'
               )}
             >
               <X className="h-3 w-3" />
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
index ff6e87750ca44..a44a80a8d7c30 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/CreateOrUpdateOAuthAppSheet.tsx
@@ -263,10 +263,8 @@ export const CreateOrUpdateOAuthAppSheet = ({
             <div className="flex flex-row gap-3 items-center">
               <SheetClose
                 className={cn(
-                  'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-                  'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-                  'disabled:pointer-events-none data-[state=open]:bg-secondary',
-                  'transition'
+                  'text-muted hover:text hover:opacity-100 focus-ring',
+                  'disabled:pointer-events-none data-[state=open]:bg-secondary'
                 )}
               >
                 <X className="h-3 w-3" />
diff --git a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
index 60b646d64c26f..debf11e9d9d30 100644
--- a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
@@ -30,9 +30,8 @@ export const PolicyEditorPanelHeader = ({
       <div className="flex flex-row gap-3 max-w-[75%] items-start">
         <SheetClose
           className={cn(
-            'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
-            'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
-            'transition disabled:pointer-events-none data-[state=open]:bg-secondary',
+            'text-muted hover:text hover:opacity-100 focus-ring',
+            'disabled:pointer-events-none data-[state=open]:bg-secondary',
             'mt-1.5'
           )}
         >
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx
index 9c69b77f5ada7..767322c381a62 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx
@@ -135,7 +135,7 @@ export const SlotLagMetricsList = ({
                         type="button"
                         tabIndex={0}
                         aria-label={`What is ${field.label}`}
-                        className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                        className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                       >
                         <Info size={12} />
                       </button>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
index 85bd503a804c2..3bbeada6407c6 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
@@ -66,7 +66,7 @@ export const SlotStatusLegend = () => {
           type="button"
           tabIndex={0}
           aria-label="What do the slot statuses mean?"
-          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
         >
           <Info size={12} />
         </button>
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceCard.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceCard.tsx
index 0b1d6b3eb37e4..a32b1731b247e 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceCard.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceCard.tsx
@@ -18,7 +18,7 @@ export const MarketplaceCard = ({ integration, isInstalled }: MarketplaceCardPro
   return (
     <Link
       href={`/project/${ref}/integrations/${integration.id}/overview`}
-      className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+      className="rounded-md focus-ring"
     >
       <Card className="flex min-h-[168px] h-full flex-col gap-2.5 hover:border-stronger p-4">
         <div className="flex items-start justify-between">
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHeroGrid.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHeroGrid.tsx
index 05d5dcaf01aa1..8a0fe9880feb5 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHeroGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHeroGrid.tsx
@@ -113,7 +113,7 @@ export const MarketplaceFeaturedHeroGrid = ({
         <div className="col-span-1 @xl:col-span-2">
           <Link
             href={`/project/${ref}/integrations/${primaryIntegration.id}/overview`}
-            className="block h-full rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+            className="block h-full rounded-md focus-ring"
           >
             <Card className="relative flex flex-row overflow-hidden h-full min-h-[168px] hover:border-stronger">
               <div className="relative z-10 flex flex-col gap-2.5 p-4 flex-1 min-w-0">
@@ -170,7 +170,7 @@ export const MarketplaceFeaturedHeroGrid = ({
             <div key={integration.id} className="col-span-1">
               <Link
                 href={`/project/${ref}/integrations/${integration.id}/overview`}
-                className="block h-full rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+                className="block h-full rounded-md focus-ring"
               >
                 <Card className="flex flex-col overflow-hidden h-full hover:border-stronger">
                   <div className="hidden @xl:block relative w-full h-28 bg-black/90 dark:bg-black/50 shrink-0">
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
index b66782689473d..0ea9161959f40 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
@@ -220,7 +220,7 @@ export const MarketplaceFilterBar = ({
           onClick={() => onViewModeChange('grid')}
           className={cn(
             'border-r px-2 py-1.5 rounded-l-md cursor-pointer',
-            'focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+            'focus-visible:z-10 focus-ring',
             viewMode === 'grid'
               ? 'bg-surface-200 text-foreground'
               : 'text-foreground-light hover:bg-surface-100'
@@ -235,7 +235,7 @@ export const MarketplaceFilterBar = ({
           onClick={() => onViewModeChange('list')}
           className={cn(
             'px-2 py-1.5 rounded-r-md cursor-pointer',
-            'focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+            'focus-visible:z-10 focus-ring',
             viewMode === 'list'
               ? 'bg-surface-200 text-foreground'
               : 'text-foreground-light hover:bg-surface-100'
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceListRow.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceListRow.tsx
index dc5055e059bbe..b19413b0511da 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceListRow.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceListRow.tsx
@@ -33,12 +33,9 @@ export const MarketplaceListRow = ({ integration, isInstalled }: MarketplaceList
       </TableCell>
 
       <TableCell>
-        <Link
-          href={href}
-          className="block w-full hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background rounded-md"
-        >
+        <Link href={href} className="block w-full rounded-md hover:underline focus-ring">
           <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
-            <div className="relative z-10 text-sm font-medium @lg:text-sm after:absolute after:-inset-y-2 after:left-0 after:right-[calc(100%+6px)] after:content-[''] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground">
+            <div className="relative z-10 text-sm font-medium @lg:text-sm after:absolute after:-inset-y-2 after:left-0 after:right-[calc(100%+6px)] after:content-['']">
               {integration.name}
             </div>
             <div className="relative z-10">
diff --git a/apps/studio/components/interfaces/ProjectHome/ConnectSection.tsx b/apps/studio/components/interfaces/ProjectHome/ConnectSection.tsx
index 587ba378057cc..1bf15867cc532 100644
--- a/apps/studio/components/interfaces/ProjectHome/ConnectSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ConnectSection.tsx
@@ -92,7 +92,7 @@ export const ConnectSection = () => {
                 onClick={() => handleActionClick(action)}
                 className={cn(
                   'group flex items-center gap-3 p-4 text-left transition-colors min-h-[72px] w-full',
-                  'hover:bg-surface-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand',
+                  'hover:bg-surface-100 focus-ring',
                   'xl:min-h-32 xl:flex-col xl:justify-center xl:p-6 xl:text-center',
                   ((action.requiresActiveProject ?? true)
                     ? !isActiveHealthy
diff --git a/apps/studio/components/interfaces/ProjectHome/SortableSection.tsx b/apps/studio/components/interfaces/ProjectHome/SortableSection.tsx
index 3074852d286bf..9502472e12f89 100644
--- a/apps/studio/components/interfaces/ProjectHome/SortableSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/SortableSection.tsx
@@ -27,8 +27,7 @@ export const SortableSection = ({ id, children }: SortableSectionProps) => {
         aria-label="Drag to reorder section"
         className={cn(
           'absolute -left-6 top-2 text-foreground-muted hover:text-foreground cursor-grab active:cursor-grabbing',
-          'rounded-sm outline-hidden',
-          'focus-visible:outline-solid focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-border-strong'
+          'rounded-sm focus-ring'
         )}
         {...attributes}
         {...listeners}
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx
index 7063136cca588..cf6966ee7c234 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx
@@ -71,7 +71,7 @@ export const QueryPerformanceMetrics = () => {
                           type="button"
                           tabIndex={0}
                           aria-label="How are slow queries calculated?"
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                           onClick={(e) => {
                             e.stopPropagation()
                           }}
@@ -92,7 +92,7 @@ export const QueryPerformanceMetrics = () => {
                           type="button"
                           tabIndex={0}
                           aria-label={`What is ${card.title}?`}
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
+                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-ring"
                           onClick={(e) => {
                             e.stopPropagation()
                           }}
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
index 98cff2d655006..42835b9e1cc38 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
@@ -72,7 +72,7 @@ export const BucketsPolicies = ({
             aria-label="Toggle bucket list"
             className={cn(
               'rounded-md p-1 text-foreground-light hover:text-foreground',
-              'outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+              'focus-ring'
             )}
           >
             <ChevronUp size={14} className={cn(!expanded && 'rotate-180', 'transition')} />
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
index 8f837ab6c383d..137403b158034 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
@@ -32,7 +32,7 @@ export const StoragePolicyEditorModalTitle = ({
             tabIndex={0}
             onClick={onSelectBackFromTemplates}
             className={cn(
-              'cursor-pointer rounded-xs opacity-20 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+              'cursor-pointer rounded-xs opacity-20 hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
               'hit-area-6'
             )}
           >
@@ -51,7 +51,7 @@ export const StoragePolicyEditorModalTitle = ({
       <DocsButton href={`${DOCS_URL}/learn/auth-deep-dive/auth-policies`} />
       <DialogPrimitive.Close
         className={cn(
-          'absolute p-0.5 right-3.5 top-4.5 rounded-xs opacity-20 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+          'absolute p-0.5 right-3.5 top-4.5 rounded-xs opacity-20 hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
           'hit-area-6'
         )}
       >
diff --git a/apps/studio/components/interfaces/Support/AttachmentUpload.tsx b/apps/studio/components/interfaces/Support/AttachmentUpload.tsx
index 18613095630fa..bcb7791fddb9e 100644
--- a/apps/studio/components/interfaces/Support/AttachmentUpload.tsx
+++ b/apps/studio/components/interfaces/Support/AttachmentUpload.tsx
@@ -24,7 +24,7 @@ const MAX_ATTACHMENTS = 5
 
 const removeAttachmentButtonClassName = cn(
   'absolute -top-1 -right-1 size-4 shrink-0 rounded-full bg-red-900 p-0 cursor-pointer',
-  'outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+  'focus-ring'
 )
 
 const RemoveAttachmentIcon = () => (
@@ -257,9 +257,9 @@ export function AttachmentUploadDisplay({
             tabIndex={0}
             aria-label="Add attachment"
             className={cn(
-              'border border-stronger opacity-50 transition hover:opacity-100',
+              'border border-stronger opacity-50 hover:opacity-100',
               'group flex h-14 w-14 cursor-pointer items-center justify-center rounded-sm',
-              'outline-hidden focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-1 focus-visible:ring-offset-background'
+              'focus-visible:opacity-100 focus-ring'
             )}
             onClick={addFile}
           >
diff --git a/apps/studio/components/interfaces/Support/SupportAssistantSuccessCard.tsx b/apps/studio/components/interfaces/Support/SupportAssistantSuccessCard.tsx
index 2c88dd111d15c..064b55e557f57 100644
--- a/apps/studio/components/interfaces/Support/SupportAssistantSuccessCard.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAssistantSuccessCard.tsx
@@ -46,7 +46,7 @@ function SupportAssistantSuccessCardLoadingShell({ className }: { className?: st
       tabIndex={0}
       aria-label="Open assistant response"
       className={cn(
-        'group cursor-pointer bg-muted/50 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand',
+        'group cursor-pointer bg-muted/50 transition-colors hover:bg-muted/50 focus-ring',
         className
       )}
     >
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
index 67268cdfeee1d..2b1ae0abcfd1a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx
@@ -179,7 +179,7 @@ export const SpreadsheetImportPreview = ({
                             <button
                               type="button"
                               tabIndex={0}
-                              className="flex items-center space-x-2 cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary"
+                              className="flex cursor-pointer items-center space-x-2 focus-ring"
                               onClick={() => onSelectExpandError(key)}
                               aria-expanded={isExpanded}
                               aria-controls={`${key}-panel`}
diff --git a/apps/studio/components/ui/AIAssistantPanel/SupportAssistantSuccessCardContent.tsx b/apps/studio/components/ui/AIAssistantPanel/SupportAssistantSuccessCardContent.tsx
index 462b958782a22..8438a6d3f34bd 100644
--- a/apps/studio/components/ui/AIAssistantPanel/SupportAssistantSuccessCardContent.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/SupportAssistantSuccessCardContent.tsx
@@ -135,7 +135,7 @@ export function SupportAssistantSuccessCardContent({
         }
       }}
       className={cn(
-        'group cursor-pointer bg-muted/50 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand',
+        'group cursor-pointer bg-muted/50 transition-colors hover:bg-muted/50 focus-ring',
         className
       )}
     >
diff --git a/apps/studio/components/ui/TwoOptionToggle.tsx b/apps/studio/components/ui/TwoOptionToggle.tsx
index b439bc3e78013..00fae332a9004 100644
--- a/apps/studio/components/ui/TwoOptionToggle.tsx
+++ b/apps/studio/components/ui/TwoOptionToggle.tsx
@@ -24,13 +24,13 @@ export const TwoOptionToggle = ({
   ) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium
     ${
       isActive ? 'hover:text-foreground-light hover:text-foreground' : 'hover:text-foreground'
-    } hover:text-foreground focus:z-10 focus:outline-hidden focus:border-blue-300 focus:ring-blue
-    transition ease-in-out duration-150`
+    } hover:text-foreground focus-visible:z-10 focus-ring`
 
   return (
     <div
       className={`relative border ${borderOverride} rounded-md h-7`}
       style={{ padding: 1, width: (width + 1) * 2 }}
+      role="group"
     >
       <span
         style={{ width, translate: activeOption === options[1] ? '0px' : `${width - 2}px` }}
@@ -42,14 +42,20 @@ export const TwoOptionToggle = ({
       />
       {options.map((option, index: number) => {
         const isDisabled = disabledOptions.includes(option)
+        const isActive = activeOption === option
         const optionButton = (
-          <span
+          <button
             key={`toggle_${index}`}
+            type="button"
+            tabIndex={0}
+            aria-pressed={isActive}
+            // Prefer aria-disabled so TooltipTrigger asChild still receives hover/focus
+            aria-disabled={isDisabled || undefined}
             style={{ width: width + 1 }}
             className={cn(
-              activeOption === option ? 'text-foreground' : 'text-foreground-light',
+              isActive ? 'text-foreground' : 'text-foreground-light',
               index === 0 ? 'right-0' : 'left-0',
-              buttonStyle(activeOption === option),
+              buttonStyle(isActive),
               isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
             )}
             onClick={() => {
@@ -59,13 +65,13 @@ export const TwoOptionToggle = ({
             <span
               className={cn(
                 'capitalize hover:text-foreground',
-                activeOption === option ? 'text-foreground' : 'text-foreground-light',
+                isActive ? 'text-foreground' : 'text-foreground-light',
                 isDisabled && 'hover:text-foreground-light'
               )}
             >
               {option}
             </span>
-          </span>
+          </button>
         )
 
         if (!isDisabled || !disabledOptionTooltip) return optionButton
diff --git a/apps/www/app/partners/catalog/IntegrationsContent.tsx b/apps/www/app/partners/catalog/IntegrationsContent.tsx
index 00ff3172e70e9..c1651c96c8581 100644
--- a/apps/www/app/partners/catalog/IntegrationsContent.tsx
+++ b/apps/www/app/partners/catalog/IntegrationsContent.tsx
@@ -314,7 +314,7 @@ export default function IntegrationsContent({
                   title="Grid view"
                   onClick={() => setFilters({ view: 'grid' })}
                   className={cn(
-                    'relative flex items-center justify-center w-8 h-8 transition-colors rounded-l-lg focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+                    'relative flex items-center justify-center w-8 h-8 rounded-l-lg focus-visible:z-10 focus-ring',
                     viewMode === 'grid'
                       ? 'bg-surface-300 text-foreground'
                       : 'bg-surface-75 text-foreground-muted hover:text-foreground hover:bg-surface-200'
@@ -327,7 +327,7 @@ export default function IntegrationsContent({
                   title="List view"
                   onClick={() => setFilters({ view: 'list' })}
                   className={cn(
-                    'relative flex items-center justify-center w-8 h-8 transition-colors border-l border-muted rounded-r-lg focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+                    'relative flex items-center justify-center w-8 h-8 border-l border-muted rounded-r-lg focus-visible:z-10 focus-ring',
                     viewMode === 'list'
                       ? 'bg-surface-300 text-foreground'
                       : 'bg-surface-75 text-foreground-muted hover:text-foreground hover:bg-surface-200'
@@ -346,7 +346,7 @@ export default function IntegrationsContent({
                     <Link
                       key={p.slug}
                       href={`/partners/catalog/${p.slug}`}
-                      className="flex flex-col justify-start items-stretch group cursor-pointer transition rounded-xl focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-hidden outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-foreground-lighter"
+                      className="flex flex-col justify-start items-stretch group cursor-pointer rounded-xl focus-ring"
                     >
                       <Panel
                         hasActiveOnHover
diff --git a/apps/www/app/state-of-startups/components/TwoOptionToggle.tsx b/apps/www/app/state-of-startups/components/TwoOptionToggle.tsx
index 247f5ea9d9e69..116213d6c82d7 100644
--- a/apps/www/app/state-of-startups/components/TwoOptionToggle.tsx
+++ b/apps/www/app/state-of-startups/components/TwoOptionToggle.tsx
@@ -20,13 +20,13 @@ const TwoOptionToggle = ({
   ) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium
     ${
       isActive ? 'hover:text-foreground-light hover:text-foreground' : 'hover:text-foreground'
-    } hover:text-foreground focus:z-10 focus:outline-hidden focus:border-blue-300 focus:ring-blue
-    transition ease-in-out duration-150`
+    } hover:text-foreground focus-visible:z-10 focus-ring`
 
   return (
     <div
       className={`relative border ${borderOverride} rounded-md h-7`}
       style={{ padding: 1, width: (width + 1) * 2 }}
+      role="group"
     >
       <span
         style={{ width, translate: activeOption === options[1] ? '0px' : `${width - 2}px` }}
@@ -36,28 +36,34 @@ const TwoOptionToggle = ({
           'transition-all ease-in-out border border-strong'
         )}
       ></span>
-      {options.map((option: any, index: number) => (
-        <span
-          key={`toggle_${index}`}
-          style={{ width: width + 1 }}
-          className={`
-              ${activeOption === option ? 'text-foreground' : 'text-foreground-light'}
+      {options.map((option: any, index: number) => {
+        const isActive = activeOption === option
+        return (
+          <button
+            key={`toggle_${index}`}
+            type="button"
+            tabIndex={0}
+            aria-pressed={isActive}
+            style={{ width: width + 1 }}
+            className={`
+              ${isActive ? 'text-foreground' : 'text-foreground-light'}
               ${index === 0 ? 'right-0' : 'left-0'}
-              ${buttonStyle(activeOption === option)}
+              ${buttonStyle(isActive)}
               cursor-pointer
             `}
-          onClick={() => onClickOption(option)}
-        >
-          <span
-            className={cn(
-              'capitalize hover:text-foreground',
-              activeOption === option ? 'text-foreground' : 'text-foreground-light'
-            )}
+            onClick={() => onClickOption(option)}
           >
-            {option}
-          </span>
-        </span>
-      ))}
+            <span
+              className={cn(
+                'capitalize hover:text-foreground',
+                isActive ? 'text-foreground' : 'text-foreground-light'
+              )}
+            >
+              {option}
+            </span>
+          </button>
+        )
+      })}
     </div>
   )
 }
diff --git a/apps/www/components/Announcement/Badge.tsx b/apps/www/components/Announcement/Badge.tsx
index 0009742b79533..500ad764ff8aa 100644
--- a/apps/www/components/Announcement/Badge.tsx
+++ b/apps/www/components/Announcement/Badge.tsx
@@ -48,7 +48,7 @@ const AnnouncementBadge = ({
           hover:border-foreground-muted/30
           shadow-md
           overflow-hidden
-          focus-visible:outline-hidden focus-visible:ring-brand-600 focus-visible:ring-2 focus-visible:rounded-full
+          focus-ring rounded-full
           `,
         !badge && 'pl-5'
       )}
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index 93bf7f63a5e71..88b9c32f60595 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -11,7 +11,7 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-xs border border-transparent text-white bg-brand-400 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
+      ? 'px-3 py-2 shadow-xs border border-transparent text-white bg-brand-400 hover:bg-brand-300'
       : 'text-brand-400 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
@@ -27,7 +27,7 @@ const Button = (props: Props) => {
 
   const sharedClassName = `
         group inline-flex items-center rounded-md text-sm
-        leading-4 transition focus:outline-hidden ${colorClass} ${className}
+        leading-4 focus-ring ${colorClass} ${className}
       `
 
   const content = (
diff --git a/apps/www/components/Changelog/ChangelogTimelineList.tsx b/apps/www/components/Changelog/ChangelogTimelineList.tsx
index a75c04c3e4f25..acd81b4a600c0 100644
--- a/apps/www/components/Changelog/ChangelogTimelineList.tsx
+++ b/apps/www/components/Changelog/ChangelogTimelineList.tsx
@@ -38,8 +38,8 @@ export function LabelBadges({
           href={changelogTagFilterUrl(label.name)}
           className={
             tiny
-              ? 'inline-flex shrink-0 no-underline focus-visible:ring-brand-default rounded-sm focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden'
-              : 'inline-flex shrink-0 no-underline focus-visible:ring-brand-default rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
+              ? 'inline-flex shrink-0 no-underline focus-ring rounded-sm'
+              : 'inline-flex shrink-0 no-underline focus-ring rounded-md'
           }
           onClick={onBadgeClick}
         >
diff --git a/apps/www/components/FeaturesMatrix.tsx b/apps/www/components/FeaturesMatrix.tsx
index 420fae4dfe735..d62adbff94dbc 100644
--- a/apps/www/components/FeaturesMatrix.tsx
+++ b/apps/www/components/FeaturesMatrix.tsx
@@ -170,7 +170,7 @@ export function FeaturesMatrix({ features }: FeaturesMatrixProps) {
                 <TableCell className="px-3 py-3 min-w-0 hover:bg-transparent!">
                   <Link
                     href={`/features/${feature.slug}`}
-                    className="flex items-center gap-2 text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter rounded min-w-0"
+                    className="flex items-center gap-2 text-foreground focus-ring rounded min-w-0"
                   >
                     <div className="shrink-0 w-7 h-7 rounded-md bg-surface-200 border border-muted hidden md:flex items-center justify-center">
                       <feature.icon className="w-3.5 h-3.5 text-foreground-light group-hover/row:text-foreground transition-colors" />
diff --git a/apps/www/components/Modules/ModulesNav.tsx b/apps/www/components/Modules/ModulesNav.tsx
index ffc70394298b7..d145135312138 100644
--- a/apps/www/components/Modules/ModulesNav.tsx
+++ b/apps/www/components/Modules/ModulesNav.tsx
@@ -23,7 +23,7 @@ function ModulesNav({ activePage, docsUrl }: Props) {
                 key={currentModule.name}
                 className={cn(
                   'flex items-center gap-1.5 px-2 first:-ml-2 py-3 border-b border-transparent text-sm text-foreground-lighter hover:text-foreground',
-                  'focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground focus-visible:outline-brand-600',
+                  'focus-ring focus-visible:text-foreground',
                   currentModule.name === activePage && 'border-foreground-light text-foreground'
                 )}
                 href={currentModule.url ?? ''}
@@ -52,7 +52,7 @@ function ModulesNav({ activePage, docsUrl }: Props) {
             <Link
               className={cn(
                 'flex items-center gap-1.5 py-3 border-b border-transparent text-sm text-foreground-lighter hover:text-foreground',
-                'focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground focus-visible:outline-brand-600'
+                'focus-ring focus-visible:text-foreground'
               )}
               href={docsUrl}
             >
diff --git a/apps/www/components/Nav/DevelopersDropdown.tsx b/apps/www/components/Nav/DevelopersDropdown.tsx
index 8c9de8c27cb5d..58fc8b4e0872e 100644
--- a/apps/www/components/Nav/DevelopersDropdown.tsx
+++ b/apps/www/components/Nav/DevelopersDropdown.tsx
@@ -27,7 +27,7 @@ export const DevelopersDropdown = () => {
                 <li key={link.text}>
                   <Link
                     href={link.url!}
-                    className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-hidden focus-visible:rounded-sm focus-visible:ring-foreground-lighter"
+                    className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-ring rounded-sm"
                   >
                     {Icon && <Icon size={16} strokeWidth={1.3} />}
                     <span>{link.text}</span>
@@ -51,7 +51,7 @@ export const DevelopersDropdown = () => {
         <div className="flex-col gap-2 py-8 px-10">
           <Link
             href="/blog"
-            className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-xs focus-visible:text-foreground"
+            className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-xs focus-visible:text-foreground"
           >
             <span>Blog</span>
             <ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
@@ -61,7 +61,7 @@ export const DevelopersDropdown = () => {
               <li key={post.title}>
                 <Link
                   href={post.url}
-                  className="group flex flex-col focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
+                  className="group flex flex-col focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-sm"
                 >
                   <p className="text-foreground-light mb-0 line-clamp-2 group-hover:text-foreground group-focus-visible:text-foreground">
                     {post.title}
diff --git a/apps/www/components/Nav/HamburgerMenu.tsx b/apps/www/components/Nav/HamburgerMenu.tsx
index 6d141c145a709..61386798fc7d4 100644
--- a/apps/www/components/Nav/HamburgerMenu.tsx
+++ b/apps/www/components/Nav/HamburgerMenu.tsx
@@ -11,7 +11,7 @@ const HamburgerButton = (props: HamburgerButtonProps) => (
     <button
       tabIndex={0}
       className={cn(
-        'text-foreground-lighter focus:ring-brand bg-transparent hover:text-foreground-light transition-colors hover:bg-overlay inline-flex items-center justify-center rounded-md p-2 focus:outline-hidden focus:ring-2 focus:ring-inset'
+        'text-foreground-lighter bg-transparent hover:text-foreground-light hover:bg-overlay inline-flex items-center justify-center rounded-md p-2 focus-ring'
       )}
       aria-expanded="false"
     >
diff --git a/apps/www/components/Nav/MenuItem.tsx b/apps/www/components/Nav/MenuItem.tsx
index 80b5b0ba39f93..7dbfaf6ef0f18 100644
--- a/apps/www/components/Nav/MenuItem.tsx
+++ b/apps/www/components/Nav/MenuItem.tsx
@@ -31,7 +31,7 @@ const MenuItem = React.forwardRef<
         href={href}
         ref={ref}
         className={cn(
-          'group/menu-item flex items-center text-foreground-light text-sm hover:text-foreground select-none gap-3 rounded-md p-2 leading-none no-underline outline-hidden focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
+          'group/menu-item flex items-center text-foreground-light text-sm hover:text-foreground select-none gap-3 rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground',
           description && 'items-center',
           className
         )}
diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx
index 5341c2dd6000a..afe39a844223b 100644
--- a/apps/www/components/Nav/MobileMenu.tsx
+++ b/apps/www/components/Nav/MobileMenu.tsx
@@ -90,8 +90,7 @@ export const MobileMenu = ({ open, setOpen, menu }: Props) => {
               rounded-lg border
               bg-alternative-200 text-foreground-light
               hover:text-foreground hover:border-foreground-muted
-              focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-hidden
-              focus-visible:rounded-sm focus-visible:ring-foreground-lighter
+              focus-visible:text-foreground focus-ring
             "
             onClick={() => setOpen(false)}
           >
@@ -194,10 +193,7 @@ export const MobileMenu = ({ open, setOpen, menu }: Props) => {
             ) : (
               <Link
                 href={menuItem.url ?? '/'}
-                className={cn(
-                  className,
-                  'block focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:rounded-sm'
-                )}
+                className={cn(className, 'block focus-ring rounded-sm')}
                 onClick={() => setOpen(false)}
               >
                 {menuItem.title}
@@ -224,7 +220,7 @@ export const MobileMenu = ({ open, setOpen, menu }: Props) => {
               <Link
                 href="/"
                 as="/"
-                className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-xs"
+                className="block w-auto h-6 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-xs"
               >
                 <SupabaseWordmark />
               </Link>
@@ -232,7 +228,7 @@ export const MobileMenu = ({ open, setOpen, menu }: Props) => {
                 tabIndex={0}
                 onClick={() => setOpen(false)}
                 type="button"
-                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter focus:ring-brand hover:text-foreground-light transition-colors focus:outline-hidden focus:ring-2 focus:ring-inset"
+                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter hover:text-foreground-light focus-ring"
               >
                 <span className="sr-only">Close menu</span>
                 <svg
diff --git a/apps/www/components/Nav/ProductDropdown.tsx b/apps/www/components/Nav/ProductDropdown.tsx
index f6f60df4d828d..ca4b167f51705 100644
--- a/apps/www/components/Nav/ProductDropdown.tsx
+++ b/apps/www/components/Nav/ProductDropdown.tsx
@@ -51,8 +51,8 @@ export const ProductDropdown = () => {
                     flex items-start gap-2
                     text-xs leading-none
                     text-foreground-light hover:text-foreground
-                    no-underline outline-hidden select-none
-                    focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground
+                    no-underline select-none
+                    focus-ring focus-visible:text-foreground
                     "
                   >
                     <div className="w-8 h-8 min-w-8 shrink-0 bg-background border flex items-center justify-center rounded-md">
@@ -98,8 +98,8 @@ export const ProductDropdown = () => {
                 flex items-start gap-2
                 text-xs leading-none
                 text-foreground-light hover:text-foreground
-                no-underline outline-hidden select-none
-                focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground
+                no-underline select-none
+                focus-ring focus-visible:text-foreground
               "
               >
                 <div className="w-8 h-8 min-w-8 shrink-0 bg-background border flex items-center justify-center rounded-md">
@@ -127,7 +127,7 @@ export const ProductDropdown = () => {
           <div>
             <Link
               href="/customers"
-              className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-4 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-xs focus-visible:text-foreground"
+              className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-4 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-xs focus-visible:text-foreground"
             >
               Customer Stories
               <ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
@@ -137,7 +137,7 @@ export const ProductDropdown = () => {
                 <li key={customer.organization}>
                   <Link
                     href={customer.url}
-                    className="group flex items-center gap-3 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
+                    className="group flex items-center gap-3 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-sm"
                   >
                     <div className="relative rounded-md bg-background border group-hover:border-foreground-muted/50 h-14 w-28 xl:h-14 xl:w-20 shrink-0 overflow-auto">
                       <Image
diff --git a/apps/www/components/Nav/RightClickBrandLogo.tsx b/apps/www/components/Nav/RightClickBrandLogo.tsx
index 2e0b7444f0d7e..9b68079d75cf2 100644
--- a/apps/www/components/Nav/RightClickBrandLogo.tsx
+++ b/apps/www/components/Nav/RightClickBrandLogo.tsx
@@ -93,7 +93,7 @@ const RightClickBrandLogo = () => {
           onContextMenu={handleRightClick}
           onFocus={handleKeyboardOpen}
           onKeyDown={(e) => e.key === 'Enter' && router?.push('/')}
-          className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-xs"
+          className="block w-auto h-6 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-xs"
         >
           <SupabaseWordmark />
         </Link>
diff --git a/apps/www/components/Nav/SolutionsDropdown.tsx b/apps/www/components/Nav/SolutionsDropdown.tsx
index 8b525184a586a..10972cd986b8c 100644
--- a/apps/www/components/Nav/SolutionsDropdown.tsx
+++ b/apps/www/components/Nav/SolutionsDropdown.tsx
@@ -1,11 +1,10 @@
-import { motion, AnimatePresence } from 'framer-motion'
+import { navData as DevelopersData } from 'data/Solutions'
+import { AnimatePresence, motion } from 'framer-motion'
 import { ArrowLeftRight, ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useWindowSize } from 'react-use'
 
-import { navData as DevelopersData } from 'data/Solutions'
-
 type LinkProps = {
   text: string
   description?: string
@@ -50,7 +49,7 @@ const LinksGroup = ({ links, label }: { links: LinkProps[]; label: string }) =>
           <li key={link.text}>
             <Link
               href={link.url!}
-              className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-hidden focus-visible:rounded-sm focus-visible:ring-foreground-lighter"
+              className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-ring rounded-sm"
             >
               {Icon && <Icon size={16} strokeWidth={1.3} />}
               <span>{link.text}</span>
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 972550fcf0932..9906b423282af 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -130,7 +130,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
                           <NavigationMenuTrigger
                             className={cn(
                               buttonVariants({ variant: 'text', size: 'small' }),
-                              'bg-transparent! hover:text-brand-link data-open:text-brand-link! data-radix-collection-item:focus-visible:ring-2 data-radix-collection-item:focus-visible:ring-foreground-lighter data-radix-collection-item:focus-visible:text-foreground px-2 h-auto'
+                              'bg-transparent! hover:text-brand-link data-open:text-brand-link! focus-ring focus-visible:text-foreground px-2 h-auto'
                             )}
                           >
                             {menuItem.title}
diff --git a/apps/www/components/Pricing/PricingComputeSection.tsx b/apps/www/components/Pricing/PricingComputeSection.tsx
index 7e2930e757d83..861dc6454bc16 100644
--- a/apps/www/components/Pricing/PricingComputeSection.tsx
+++ b/apps/www/components/Pricing/PricingComputeSection.tsx
@@ -189,15 +189,18 @@ const PricingComputeSection = () => {
         <button
           tabIndex={0}
           onClick={() => setShowTable(!showTable)}
-          className="w-full p-2 border-t border-muted text-foreground focus-visible:outline-brand-600 focus-visible:rounded-b-xl text-sm bg-alternative flex items-center justify-center gap-2"
+          className="group w-full p-2 border-t border-muted text-foreground outline-hidden rounded-b-xl text-sm bg-alternative flex items-center justify-center"
         >
-          <ChevronDownIcon
-            className={cn(
-              'w-4 transition-transform transform origin-center',
-              showTable ? 'rotate-180' : 'rotate-0'
-            )}
-          />{' '}
-          {!showTable ? 'Expand' : 'Hide'} Pricing breakdown
+          {/* Label-scoped ring: full-bleed focus-ring clips under Panel overflow-hidden */}
+          <span className="inline-flex items-center gap-2 rounded-md px-2 py-0.5 group-focus-visible:ring-2 group-focus-visible:ring-ring">
+            <ChevronDownIcon
+              className={cn(
+                'w-4 transition-transform transform origin-center',
+                showTable ? 'rotate-180' : 'rotate-0'
+              )}
+            />
+            {!showTable ? 'Expand' : 'Hide'} Pricing breakdown
+          </span>
         </button>
       </div>
     </Panel>
diff --git a/apps/www/components/Products/ProductCard.tsx b/apps/www/components/Products/ProductCard.tsx
index 25e5d86960ec6..6187050f45f21 100644
--- a/apps/www/components/Products/ProductCard.tsx
+++ b/apps/www/components/Products/ProductCard.tsx
@@ -30,7 +30,7 @@ const ProductCard = ({
   <Link
     href={url}
     className={cn(
-      'group relative w-full sm:h-[400px] flex flex-col gap-5 lg:flex-row focus:outline-hidden focus:border-none focus:ring-brand-600 focus:ring-2 focus:rounded-xl',
+      'group relative w-full sm:h-[400px] flex flex-col gap-5 lg:flex-row focus-ring rounded-xl',
       className
     )}
     onClick={onClick}
diff --git a/apps/www/components/Products/ProductsNav.tsx b/apps/www/components/Products/ProductsNav.tsx
index bcc4475cb709d..07da7677b817c 100644
--- a/apps/www/components/Products/ProductsNav.tsx
+++ b/apps/www/components/Products/ProductsNav.tsx
@@ -21,7 +21,7 @@ function ProductsNav({ activePage }: Props) {
               key={product.name}
               className={cn(
                 'flex items-center gap-1.5 px-2 first:-ml-2 py-4 border-b border-transparent text-sm text-foreground-lighter hover:text-foreground',
-                'focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground focus-visible:outline-brand-600',
+                'focus-ring focus-visible:text-foreground',
                 product.name === activePage && 'border-foreground-light text-foreground'
               )}
               href={`/${isAuth ? 'auth' : product.name.toLowerCase().replace(' ', '-')}`}
diff --git a/apps/www/components/SolutionsStickyNav.tsx b/apps/www/components/SolutionsStickyNav.tsx
index 08a84cfff86f5..3c42327e36ba9 100644
--- a/apps/www/components/SolutionsStickyNav.tsx
+++ b/apps/www/components/SolutionsStickyNav.tsx
@@ -88,7 +88,7 @@ function SolutionsStickyNav({ type, activeItem, className }: Props) {
                   key={item.name}
                   className={cn(
                     'flex items-center gap-1.5 px-2 first:-ml-2 py-4 border-b border-transparent text-sm text-foreground-lighter hover:text-foreground',
-                    'focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground focus-visible:outline-brand-600',
+                    'focus-ring focus-visible:text-foreground',
                     isActive && 'border-foreground-light text-foreground'
                   )}
                   href={item.href}
diff --git a/apps/www/pages/changelog.tsx b/apps/www/pages/changelog.tsx
index 3ca170973ac66..5f3092d13a91d 100644
--- a/apps/www/pages/changelog.tsx
+++ b/apps/www/pages/changelog.tsx
@@ -384,7 +384,7 @@ function ChangelogIndex({ featured, restIndex, allIndex }: PageProps) {
                                 <a
                                   key={`${entry.number}-${label.name}`}
                                   href={changelogTagFilterUrl(label.name)}
-                                  className="group inline-flex no-underline focus-visible:ring-brand-default rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+                                  className="group inline-flex no-underline focus-ring rounded-md"
                                 >
                                   <Badge className="group-hover:text-foreground-light text-foreground-lighter group-hover:border-foreground-muted px-1.5 py-px text-[11px] tracking-normal lowercase">
                                     {changelogLabelDisplayName(label.name)}
diff --git a/apps/www/pages/company.tsx b/apps/www/pages/company.tsx
index ef209842ff3ee..6574e23327e26 100644
--- a/apps/www/pages/company.tsx
+++ b/apps/www/pages/company.tsx
@@ -220,7 +220,7 @@ const Press = () => {
             href={x.href}
             key={x.href}
             target="_blank"
-            className="flex flex-col justify-start items-stretch group cursor-pointer transition rounded-xl focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-hidden outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-foreground-lighter"
+            className="flex flex-col justify-start items-stretch group cursor-pointer rounded-xl focus-ring"
           >
             <Panel
               hasActiveOnHover
@@ -247,7 +247,7 @@ const Press = () => {
             href={x.href}
             key={x.href}
             target="_blank"
-            className="flex flex-col justify-start items-stretch group cursor-pointer transition rounded-xl focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-hidden outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-foreground-lighter"
+            className="flex flex-col justify-start items-stretch group cursor-pointer rounded-xl focus-ring"
           >
             <Panel
               hasActiveOnHover
diff --git a/apps/www/pages/features.tsx b/apps/www/pages/features.tsx
index 8029daab20747..7d2de6dfdafa9 100644
--- a/apps/www/pages/features.tsx
+++ b/apps/www/pages/features.tsx
@@ -280,7 +280,7 @@ function FeaturesPage() {
                   title="Grid view"
                   onClick={() => setViewMode('grid')}
                   className={cn(
-                    'relative flex items-center justify-center w-8 h-8 transition-colors rounded-l-lg focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+                    'relative flex items-center justify-center w-8 h-8 rounded-l-lg focus-visible:z-10 focus-ring',
                     viewMode === 'grid'
                       ? 'bg-surface-300 text-foreground'
                       : 'bg-surface-75 text-foreground-muted hover:text-foreground hover:bg-surface-200'
@@ -293,7 +293,7 @@ function FeaturesPage() {
                   title="Matrix view"
                   onClick={() => setViewMode('matrix')}
                   className={cn(
-                    'relative flex items-center justify-center w-8 h-8 transition-colors border-l border-muted rounded-r-lg focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+                    'relative flex items-center justify-center w-8 h-8 border-l border-muted rounded-r-lg focus-visible:z-10 focus-ring',
                     viewMode === 'matrix'
                       ? 'bg-surface-300 text-foreground'
                       : 'bg-surface-75 text-foreground-muted hover:text-foreground hover:bg-surface-200'
@@ -316,7 +316,7 @@ function FeaturesPage() {
                   <Link
                     key={`feat-${feature.title}`}
                     href={`/features/${feature.slug}`}
-                    className="flex flex-col justify-start items-stretch group cursor-pointer transition rounded-xl focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-hidden outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 focus-visible:outline-foreground-lighter"
+                    className="flex flex-col justify-start items-stretch group cursor-pointer rounded-xl focus-ring"
                   >
                     <Panel
                       hasActiveOnHover
diff --git a/packages/ui-patterns/src/TextLink/index.tsx b/packages/ui-patterns/src/TextLink/index.tsx
index 5b7db8a1c49ee..5d05be156820c 100644
--- a/packages/ui-patterns/src/TextLink/index.tsx
+++ b/packages/ui-patterns/src/TextLink/index.tsx
@@ -29,7 +29,7 @@ export function TextLink({
     <Link
       href={url}
       className={cn(
-        'group/text-link text-foreground-light hover:text-foreground mt-3 block cursor-pointer text-sm focus-visible:ring-2 focus-visible:outline-hidden focus-visible:rounded-xs focus-visible:ring-foreground-lighter focus-visible:text-foreground',
+        'group/text-link text-foreground-light hover:text-foreground mt-3 block cursor-pointer text-sm focus-ring focus-visible:rounded-xs focus-visible:text-foreground',
         className
       )}
       target={target}
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index 292d8f53a92f5..683f775899124 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -293,8 +293,8 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
           className={cn(
             'flex w-full min-w-[200px] min-h-[40px] items-center justify-between rounded-md border',
             'border-alternative bg-control px-3 py-2 text-sm',
-            'ring-offset-background placeholder:text-muted-foreground',
-            'focus:outline-hidden focus:ring-2 focus:ring-background-control focus:ring-offset-2 focus-visible:ring-offset-foreground-muted',
+            'placeholder:text-muted-foreground',
+            'focus-ring',
             'disabled:cursor-not-allowed disabled:opacity-50',
             'hover:border-primary transition-colors duration-200',
             className
diff --git a/packages/ui/src/components/radio-group-stacked.tsx b/packages/ui/src/components/radio-group-stacked.tsx
index e883b1f31f425..db83730ef95a1 100644
--- a/packages/ui/src/components/radio-group-stacked.tsx
+++ b/packages/ui/src/components/radio-group-stacked.tsx
@@ -48,14 +48,14 @@ const RadioGroupStackedItem = React.forwardRef<
         // Enabled/hover states
         'enabled:cursor-pointer enabled:hover:bg-surface-300 enabled:hover:border-foreground-muted',
         // Focus state
-        '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',
+        'focus-ring enabled:focus-visible:border-control',
         // Z-index for interactions
         'hover:z-1 focus-visible:z-1 data-[state=checked]:z-1',
         // Checked state
         'data-[state=checked]:ring-1 data-[state=checked]:ring-border',
         'data-[state=checked]:bg-surface-300 data-[state=checked]:border-foreground-muted',
-        // Transitions and group
-        'transition group',
+        // Colors only — avoid bare `transition` so the focus ring does not animate
+        'transition-colors group',
         props.className
       )}
     >
@@ -66,12 +66,11 @@ const RadioGroupStackedItem = React.forwardRef<
               // Base styles
               'aspect-square h-4 w-4 min-w-4 min-h-4 rounded-full border relative',
               'flex items-center justify-center',
-              'ring-offset-background transition',
               // States
               'group-data-[state=checked]:border-foreground-muted',
-              'group-focus:border-foreground-muted group-focus:outline-hidden',
-              'group-focus-visible:ring-2 group-focus-visible:ring-background-control group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-foreground-muted',
-              'group-hover:border-foreground-muted'
+              'group-focus-visible:border-foreground-muted',
+              'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
+              'group-hover:border-foreground-muted transition-colors'
             )}
           >
             <RadioGroupPrimitive.Indicator className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
diff --git a/packages/ui/src/components/shadcn/ui/dialog.tsx b/packages/ui/src/components/shadcn/ui/dialog.tsx
index 5edd2b3318e9f..226ef4b00033c 100644
--- a/packages/ui/src/components/shadcn/ui/dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/dialog.tsx
@@ -114,7 +114,7 @@ const DialogContent = React.forwardRef<
           {!hideClose && (
             <DialogPrimitive.Close
               className={cn(
-                'absolute p-0.5 right-3.5 top-3.5 rounded-xs opacity-20 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+                'absolute p-0.5 right-3.5 top-3.5 rounded-xs opacity-20 transition-opacity hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
                 'hit-area-6'
               )}
             >
@@ -197,7 +197,7 @@ const DialogClose = React.forwardRef<
   <DialogPrimitive.Close
     ref={ref}
     className={cn(
-      'opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
+      'opacity-70 transition-opacity hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/sheet.tsx b/packages/ui/src/components/shadcn/ui/sheet.tsx
index 975deb0213267..4f822924b7083 100644
--- a/packages/ui/src/components/shadcn/ui/sheet.tsx
+++ b/packages/ui/src/components/shadcn/ui/sheet.tsx
@@ -180,7 +180,7 @@ const SheetContent = React.forwardRef<
       {showClose ? (
         <SheetPrimitive.Close
           className={cn(
-            'absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary',
+            'absolute right-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-secondary',
             'hit-area-6'
           )}
         >
diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index fcdee422e322b..956c760a22f11 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -54,10 +54,10 @@ const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
             'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
           closeButton: cn(
             // unset all styles set from sonner
-            'absolute right-2 top-2 size-6 flex items-center justify-center rounded-md text-foreground-light opacity-0 transition',
-            'hover:text-foreground hover:bg-surface-200 focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100',
+            'absolute right-2 top-2 size-6 flex items-center justify-center rounded-md text-foreground-light opacity-0 transition-opacity',
+            'hover:text-foreground hover:bg-surface-200 focus-visible:opacity-100 focus-ring group-hover:opacity-100',
             'group-[.destructive]:text-destructive-300 group-[.destructive]:hover:text-destructive-50',
-            'group-[.destructive]:focus:ring-destructive-400 group-[.destructive]:focus:ring-offset-destructive-600',
+            'group-[.destructive]:focus-visible:ring-destructive-400 group-[.destructive]:focus-visible:ring-offset-destructive-600',
             'left-auto transform-none border-0 border-transparent'
           ),
           content: 'grow',