diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json
index 0375c114ce9c..9cb16c81169d 100644
--- a/lavamoat/browserify/beta/policy.json
+++ b/lavamoat/browserify/beta/policy.json
@@ -760,6 +760,11 @@
         "react-redux>react-is": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1095,7 +1100,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1103,11 +1108,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/browserify/experimental/policy.json b/lavamoat/browserify/experimental/policy.json
index 0375c114ce9c..9cb16c81169d 100644
--- a/lavamoat/browserify/experimental/policy.json
+++ b/lavamoat/browserify/experimental/policy.json
@@ -760,6 +760,11 @@
         "react-redux>react-is": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1095,7 +1100,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1103,11 +1108,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json
index 0375c114ce9c..9cb16c81169d 100644
--- a/lavamoat/browserify/flask/policy.json
+++ b/lavamoat/browserify/flask/policy.json
@@ -760,6 +760,11 @@
         "react-redux>react-is": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1095,7 +1100,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1103,11 +1108,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json
index 0375c114ce9c..9cb16c81169d 100644
--- a/lavamoat/browserify/main/policy.json
+++ b/lavamoat/browserify/main/policy.json
@@ -760,6 +760,11 @@
         "react-redux>react-is": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1095,7 +1100,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1103,11 +1108,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/webpack/mv2/beta/policy.json b/lavamoat/webpack/mv2/beta/policy.json
