diff --git a/src/resources/theme/color/wa.globals.ts b/src/resources/theme/color/wa.globals.ts
index 43da990ad5..5882b47341 100644
--- a/src/resources/theme/color/wa.globals.ts
+++ b/src/resources/theme/color/wa.globals.ts
@@ -51,5 +51,7 @@ export const waColorStyles = css`
     --wa-color-danger-on-loud: var(--color-on-danger-loud);
     --wa-color-danger-on-normal: var(--color-on-danger-normal);
     --wa-color-danger-on-quiet: var(--color-on-danger-quiet);
+
+    --wa-focus-ring-color: var(--color-neutral-60);
   }
 `;
diff --git a/src/resources/theme/theme.ts b/src/resources/theme/theme.ts
index 3890144d5d..0efcda9ef5 100644
--- a/src/resources/theme/theme.ts
+++ b/src/resources/theme/theme.ts
@@ -5,16 +5,19 @@ import {
   typographyDerivedVariables,
   typographyStyles,
 } from "./typography.globals";
+import { waMainStyles } from "./wa.globals";
 
 export const themeStyles = [
   mainStyles.toString(),
   typographyStyles.toString(),
   ...colorStylesCollection,
   fontStyles.toString(),
+  waMainStyles.toString(),
 ].join("");
 
 export const derivedStyles = {
   ...mainDerivedVariables,
   ...typographyDerivedVariables,
   ...colorDerivedVariables,
+  ...waMainStyles,
 };
diff --git a/src/resources/theme/wa.globals.ts b/src/resources/theme/wa.globals.ts
new file mode 100644
index 0000000000..9a107feb33
--- /dev/null
+++ b/src/resources/theme/wa.globals.ts
@@ -0,0 +1,11 @@
+import { css } from "lit";
+
+export const waMainStyles = css`
+  html {
+    --wa-focus-ring-style: solid;
+    --wa-focus-ring-width: 2px;
+    --wa-focus-ring-offset: 2px;
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+      var(--wa-focus-ring-color);
+  }
+`;