diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index 88393acf97..931b9ba493 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -196,7 +196,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
@@ -224,7 +224,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
index 7bd85d2470..93122d6ffe 100644
--- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -6,7 +6,7 @@
 
 $-breadcrumb-current-color: var(--pine-color-text);
 $-breadcrumb-interactive-color: var(--pine-color-text);
-$-breadcrumb-outline-color: var(--pine-color-purple-600);
+$-breadcrumb-outline-color: var(--pine-color-focus-ring);
 
 .sage-breadcrumbs {
   display: flex;
@@ -77,6 +77,7 @@ $-breadcrumb-outline-color: var(--pine-color-purple-600);
   .sage-breadcrumbs--progressbar & {
     position: relative;
     padding-block-end: sage-spacing(2xs);
+    @include sage-focus-ring($-breadcrumb-outline-color);
 
     &:active {
       color: $-breadcrumb-interactive-color;
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 73ca731cd9..2ebdd2a145 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -51,7 +51,7 @@ $-btn-base-styles: (
       color: var(--pine-color-text-primary),
       background-color: var(--pine-color-primary),
       border-color: var(--pine-color-primary),
-      ring-color: var(--pine-color-purple-600),
+      ring-color: var(--pine-color-focus-ring),
     ),
     hover: (
       color: var(--pine-color-text-primary),
@@ -119,7 +119,7 @@ $-btn-subtle-styles: (
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-blue-150),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-blue-300),
   ),
   primary: (
@@ -127,7 +127,7 @@ $-btn-subtle-styles: (
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   secondary: (
@@ -135,7 +135,7 @@ $-btn-subtle-styles: (
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   danger: (
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index dd9d4dae9d..920f8b08d3 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -70,7 +70,7 @@ $-choice-radio-color-checked-inner: sage-radio-color(checked-inner);
   }
 
   &:focus-visible {
-    border-color: var(--pine-color-purple-600);
+    border-color: var(--pine-color-focus-ring);
     outline: none;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index 5bfdf3e8ec..4e7c7adedc 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -131,7 +131,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   &:focus-within {
     outline: none;
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -149,7 +149,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 .sage-dropdown__item--disabled {
   &:active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -166,7 +166,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__item-control {
   @include sage-button-style-reset();
   @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   @extend %t-sage-body-med;
 
@@ -197,7 +197,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   &:focus-within {
     @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     &::after {
       opacity: 1;
diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss
index 54fecc0f2c..69aaa5431f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hero.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss
@@ -142,7 +142,7 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);
   @include sage-focus-ring;
 
   &:focus {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
index 81105496de..dadbaec4d4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_link.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -77,7 +77,7 @@ $-link-base-styles: (
   &:focus-visible {
     color: var(--pine-color-primary);
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 
   .sage-card--interactive & {
@@ -224,7 +224,7 @@ $-link-base-styles: (
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 }
 
 .sage-link--remove-underline {
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
index 64991fd2ab..04fd05c604 100644
--- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -86,7 +86,7 @@ $-media-tile-breakpoints: (
 
     &::after {
       border-width: rem(2px);
-      border-color: var(--pine-color-purple-600);
+      border-color: var(--pine-color-focus-ring);
     }
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
index 3c06f9fc10..954abd9078 100644
--- a/packages/sage-assets/lib/stylesheets/components/_nav.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -36,7 +36,7 @@ $-nav-subitem-border-width: rem(2px);
     $outline-offset-block: -1,
     $outline-border-radius: sage-border(radius-medium),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   display: flex;
   align-items: center;
@@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px);
   @extend %t-sage-body-small-med;
 
   &.sage-nav__link--active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     background: $-nav-color-background;
   }
@@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px);
 
   &:not(.sage-nav__list--sub) {
     .sage-nav__link--active {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
 
     .sage-nav__link--active::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
index dcf5d5da8f..92daeb7c26 100644
--- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -12,7 +12,7 @@ $-pagination-text-color: var(--pine-color-text);
 $-pagination-text-color-disabled: var(--pine-color-grey-600);
 $-pagination-bg-color-current: var(--pine-color-background-muted);
 $-pagination-bg-color-hover: var(--pine-color-border-disabled);
-$-pagination-focus-ring-color: var(--pine-color-purple-600);
+$-pagination-focus-ring-color: var(--pine-color-focus-ring);
 
 
 .sage-pagination {
diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
index ce6a65e4dd..c10df5835b 100644
--- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
@@ -20,7 +20,7 @@
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   &:hover:not(:focus):not(:active) {
     color: var(--pine-color-text);