diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
index d077f4c4c4..62da96fb92 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -53,7 +53,7 @@
     // Determine class name for $value == 50
     $classname: ".color-#{"" + $name}-#{$value}";
 
-    /* stylelint-disable max-nesting-depth, block-closing-brace-newline-after */
+    /* stylelint-disable block-closing-brace-newline-after */
     // This should be numeric, not string
     @if ($value == 50) {
       $classname: ".color-#{"" + $name}-0#{$value}";
@@ -79,7 +79,7 @@
         text-transform: uppercase;
       }
     }
-    /* stylelint-enable max-nesting-depth, block-closing-brace-newline-after */
+    /* stylelint-enable block-closing-brace-newline-after */
   }
 }
 /* stylelint-enable max-nesting-depth */
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
index 56c8be2359..5486a18a3d 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
@@ -52,7 +52,7 @@ end
   <% end %>
 
   <% if !component.initials && !component.image %>
-    <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic"></pds-icon>
+    <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic"></pds-icon>
   <% end %>
 
   <% if component.image %>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
index 9be345e96d..916059c35d 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
@@ -1,6 +1,6 @@
 <%
   component_description = component.type === "success" ? "Success" : "Loading..."
-  stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_400]
+  stroke_color = "var(--pine-color-brand)"
 %>
 
 <div class="
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
index 458e7f9a66..f672f41f02 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
@@ -2,7 +2,7 @@
 animate = component.animate.nil? ? true : component.animate
 content = component.label ? "#{component.label}: " : ""
 content << "#{component.percent}%&nbsp;progress"
-color = component.color || SageTokens::COLOR_PALETTE[:MERCURY_500]
+color = component.color || "var(--pine-color-brand)"
 %>
 
 <div
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index 1d71b05beb..52608a77e1 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -30,7 +30,7 @@ $-avatar-ring-colors: (
   ),
   orange: (
     main: var(--pine-color-brand),
-    bg: var(--pine-color-mercury-150)
+    bg: var(--pine-color-grey-150)
   ),
   red: (
     main: var(--pine-color-danger),
@@ -64,7 +64,7 @@ $-avatar-group-item-sizes: (
   width: $-avatar-min-size;
   height: $-avatar-min-size;
   border-radius: var(--pine-border-radius-full);
-  background-color: var(--pine-color-mercury-050);
+  background-color: var(--pine-color-grey-050);
 
   // Documentation-specific styles
   .sage-avatar-wrapper > & {
diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index aca94f170b..cce98299c2 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.jsx
@@ -82,7 +82,7 @@ export const Avatar = ({
         <img alt={image.alt || ''} className="sage-avatar__image" src={image.src} id={image.id} />
       )}
       {(!image.src || useFallbackGraphic) && (
-        <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic" />
+        <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic" />
       )}
     </div>
   );
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
index 2fce8af65e..5a75680cd3 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -81,7 +81,7 @@ ProgressBar.defaultProps = {
   animate: true,
   backgroundColor: null,
   className: null,
-  color: ProgressBar.COLORS.MERCURY_500,
+  color: ProgressBar.COLORS.GREY_500,
   disableTooltip: false,
   displayPercent: false,
   label: null,