diff --git a/packages/mcp/src/primitives.ts b/packages/mcp/src/primitives.ts
index 74c1bb8deae..858a2f32113 100644
--- a/packages/mcp/src/primitives.ts
+++ b/packages/mcp/src/primitives.ts
@@ -437,7 +437,7 @@ function getDesignTokenSpecsText(groups: TokenGroups): string {
 * **Shorthand**: MUST use \`font: var(...)\`. NEVER split size/weight. 
 * **Shorthand Fallback**: If no shorthand exists (e.g. Monospace), use individual tokens for font-size, family, and line-height. NEVER raw 1.5.
 * **States**: Define 5: Rest, Hover, Focus-visible, Active, Disabled.
-* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--outline-focus-offset)\`.
+* **Focus**: \`:focus-visible\` MUST use \`outline: var(--focus-outline)\` AND \`outline-offset: var(--focus-outline-offset, var(--outline-focus-offset))\`.
 * **Validation**: CALL \`lint_css\` after any CSS change. Task is incomplete without a success message.
 * **Self-Correction**: Adopt autofixes immediately. Report unfixable errors to the user.
 
@@ -508,7 +508,7 @@ function getTokenUsagePatternsText(): string {
 
 .btn-primary:focus-visible {
   outline: var(--focus-outline);
-  outline-offset: var(--outline-focus-offset);
+  outline-offset: var(--focus-outline-offset, var(--outline-focus-offset));
 }
 
 .btn-primary:active {
diff --git a/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap b/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap
index 14d61a9d0d1..db598f50e75 100644
--- a/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap
+++ b/packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap
@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`postcss-preset-primer > css nesting 1`] = `".selector[data-active]{color:var(--fgColor-active)}"`;
+exports[`postcss-preset-primer > css nesting 1`] = `".selector[data-active]{color:var(--fgColor-active)}"`
 
-exports[`postcss-preset-primer > mixins > @mixin activeIndicatorLine 1`] = `".selector{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}"`;
+exports[`postcss-preset-primer > mixins > @mixin activeIndicatorLine 1`] =
+  `".selector{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}"`
 
-exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] = `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`;
+exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] =
+  `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`
 
-exports[`postcss-preset-primer > mixins > @mixin focusOutline 1`] = `".selector{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;
+exports[`postcss-preset-primer > mixins > @mixin focusOutline 1`] =
+  `".selector{box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,var(--color-accent-fg)));outline-offset:-2px}"`
 
-exports[`postcss-preset-primer > mixins > @mixin focusOutlineOnEmphasis 1`] = `".selector{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}"`;
+exports[`postcss-preset-primer > mixins > @mixin focusOutlineOnEmphasis 1`] =
+  `".selector{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,var(--color-accent-fg)));outline-offset:-2px}"`
diff --git a/packages/postcss-preset-primer/src/mixins/focusOutline.css b/packages/postcss-preset-primer/src/mixins/focusOutline.css
index 17dd2a18e48..61a052bdf5f 100644
--- a/packages/postcss-preset-primer/src/mixins/focusOutline.css
+++ b/packages/postcss-preset-primer/src/mixins/focusOutline.css
@@ -1,4 +1,4 @@
-@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
+@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
diff --git a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css
index 516a92c8ae2..898a27aebc2 100644
--- a/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css
+++ b/packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css
@@ -1,5 +1,6 @@
 /* outline with fg box-shadow for buttons */
-@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,
+  $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   /* stylelint-disable-next-line primer/box-shadow */
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
index e0d6d11afa3..e9fc3512b17 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css
@@ -16,6 +16,6 @@
 
 .CustomActionListItem[data-is-active-descendant='activated-directly'] {
   background-color: transparent;
-  outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
+  outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
   outline-offset: -2px;
 }
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
index d2e1357c05c..cac39dce200 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
@@ -77,7 +77,7 @@
 
   /* Focus styles */
   &:focus-visible {
-    outline: 2px solid var(--focus-outlineColor);
+    outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
     outline-offset: 3px;
   }