diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 9e853d65eb1..23f3c6f2d5f 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -228,7 +228,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
index 52a91601b5f..2156bfba8f3 100644
--- a/packages/clerk-js/src/ui/components/Statements/Statement.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
@@ -428,7 +428,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index 6fe2163f2d9..d92ea510393 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -55,6 +55,7 @@ export const createColorScales = (theme: Theme) => {
       : colors.toHslaString(variables.colorInputBackground),
     colorShimmer: colors.toHslaString(variables.colorShimmer),
     colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,
+    colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined,
   });
 };
 
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
index 8c9f3762ef2..1539907dcec 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -267,7 +267,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 7c7a4369418..23670d0e655 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -86,6 +86,7 @@ const colors = Object.freeze({
   colorForeground,
   colorMutedForeground,
   colorMuted: undefined,
+  colorRing: clerkCssVar('color-ring', neutralAlphaScale.neutralAlpha200),
   colorInputForeground: clerkCssVar('color-input-foreground', '#131316'),
   colorPrimaryForeground: clerkCssVar('color-primary-foreground', 'white'),
   colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'),
diff --git a/packages/clerk-js/src/ui/polishedAppearance.ts b/packages/clerk-js/src/ui/polishedAppearance.ts
index fca86438754..bf7c9ad6432 100644
--- a/packages/clerk-js/src/ui/polishedAppearance.ts
+++ b/packages/clerk-js/src/ui/polishedAppearance.ts
@@ -68,7 +68,7 @@ const inputStyles = (theme: InternalTheme) => ({
     idle2: theme.colors.$neutralAlpha100,
     hover1: theme.colors.$neutralAlpha300,
     hover2: theme.colors.$neutralAlpha150,
-    focus: theme.colors.$neutralAlpha150,
+    focus: theme.colors.$colorRing,
   }),
   '&[data-feedback="error"]': inputShadowStyles(theme, {
     idle1: theme.colors.$dangerAlpha400,
@@ -121,7 +121,7 @@ export const polishedAppearance: Appearance = {
             '&:focus': {
               boxShadow: [
                 BUTTON_SOLID_SHADOW(theme.colors.$primary500),
-                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
               ].toString(),
             },
           },
@@ -141,7 +141,7 @@ export const polishedAppearance: Appearance = {
           '&:focus': {
             boxShadow: [
               BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
             ].toString(),
           },
         },
@@ -151,7 +151,7 @@ export const polishedAppearance: Appearance = {
           '&:focus': {
             boxShadow: [
               BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
             ].toString(),
           },
         },
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index c4daabeb3e8..3881662c1e1 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -137,7 +137,7 @@ const focusRingStyles = (t: InternalTheme) => {
   return {
     '&::-moz-focus-inner': { border: '0' },
     WebkitTapHighlightColor: 'transparent',
-    boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$neutralAlpha200),
+    boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$colorRing),
     transitionProperty: t.transitionProperty.$common,
     transitionTimingFunction: t.transitionTiming.$common,
     transitionDuration: t.transitionDuration.$focusRing,
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index b3a4e777209..60aecfc4867 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -717,6 +717,11 @@ export type Variables = {
    * @default 'rgba(255, 255, 255, 0.36)'
    */
   colorShimmer?: CssColor;
+  /**
+   * The color of the ring when an interactive element is focused.
+   * @default {@link Variables.colorNeutral} at 15% opacity
+   */
+  colorRing?: CssColor;
   /**
    * The default font that will be used in all components.
    * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont})