diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
index 14afce0869..9d8a3b7cd4 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
@@ -72,12 +72,12 @@ const TooltipAdvancedFloating = () => {
 
   return (
     <div className="docs-Stack docs-Stack-stretch">
-      <p className="mb-600">
+      <p className="mb-700">
         Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI library is trying
         to keep the Tooltip in the viewport and it is also flipping, shifting and resizing the Tooltip when it is not
         possible to keep it in the viewport.
       </p>
-      <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} marginBottom="space-600">
+      <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} marginBottom="space-700">
         <Checkbox id="flip" isChecked={flip} label="Enable flipping" onChange={() => setFlip(!flip)} />
         <Checkbox
           id="flip-cross-axis"
@@ -88,7 +88,7 @@ const TooltipAdvancedFloating = () => {
         <Checkbox id="shift" isChecked={shift} label="Enable shifting" onChange={() => setShift(!shift)} />
         <Checkbox id="size" isChecked={size} label="Enable sizing" onChange={() => setSize(!size)} />
       </Grid>
-      <Grid cols={{ mobile: 1, tablet: 2, desktop: 2 }} marginBottom="space-600">
+      <Grid cols={{ mobile: 1, tablet: 2, desktop: 2 }} marginBottom="space-700">
         <Select
           id="advanced-placement"
           name="advanced-placement"
@@ -127,7 +127,7 @@ const TooltipAdvancedFloating = () => {
         </Select>
       </Grid>
       <div
-        className="bg-cover"
+        className="bg-secondary"
         style={{ width: '100%', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
         ref={viewportRef}
       >
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
index 00e9839b6c..a893b8adfa 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -142,7 +142,7 @@ const TooltipPlacements = () => {
           />
         </GridItem>
         <GridItem columnStart={2} rowStart={2}>
-          <div className="mx-auto space-1200">
+          <div className="mx-auto space-1600">
             <Tooltip
               isOpen
               id="tooltip-placement"
@@ -151,7 +151,7 @@ const TooltipPlacements = () => {
               enableFlipping={false}
             >
               <TooltipTrigger elementType="div" UNSAFE_style={{ margin: '5rem auto' }}>
-                <DocsBox UNSAFE_className="px-900 py-900">
+                <DocsBox UNSAFE_className="px-1100 py-1100">
                   Click
                   <br /> the dots!
                 </DocsBox>
diff --git a/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx
index 9ae4fff596..b9cbfa0bc3 100644
--- a/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx
+++ b/packages/web-react/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -86,7 +86,7 @@ const TooltipWithHooks = (args: SpiritTooltipProps) => {
 
   return (
     <div
-      className="bg-cover"
+      className="bg-secondary"
       style={{ width: '40rem', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
       ref={viewportRef}
     >
diff --git a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
index 18e5288a86..58bf2e4cb7 100644
--- a/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
+++ b/packages/web-react/src/components/Tooltip/stories/UncontrolledTooltip.stories.tsx
@@ -79,7 +79,7 @@ const UncontrolledTooltipWithHooks = (args: Omit<SpiritTooltipProps, 'onToggle'>
 
   return (
     <div
-      className="bg-cover"
+      className="bg-secondary"
       style={{ width: '40rem', maxWidth: '100%', height: '30rem', overflow: 'auto' }}
       ref={viewportRef}
     >
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
index c4044cdb1e..66a7026fbc 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
@@ -1,16 +1,16 @@
-<p class="mb-600">
+<p class="mb-700">
     Try scrolling the frame or resizing the window to see how the Tooltip behaves.
     The Floating UI library is trying to keep the Tooltip in the viewport and it is also flipping,
     shifting and resizing the Tooltip when it is not possible to keep it in the viewport.
 </p>
 
-<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 4 } }}" marginBottom="space-600">
+<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 4 } }}" marginBottom="space-700">
     <Checkbox id="my-advanced-flip" label="Enable flipping" isChecked/>
     <Checkbox id="my-advanced-flip-cross-axis" label="Enable flipping cross axis" isChecked/>
     <Checkbox id="my-advanced-shift" label="Enable shifting" isChecked/>
     <Checkbox id="my-advanced-size" label="Enable sizing" isChecked/>
 </Grid>
-<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 2 } }}" marginBottom="space-600">
+<Grid cols="{{ { mobile: 1, tablet: 2, desktop: 2 } }}" marginBottom="space-700">
     <Select id="my-advanced-select" label="Suggested placement">
         <option value="top-start" selected>top-start</option>
         <option value="top">top</option>
@@ -52,7 +52,7 @@
     }
 </style>
 
-<div class="example-viewport bg-cover" id="my-advanced-viewport">
+<div class="example-viewport bg-secondary" id="my-advanced-viewport">
     <div class="example-content" id="my-advanced-content">
         <Tooltip UNSAFE_className="d-inline-block">
             <Button
@@ -67,7 +67,7 @@
                 id="my-advanced-tooltip"
                 placement="top-start"
                 flipFallbackAxisSideDirection="top, right, bottom"
-                isDismissible 
+                isDismissible
                 isOpen
             >
                 This long tooltip is flipping, resizing and shifting to stay in the viewport.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
index f67d8e88af..4f1a899e8d 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -30,8 +30,8 @@
         </GridItem>
         <GridItem columnStart="2" rowStart="2">
 
-            <Tooltip marginX="auto" marginY="space-1200">
-                <DocsBox UNSAFE_className="px-900 py-900">Click<br /> the dots!</DocsBox>
+            <Tooltip marginX="auto" marginY="space-1600">
+                <DocsBox UNSAFE_className="px-1100 py-1100">Click<br /> the dots!</DocsBox>
                 <TooltipPopover id="tooltip-placements-example" placement="bottom" trigger="click" enableFlipping={ false }>
                     <span id="tooltip-placements-example-text">bottom</span>
                 </TooltipPopover>