diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md
index 4c45bafaba..0f6eaf8a37 100644
--- a/packages/web/src/scss/components/Footer/README.md
+++ b/packages/web/src/scss/components/Footer/README.md
@@ -16,7 +16,7 @@ The Footer supports several ready-to-use building blocks:
 This is how all supported building blocks of the Footer build up the complete composition:
 
 ```html
-<footer class="bg-cover pt-1100 pb-1000">
+<footer class="bg-secondary pt-1400 pb-1200">
   <div class="Container">
     <!-- Grid with navigation links -->
     <!-- Grid with product logo, social media links and language switch -->
@@ -45,8 +45,8 @@ the `<h3>` element matches the value of the `aria-labelledby` attribute of the `
 
 ```html
 <nav aria-labelledby="footer-navigation-section">
-  <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section">Section headline</h3>
-  <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+  <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section">Section headline</h3>
+  <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
     <li>
       <a href="https://www.example.com">Link</a>
     </li>
@@ -69,7 +69,7 @@ This section is optional and consists of a [Grid][grid] layout with up to three
 ```html
 <div
   class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
-  style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
+  style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
 >
   <div class="text-desktop-left">
     <!-- Product logo -->
@@ -119,7 +119,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
 <nav aria-label="Secondary links">
   <ul
     class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
-    style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
+    style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
   >
     <!-- Repeat the `<li>` block for each secondary link. -->
     <li>
