diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
index 14afce0869..5afd2bb83c 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"
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-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
index c4044cdb1e..0679811117 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>
@@ -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>