index 5f9f5e55f2a7..072edae05c15 100644
--- a/lavamoat/webpack/mv2/beta/policy.json
+++ b/lavamoat/webpack/mv2/beta/policy.json
@@ -759,6 +759,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1099,7 +1104,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1107,11 +1112,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/webpack/mv2/experimental/policy.json b/lavamoat/webpack/mv2/experimental/policy.json
index 5f9f5e55f2a7..072edae05c15 100644
--- a/lavamoat/webpack/mv2/experimental/policy.json
+++ b/lavamoat/webpack/mv2/experimental/policy.json
@@ -759,6 +759,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1099,7 +1104,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1107,11 +1112,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/webpack/mv2/flask/policy.json b/lavamoat/webpack/mv2/flask/policy.json
index 5f9f5e55f2a7..072edae05c15 100644
--- a/lavamoat/webpack/mv2/flask/policy.json
+++ b/lavamoat/webpack/mv2/flask/policy.json
@@ -759,6 +759,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1099,7 +1104,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1107,11 +1112,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/webpack/mv2/main/policy.json b/lavamoat/webpack/mv2/main/policy.json
index 5f9f5e55f2a7..072edae05c15 100644
--- a/lavamoat/webpack/mv2/main/policy.json
+++ b/lavamoat/webpack/mv2/main/policy.json
@@ -759,6 +759,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -1099,7 +1104,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -1107,11 +1112,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eip-5792-middleware": {
       "packages": {
         "@metamask/keyring-controller": true,
diff --git a/lavamoat/webpack/mv3/beta/policy.json b/lavamoat/webpack/mv3/beta/policy.json
index 37475b294207..3de4fcd5618d 100644
--- a/lavamoat/webpack/mv3/beta/policy.json
+++ b/lavamoat/webpack/mv3/beta/policy.json
@@ -636,6 +636,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -770,7 +775,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -778,11 +783,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eth-token-tracker>@metamask/eth-block-tracker": {
       "globals": {
         "clearTimeout": true,
diff --git a/lavamoat/webpack/mv3/experimental/policy.json b/lavamoat/webpack/mv3/experimental/policy.json
index 37475b294207..3de4fcd5618d 100644
--- a/lavamoat/webpack/mv3/experimental/policy.json
+++ b/lavamoat/webpack/mv3/experimental/policy.json
@@ -636,6 +636,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -770,7 +775,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -778,11 +783,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eth-token-tracker>@metamask/eth-block-tracker": {
       "globals": {
         "clearTimeout": true,
diff --git a/lavamoat/webpack/mv3/flask/policy.json b/lavamoat/webpack/mv3/flask/policy.json
index 37475b294207..3de4fcd5618d 100644
--- a/lavamoat/webpack/mv3/flask/policy.json
+++ b/lavamoat/webpack/mv3/flask/policy.json
@@ -636,6 +636,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -770,7 +775,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -778,11 +783,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eth-token-tracker>@metamask/eth-block-tracker": {
       "globals": {
         "clearTimeout": true,
diff --git a/lavamoat/webpack/mv3/main/policy.json b/lavamoat/webpack/mv3/main/policy.json
index 37475b294207..3de4fcd5618d 100644
--- a/lavamoat/webpack/mv3/main/policy.json
+++ b/lavamoat/webpack/mv3/main/policy.json
@@ -636,6 +636,11 @@
         "@babel/runtime": true
       }
     },
+    "@metamask/design-system-react>@metamask-previews/design-system-shared": {
+      "packages": {
+        "@metamask/utils": true
+      }
+    },
     "@metamask/abi-utils": {
       "packages": {
         "@metamask/superstruct": true,
@@ -770,7 +775,7 @@
         "console.warn": true
       },
       "packages": {
-        "@metamask/design-system-react>@metamask/design-system-shared": true,
+        "@metamask/design-system-react>@metamask-previews/design-system-shared": true,
         "@metamask/jazzicon": true,
         "@metamask/design-system-react>@radix-ui/react-slot": true,
         "@metamask/design-system-react>blo": true,
@@ -778,11 +783,6 @@
         "@metamask/design-system-react>tailwind-merge": true
       }
     },
-    "@metamask/design-system-react>@metamask/design-system-shared": {
-      "packages": {
-        "@metamask/utils": true
-      }
-    },
     "@metamask/eth-token-tracker>@metamask/eth-block-tracker": {
       "globals": {
         "clearTimeout": true,
diff --git a/package.json b/package.json
index fa91fbb5ba3c..661646f9e987 100644
--- a/package.json
+++ b/package.json
@@ -158,6 +158,10 @@
     "yarn-binary:hydrate": "corepack hydrate .yarn/yarn-corepack.tgz --activate"
   },
   "resolutions": {
+    "@metamask/design-system-react": "npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b",
+    "@metamask/design-system-shared": "npm:@metamask-previews/design-system-shared@0.7.0-preview.4ce710b",
+    "@metamask/design-system-tailwind-preset": "npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b",
+    "@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b",
     "@unrs/resolver-binding-wasm32-wasi": "npm:npm-empty-package@1.0.0",
     "jest-clean-console-reporter/chalk": "^4.1.2",
     "napi-postinstall": "npm:npm-empty-package@1.0.0",
@@ -318,9 +322,9 @@
     "@metamask/delegation-controller": "^2.0.2",
     "@metamask/delegation-core": "^0.2.0-rc.1",
     "@metamask/delegation-deployments": "^1.0.0",
-    "@metamask/design-system-react": "^0.12.0",
-    "@metamask/design-system-tailwind-preset": "^0.6.1",
-    "@metamask/design-tokens": "^8.2.2",
+    "@metamask/design-system-react": "npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b",
+    "@metamask/design-system-tailwind-preset": "npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b",
+    "@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b",
     "@metamask/eip-5792-middleware": "3.0.3",
     "@metamask/eip-7702-internal-rpc-middleware": "^0.1.0",
     "@metamask/ens-controller": "^19.1.0",
diff --git a/ui/pages/create-password-form/__snapshots__/create-password-form.test.tsx.snap b/ui/pages/create-password-form/__snapshots__/create-password-form.test.tsx.snap
index 299934819d1f..f3f66369bb8d 100644
--- a/ui/pages/create-password-form/__snapshots__/create-password-form.test.tsx.snap
+++ b/ui/pages/create-password-form/__snapshots__/create-password-form.test.tsx.snap
@@ -149,12 +149,12 @@ exports[`CreatePasswordForm renders match snapshot 1`] = `
           >
             <input
               aria-invalid="false"
-              class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+              class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
               id="create-password-terms"
               type="checkbox"
             />
             <div
-              class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-default hover:bg-default-hover active:bg-default-pressed border-default"
+              class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-default hover:bg-default-hover active:bg-default-pressed border-default"
             >
               <svg
                 class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-0"
diff --git a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.tsx.snap b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.tsx.snap
index 70de187aabe7..a15ed0a0fe4a 100644
--- a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.tsx.snap
+++ b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.tsx.snap
@@ -152,12 +152,12 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
             >
               <input
                 aria-invalid="false"
-                class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+                class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                 id="create-password-terms"
                 type="checkbox"
               />
               <div
-                class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-default hover:bg-default-hover active:bg-default-pressed border-default"
+                class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-default hover:bg-default-hover active:bg-default-pressed border-default"
               >
                 <svg
                   class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-0"
diff --git a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.tsx.snap b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.tsx.snap
index cd32f022c181..217b70236748 100644
--- a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.tsx.snap
+++ b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.tsx.snap
@@ -44,12 +44,12 @@ exports[`Onboarding Metametrics Component renders match snapshot 1`] = `
           <input
             aria-invalid="false"
             checked=""
-            class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+            class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
             id="metametrics-opt-in"
             type="checkbox"
           />
           <div
-            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed border-primary-default"
+            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed border-primary-default"
           >
             <svg
               class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-100"
@@ -95,12 +95,12 @@ exports[`Onboarding Metametrics Component renders match snapshot 1`] = `
         >
           <input
             aria-invalid="false"
-            class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+            class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
             id="metametrics-datacollection-opt-in"
             type="checkbox"
           />
           <div
-            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-default hover:bg-default-hover active:bg-default-pressed border-default"
+            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-default hover:bg-default-hover active:bg-default-pressed border-default"
           >
             <svg
               class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-0"
@@ -193,12 +193,12 @@ exports[`Onboarding Metametrics Component renders match snapshot after new polic
           <input
             aria-invalid="false"
             checked=""
-            class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+            class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
             id="metametrics-opt-in"
             type="checkbox"
           />
           <div
-            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed border-primary-default"
+            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed border-primary-default"
           >
             <svg
               class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-100"
@@ -244,12 +244,12 @@ exports[`Onboarding Metametrics Component renders match snapshot after new polic
         >
           <input
             aria-invalid="false"
-            class="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+            class="peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
             id="metametrics-datacollection-opt-in"
             type="checkbox"
           />
           <div
-            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 bg-default hover:bg-default-hover active:bg-default-pressed border-default"
+            class="relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary-default bg-default hover:bg-default-hover active:bg-default-pressed border-default"
           >
             <svg
               class="inline-block w-4 h-4 text-primary-inverse pointer-events-none transition-opacity opacity-0"
diff --git a/yarn.lock b/yarn.lock
index 4c7c571e7e46..d1d477cba930 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5571,6 +5571,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask-previews/design-system-shared@npm:0.7.0-preview.4ce710b":
+  version: 0.7.0-preview.4ce710b
+  resolution: "@metamask-previews/design-system-shared@npm:0.7.0-preview.4ce710b"
+  dependencies:
+    "@metamask/utils": "npm:^11.11.0"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+  checksum: 10/a30f3805c8fe9dd6a2dd364a39b2d490dc4ff9f9846e9c858f93b43a3167a360048201e9f428e67e817433f93456d1c119e4bd55058325f408e8d6cad35eac06
+  languageName: node
+  linkType: hard
+
 "@metamask/7715-permission-types@npm:^0.5.0":
   version: 0.5.0
   resolution: "@metamask/7715-permission-types@npm:0.5.0"
@@ -6161,11 +6172,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-system-react@npm:^0.12.0":
-  version: 0.12.0
-  resolution: "@metamask/design-system-react@npm:0.12.0"
+"@metamask/design-system-react@npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b":
+  version: 0.14.0-preview.4ce710b
+  resolution: "@metamask-previews/design-system-react@npm:0.14.0-preview.4ce710b"
   dependencies:
-    "@metamask/design-system-shared": "npm:^0.5.0"
+    "@metamask-previews/design-system-shared": "npm:0.7.0-preview.4ce710b"
     "@metamask/jazzicon": "npm:^2.0.0"
     "@radix-ui/react-slot": "npm:^1.1.0"
     blo: "npm:^2.0.0"
@@ -6173,43 +6184,27 @@ __metadata:
   peerDependencies:
     "@metamask/design-system-tailwind-preset": ^0.6.0
     "@metamask/design-tokens": ^8.1.0
-    "@metamask/utils": ^11.10.0
+    "@metamask/utils": ^11.11.0
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 10/f3b839c442645c97401e928cb6f4831ec507331df1527e39659593ee163366d9ebc916ce402d5056e0112af684cdbe7158525c784f3aa25c010d55546c5346a0
+  checksum: 10/a2c71a67efb6a4bd7332063d552db578f198f5e3b9fa25eac1c7c3aeebe321ad256662bd9866acaf7aa2a0bdb0b87379108e7e57c7a6eadf9e641e06a5435c89
   languageName: node
   linkType: hard
 
-"@metamask/design-system-shared@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@metamask/design-system-shared@npm:0.5.0"
-  dependencies:
-    "@metamask/utils": "npm:^11.10.0"
-  checksum: 10/9b37df0e330429ecee6bc8fabe7aef0b9575383d5a86808b34ae76283c8938540a27c32f0cde9b72fdf076fbba1b926f00b58b8ec5699f3c87631b502972c870
-  languageName: node
-  linkType: hard
-
-"@metamask/design-system-tailwind-preset@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "@metamask/design-system-tailwind-preset@npm:0.6.1"
+"@metamask/design-system-tailwind-preset@npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b":
+  version: 0.6.1-preview.4ce710b
+  resolution: "@metamask-previews/design-system-tailwind-preset@npm:0.6.1-preview.4ce710b"
   peerDependencies:
     "@metamask/design-tokens": ^8.0.0
     tailwindcss: ^3.0.0
-  checksum: 10/04914d04f7ab3e7433dae294b9245e3525d1306ea02ac2a8974db7e3958cfa4b1a2c866445f0b02e46435cb342378ace41dd747eb28614641fcd17fdf5c8d95c
+  checksum: 10/45091e5d4a995bf1a7139fd7c569cd3d9dde3d89b4a4900e8d0958ddea66e9f5e15dea8cc385df935c1efb59eb498dad8c4068f6cf1273ec852eee37070f6afe
   languageName: node
   linkType: hard
 
-"@metamask/design-tokens@npm:^7.1.0":
-  version: 7.1.0
-  resolution: "@metamask/design-tokens@npm:7.1.0"
-  checksum: 10/a4f1379bdf5f6b99c9a228ce4f5bb07ace4ed5abc61384e7f04cf5bdf943b32dd13ec9676a88f6b6c7314cdba6e2967b9fd99707a64a645865f21f8d8a2566d9
-  languageName: node
-  linkType: hard
-
-"@metamask/design-tokens@npm:^8.2.2":
-  version: 8.2.2
-  resolution: "@metamask/design-tokens@npm:8.2.2"
-  checksum: 10/2ab9e2c148f55874819c550a2e038c050d906709c33315edd200ddaeb7677b5f121f50fa2f43c06ce94b5fc66b59450c81b8927088721d8ad6ee559cf864f442
+"@metamask/design-tokens@npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b":
+  version: 8.3.0-preview.4ce710b
+  resolution: "@metamask-previews/design-tokens@npm:8.3.0-preview.4ce710b"
+  checksum: 10/3e1322cb89d2054a9ef1b88a16bb5ba254cb0d0de055d5e8cdd50bbf62d468db30cdb7a6d425a1ddb06893e3dce8acc85ff592f384e4605c9145dc6736aa2181
   languageName: node
   linkType: hard
 
@@ -8492,9 +8487,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/utils@npm:^11.0.0, @metamask/utils@npm:^11.0.1, @metamask/utils@npm:^11.1.0, @metamask/utils@npm:^11.10.0, @metamask/utils@npm:^11.4.0, @metamask/utils@npm:^11.4.2, @metamask/utils@npm:^11.8.1, @metamask/utils@npm:^11.9.0":
-  version: 11.10.0
-  resolution: "@metamask/utils@npm:11.10.0"
+"@metamask/utils@npm:^11.0.0, @metamask/utils@npm:^11.0.1, @metamask/utils@npm:^11.1.0, @metamask/utils@npm:^11.10.0, @metamask/utils@npm:^11.11.0, @metamask/utils@npm:^11.4.0, @metamask/utils@npm:^11.4.2, @metamask/utils@npm:^11.8.1, @metamask/utils@npm:^11.9.0":
+  version: 11.11.0
+  resolution: "@metamask/utils@npm:11.11.0"
   dependencies:
     "@ethereumjs/tx": "npm:^4.2.0"
     "@metamask/superstruct": "npm:^3.1.0"
@@ -8507,7 +8502,7 @@ __metadata:
     pony-cause: "npm:^2.1.10"
     semver: "npm:^7.5.4"
     uuid: "npm:^9.0.1"
-  checksum: 10/691a268af66593b60e9807a069127993cea3cdc941f99d5d7ca4664868754f08945821f1787b2f3e99e4497df63ceb0af37a2419ad494da29a1fddffe94f5797
+  checksum: 10/c4381b9e451a9616bde84ac659bc0d1848ef06b6e605f877bfa065b78c8ed5015706683ea88a3387de5eaeb3a50d1af9af0994f04f9e06258d992598fe2be3bf
   languageName: node
   linkType: hard
 
@@ -34120,9 +34115,9 @@ __metadata:
     "@metamask/delegation-controller": "npm:^2.0.2"
     "@metamask/delegation-core": "npm:^0.2.0-rc.1"
     "@metamask/delegation-deployments": "npm:^1.0.0"
-    "@metamask/design-system-react": "npm:^0.12.0"
-    "@metamask/design-system-tailwind-preset": "npm:^0.6.1"
-    "@metamask/design-tokens": "npm:^8.2.2"
+    "@metamask/design-system-react": "npm:@metamask-previews/design-system-react@0.14.0-preview.4ce710b"
+    "@metamask/design-system-tailwind-preset": "npm:@metamask-previews/design-system-tailwind-preset@0.6.1-preview.4ce710b"
+    "@metamask/design-tokens": "npm:@metamask-previews/design-tokens@8.3.0-preview.4ce710b"
     "@metamask/eip-5792-middleware": "npm:3.0.3"
     "@metamask/eip-7702-internal-rpc-middleware": "npm:^0.1.0"
     "@metamask/ens-controller": "npm:^19.1.0"