@@ -134,17 +134,17 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
 ## Full Example
 
 ```html
-<footer class="bg-cover pt-1100 pb-1000">
+<footer class="bg-secondary pt-1400 pb-1200">
   <div class="Container">
     <!-- Grid with navigation links -->
     <div
       class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
-      style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
+      style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
     >
       <!-- Repeat the `<nav>` block as many times as needed. -->
       <nav aria-labelledby="footer-navigation-section">
-        <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section">Section headline</h3>
-        <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+        <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section">Section headline</h3>
+        <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
           <li>
             <a href="https://www.example.com">Link</a>
           </li>
@@ -159,12 +159,12 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
     </div>
 
     <!-- Divider -->
-    <hr class="Divider my-900" />
+    <hr class="Divider my-1200" />
 
     <!-- Grid with product logo, social media links and language switch -->
     <div
       class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
-      style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
+      style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
     >
       <!-- Product logo -->
       <div class="text-desktop-left">
@@ -221,13 +221,13 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
     </div>
 
     <!-- Divider -->
-    <hr class="Divider my-900" />
+    <hr class="Divider my-1200" />
 
     <!-- Flex with secondary links -->
     <nav aria-label="Secondary links">
       <ul
         class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
-        style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
+        style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
       >
         <li>
           <a href="https://www.example.com" class="link-secondary">Legal notice</a>
diff --git a/packages/web/src/scss/components/Footer/index.html b/packages/web/src/scss/components/Footer/index.html
index a6241a8fe1..f46510dc01 100644
--- a/packages/web/src/scss/components/Footer/index.html
+++ b/packages/web/src/scss/components/Footer/index.html
@@ -4,21 +4,21 @@
   <h2 class="docs-Heading">Basic Usage</h2>
   <div class="docs-Stack">
 
-    <footer class="bg-cover pt-1100 pb-1000">
+    <footer class="bg-secondary pt-1400 pb-1200">
       <div class="Container">
 
         <!-- Grid with navigation links -->
         <div
           class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
-          style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
+          style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
         >
 
           <!-- Navigation links 1 -->
           <nav aria-labelledby="footer-navigation-section-1">
-            <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-1">
+            <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-1">
               Section headline
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -33,10 +33,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
 
           <!-- Navigation links 2 -->
           <nav aria-labelledby="footer-navigation-section-2">
-            <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-2">
+            <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-2">
               Section headline
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -54,10 +54,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
 
           <!-- Navigation links 3 -->
           <nav aria-labelledby="footer-navigation-section-3">
-            <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-3">
+            <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-3">
               Section headline
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -81,10 +81,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
 
           <!-- Navigation links 4 -->
           <nav aria-labelledby="footer-navigation-section-4">
-            <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-4">
+            <h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-4">
               Section headline
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -100,12 +100,12 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
         </div>
 
         <!-- Divider -->
-        <hr class="Divider my-900" />
+        <hr class="Divider my-1200" />
 
         <!-- Grid with product logo, social media links and language switch -->
         <div
           class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
-          style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
+          style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
         >
 
           <!-- Product logo -->
@@ -171,7 +171,7 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
           <!-- Flex with social media links -->
           <ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
             <li>
-              <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
                 <span class="accessibility-hidden">Facebook</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
@@ -179,7 +179,7 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
                 <span class="accessibility-hidden">X</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-x" />
@@ -187,7 +187,7 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
                 <span class="accessibility-hidden">YouTube</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" />
@@ -195,7 +195,7 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
                 <span class="accessibility-hidden">Google</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-google" />
@@ -203,7 +203,7 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
                 <span class="accessibility-hidden">LinkedIn</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-linkedin" />
@@ -233,13 +233,13 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
         </div>
 
         <!-- Divider -->
-        <hr class="Divider my-900" />
+        <hr class="Divider my-1200" />
 
         <!-- Flex with secondary links -->
         <nav aria-label="Secondary links">
           <ul
             class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
-            style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
+            style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
           >
             <li>
               <a href="https://www.example.com" class="link-secondary">Legal notice</a>
@@ -266,18 +266,18 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
   <h2 class="docs-Heading">Nested Link Blocks, Logo Only</h2>
   <div class="docs-Stack">
 
-    <footer class="bg-cover pt-1100 pb-1000">
+    <footer class="bg-secondary pt-1400 pb-1200">
       <div class="Container">
 
         <!-- Grid with navigation links -->
         <div
           class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
-          style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
+          style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
         >
 
           <!-- Navigation links 1 -->
           <nav aria-labelledby="footer-nested-links-navigation-section-1">
-            <h3 class="typography-body-large-text-bold mb-600">
+            <h3 class="typography-body-medium-bold mb-700">
               <a
                 href="https://www.example.com"
                 id="footer-nested-links-navigation-section-1"
@@ -285,7 +285,7 @@ <h3 class="typography-body-large-text-bold mb-600">
                 Section headline
               </a>
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -300,7 +300,7 @@ <h3 class="typography-body-large-text-bold mb-600">
 
           <!-- Navigation links 2 -->
           <nav aria-labelledby="footer-nested-links-navigation-section-2">
-            <h3 class="typography-body-large-text-bold mb-600">
+            <h3 class="typography-body-medium-bold mb-700">
               <a
                 href="https://www.example.com"
                 id="footer-nested-links-navigation-section-2"
@@ -308,7 +308,7 @@ <h3 class="typography-body-large-text-bold mb-600">
                 Section headline
               </a>
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -326,7 +326,7 @@ <h3 class="typography-body-large-text-bold mb-600">
 
           <!-- Navigation links 3 -->
           <nav aria-labelledby="footer-nested-links-navigation-section-3">
-            <h3 class="typography-body-large-text-bold mb-600">
+            <h3 class="typography-body-medium-bold mb-700">
               <a
                 href="https://www.example.com"
                 id="footer-nested-links-navigation-section-3"
@@ -334,7 +334,7 @@ <h3 class="typography-body-large-text-bold mb-600">
                 Section headline
               </a>
             </h3>
-            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
               <li>
                 <a href="https://www.example.com">Link</a>
               </li>
@@ -358,8 +358,8 @@ <h3 class="typography-body-large-text-bold mb-600">
 
           <!-- Navigation links 4 and 5 -->
           <div>
-            <nav aria-labelledby="footer-nested-links-navigation-section-4" class="mb-800">
-              <h3 class="typography-body-large-text-bold mb-600">
+            <nav aria-labelledby="footer-nested-links-navigation-section-4" class="mb-1000">
+              <h3 class="typography-body-medium-bold mb-700">
                 <a
                   href="https://www.example.com"
                   id="footer-nested-links-navigation-section-4"
@@ -367,7 +367,7 @@ <h3 class="typography-body-large-text-bold mb-600">
                   Section headline
                 </a>
               </h3>
-              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
                 <li>
                   <a href="https://www.example.com">Link</a>
                 </li>
@@ -380,7 +380,7 @@ <h3 class="typography-body-large-text-bold mb-600">
               </ul>
             </nav>
             <nav aria-labelledby="footer-nested-links-navigation-section-5">
-              <h3 class="typography-body-large-text-bold mb-600">
+              <h3 class="typography-body-medium-bold mb-700">
                 <a
                   href="https://www.example.com"
                   id="footer-nested-links-navigation-section-5"
@@ -388,7 +388,7 @@ <h3 class="typography-body-large-text-bold mb-600">
                   Section headline
                 </a>
               </h3>
-              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
+              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
                 <li>
                   <a href="https://www.example.com">Link</a>
                 </li>
@@ -401,7 +401,7 @@ <h3 class="typography-body-large-text-bold mb-600">
         </div>
 
         <!-- Divider -->
-        <hr class="Divider my-900" />
+        <hr class="Divider my-1200" />
 
         <!-- Product logo -->
         <div class="text-center">
@@ -464,13 +464,13 @@ <h3 class="typography-body-large-text-bold mb-600">
         </div>
 
         <!-- Divider -->
-        <hr class="Divider my-900" />
+        <hr class="Divider my-1200" />
 
         <!-- Flex with secondary links -->
         <nav aria-label="Secondary links">
           <ul
             class="Flex Flex--column Flex--tablet--row Flex--noWrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
-            style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
+            style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
           >
             <li>
               <a href="https://www.example.com" class="link-secondary">Legal notice</a>
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
index e21256dd7d..de8b810fc0 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
@@ -46,7 +46,7 @@ $_field-name: 'UNSTABLE_Slider';
             --slider-track-background: #{theme.$track-background-hover};
             --slider-track-lower-background: #{theme.$track-lower-background-hover};
             --slider-thumb-border-color: #{theme.$thumb-border-color-hover};
-            --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-hover)};
+            --slider-thumb-background-color: #{theme.$thumb-background-color-hover};
             --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-hover};
         }
     }
@@ -55,7 +55,7 @@ $_field-name: 'UNSTABLE_Slider';
         --slider-track-background: #{theme.$track-background-active};
         --slider-track-lower-background: #{theme.$track-lower-background-active};
         --slider-thumb-border-color: #{theme.$thumb-border-color-active};
-        --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-active)};
+        --slider-thumb-background-color: #{theme.$thumb-background-color-active};
         --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-active};
     }
 
@@ -146,6 +146,7 @@ $_field-name: 'UNSTABLE_Slider';
     --slider-track-lower-background: #{theme.$track-lower-background-disabled};
     --slider-thumb-border-width: #{theme.$thumb-border-width-disabled};
     --slider-thumb-border-color: #{theme.$thumb-border-color-disabled};
+    --slider-thumb-background-color: #{theme.$thumb-background-color-disabled};
     --slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-disabled)};
     --slider-thumb-box-shadow: #{theme.$thumb-box-shadow-disabled};
 
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
index eaeb878377..aeb7d567f4 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_theme.scss
@@ -1,40 +1,42 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 @use '../../settings/transitions';
 
-$padding: tokens.$space-400;
-$row-gap: tokens.$space-600;
+$padding: global-tokens.$space-500;
+$row-gap: global-tokens.$space-700;
 $transition-duration: transitions.$duration-100;
 $transition-timing: transitions.$timing-eased-out;
 
-$track-height: tokens.$space-300;
-$track-border-radius: tokens.$radius-100;
-$track-background: tokens.$border-primary-default;
-$track-background-hover: tokens.$border-primary-hover;
-$track-background-active: tokens.$border-primary-active;
-$track-background-disabled: tokens.$border-primary-disabled;
-$track-lower-background: tokens.$action-primary-default;
-$track-lower-background-hover: tokens.$action-primary-hover;
-$track-lower-background-active: tokens.$action-primary-active;
-$track-lower-background-disabled: tokens.$action-primary-disabled;
+$track-height: global-tokens.$space-300;
+$track-border-radius: global-tokens.$radius-100;
+$track-background: var(--#{globals.$prefix}color-border-interactive-default);
+$track-background-hover: var(--#{globals.$prefix}color-border-interactive-hover);
+$track-background-active: var(--#{globals.$prefix}color-border-interactive-active);
+$track-background-disabled: var(--#{globals.$prefix}color-disabled-background);
+$track-lower-background: var(--#{globals.$prefix}color-selected-default);
+$track-lower-background-hover: var(--#{globals.$prefix}color-selected-default);
+$track-lower-background-active: var(--#{globals.$prefix}color-selected-default);
+$track-lower-background-disabled: var(--#{globals.$prefix}color-disabled-foreground);
 
-$thumb-width: tokens.$space-700;
-$thumb-height: tokens.$space-900;
-$thumb-border-width: tokens.$border-width-200;
-$thumb-border-width-disabled: tokens.$border-width-100;
-$thumb-border-style: tokens.$border-style-100;
-$thumb-border-color: tokens.$action-primary-default;
-$thumb-border-color-hover: tokens.$action-primary-hover;
-$thumb-border-color-active: tokens.$action-primary-active;
-$thumb-border-color-disabled: tokens.$action-primary-disabled;
-$thumb-border-radius: tokens.$radius-100;
-$thumb-background-color: tokens.$background-basic;
-$thumb-background-image: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{$thumb-border-color}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>');
-$thumb-background-image-hover: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{$thumb-border-color-hover}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>');
-$thumb-background-image-active: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{$thumb-border-color-active}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>');
-$thumb-background-image-disabled: url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{$thumb-border-color-disabled}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>');
-$thumb-background-size: tokens.$space-400 tokens.$space-600;
-$thumb-box-shadow: tokens.$shadow-100;
-$thumb-box-shadow-hover: tokens.$shadow-200;
-$thumb-box-shadow-active: tokens.$shadow-200;
+$thumb-width: global-tokens.$space-900;
+$thumb-height: global-tokens.$space-1100;
+$thumb-border-width: global-tokens.$border-width-200;
+$thumb-border-width-disabled: global-tokens.$border-width-100;
+$thumb-border-style: solid;
+$thumb-border-color: var(--#{globals.$prefix}color-form-field-border-default);
+$thumb-border-color-hover: var(--#{globals.$prefix}color-form-field-border-hover);
+$thumb-border-color-active: var(--#{globals.$prefix}color-selected-default);
+$thumb-border-color-disabled: var(--#{globals.$prefix}color-disabled-foreground);
+$thumb-border-radius: global-tokens.$radius-200;
+$thumb-background-color: var(--#{globals.$prefix}color-form-field-default);
+$thumb-background-color-hover: var(--#{globals.$prefix}color-form-field-hover);
+$thumb-background-color-active: var(--#{globals.$prefix}color-form-field-active);
+$thumb-background-color-disabled: var(--#{globals.$prefix}color-disabled-background);
+$thumb-background-image: var(--#{globals.$prefix}slider-thumb-background-image-url);
+$thumb-background-image-disabled: var(--#{globals.$prefix}slider-thumb-disabled-background-image-url);
+$thumb-background-size: global-tokens.$space-500 global-tokens.$space-700;
+$thumb-box-shadow: global-tokens.$shadow-100;
+$thumb-box-shadow-hover: global-tokens.$shadow-100;
+$thumb-box-shadow-active: global-tokens.$shadow-200;
 $thumb-box-shadow-disabled: none;
-$thumb-box-shadow-focus: tokens.$focus;
+$thumb-box-shadow-focus: global-tokens.$focus;
diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
index 6c851008cd..a577ec679f 100644
--- a/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Slider/_tools.scss
@@ -16,7 +16,7 @@
     border: var(--slider-thumb-border-width, #{theme.$thumb-border-width}) theme.$thumb-border-style
         var(--slider-thumb-border-color, #{theme.$thumb-border-color});
     border-radius: theme.$thumb-border-radius;
-    background: theme.$thumb-background-color
+    background: var(--slider-thumb-background-color, #{theme.$thumb-background-color})
         var(--slider-thumb-background-image, #{svg.escape(theme.$thumb-background-image)}) no-repeat center /
         theme.$thumb-background-size;
     box-shadow: var(--slider-thumb-box-shadow, #{theme.$thumb-box-shadow});
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index b0a21d7cdf..7edb6f396a 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -35,6 +35,6 @@
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
 @forward 'UNSTABLE_Section';
+@forward 'UNSTABLE_Slider';
 
-// @forward 'UNSTABLE_Slider';
 // @forward 'UNSTABLE_Toggle';
diff --git a/packages/web/src/scss/tools/_themes.scss b/packages/web/src/scss/tools/_themes.scss
index 4ef418c30d..ec09e1a456 100644
--- a/packages/web/src/scss/tools/_themes.scss
+++ b/packages/web/src/scss/tools/_themes.scss
@@ -54,13 +54,7 @@
 
     // Slider
     --#{globals.$prefix}slider-thumb-background-image-url: #{svg.escape(
-            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, colors, border, interactive, default)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
-        )};
-    --#{globals.$prefix}slider-thumb-hover-background-image-url: #{svg.escape(
-            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, colors, border, interactive, hover)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
-        )};
-    --#{globals.$prefix}slider-thumb-active-background-image-url: #{svg.escape(
-            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, colors, border, interactive, selected)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
+            url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, colors, neutral, content-basic)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
         )};
     --#{globals.$prefix}slider-thumb-disabled-background-image-url: #{svg.escape(
             url('data:image/svg+xml,<svg width="8" height="16" viewBox="0 0 8 16" fill="#{map.get($themed-tokens, colors, disabled, foreground)}" xmlns="http://www.w3.org/2000/svg"><rect x="0" width="8" height="1" rx="0.5" /><rect x="0" y="5" width="8" height="1" rx="0.5" /><rect x="0" y="10" width="8" height="1" rx="0.5" /><rect x="0" y="15" width="8" height="1" rx="0.5" /></svg>')
diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
index 9b7a55bb7b..6f5ac6493b 100644
--- a/tests/e2e/demo-components-compare.spec.ts
+++ b/tests/e2e/demo-components-compare.spec.ts
@@ -5,18 +5,7 @@ import { readdirSync } from 'fs';
 import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from '../helpers';
 
 // Tests that are intentionally broken, but will be fixed in the future
-const IGNORED_TESTS: string[] = [
-  'Accordion',
-  'Dropdown',
-  'Header',
-  'Icon',
-  'Spinner',
-  'Stack',
-  'Toast',
-  'UNSTABLE_Slider',
-  'UNSTABLE_Toggle',
-  'UNSTABLE_Truncate',
-];
+const IGNORED_TESTS: string[] = ['Header', 'Toast', 'UNSTABLE_Toggle'];
 
 interface TestConfig {
   packageDir: string;
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png
index c7b955a8ca..c735dc0e22 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png
index 57789dbf4d..cdd1f187f7 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png
index 03ee508018..5ce6e475e9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png
index 84f591726b..c6fea0ad08 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png
index 5fd92032d4..ce31840481 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png
index 22068a81c0..d8a0e44e6f 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png differ