diff --git a/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx
index 8d73ff1924..99914c846f 100644
--- a/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx
+++ b/packages/web-react/src/components/Grid/demo/GridCustomSpacing.tsx
@@ -3,7 +3,7 @@ import Grid from '../Grid';
 import GridItemFactory from './GridItemFactory';
 
 const GridCustomSpacing = () => (
-  <Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} spacing="space-1000">
+  <Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} spacing="space-1200">
     <GridItemFactory items={4} label="1/2, 1/3, 1/4" />
   </Grid>
 );
diff --git a/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx b/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx
index 2c94e9c8ab..8369e09755 100644
--- a/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx
+++ b/packages/web-react/src/components/Grid/demo/GridNestedGridItem.tsx
@@ -6,7 +6,7 @@ import GridItem from '../GridItem';
 const GridNestedGridItem = () => (
   <Grid>
     <GridItem columnStart={1} columnEnd={{ mobile: 9, tablet: 10 }}>
-      <div className="bg-cover py-400">
+      <div className="bg-cover py-500">
         <Grid>
           <GridItem columnStart={1} columnEnd="span 4">
             <DocsBox size="small">First Nested Content</DocsBox>
diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx
index f493cac23f..61b52549a8 100644
--- a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx
+++ b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomHorizontalSpacing.tsx
@@ -7,8 +7,8 @@ const GridResponsiveCustomHorizontalSpacing = () => (
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingX={{
       mobile: 'space-100',
-      tablet: 'space-400',
-      desktop: 'space-900',
+      tablet: 'space-500',
+      desktop: 'space-1100',
     }}
   >
     <GridItemFactory items={4} label="1/2, 1/3, 1/4" />
diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx
index 2d6df07d7a..a8ef05dabb 100644
--- a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx
+++ b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomSpacing.tsx
@@ -6,13 +6,13 @@ const GridResponsiveCustomSpacing = () => (
   <Grid
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingX={{
-      mobile: 'space-1000',
-      tablet: 'space-900',
-      desktop: 'space-1200',
+      mobile: 'space-1200',
+      tablet: 'space-1100',
+      desktop: 'space-1600',
     }}
     spacingY={{
-      mobile: 'space-800',
-      tablet: 'space-1000',
+      mobile: 'space-1000',
+      tablet: 'space-1200',
       desktop: 'space-0',
     }}
   >
diff --git a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx
index d85adf6b5b..ec97729f5f 100644
--- a/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx
+++ b/packages/web-react/src/components/Grid/demo/GridResponsiveCustomVerticalSpacing.tsx
@@ -7,8 +7,8 @@ const GridResponsiveCustomVerticalSpacing = () => (
     cols={{ mobile: 2, tablet: 3, desktop: 4 }}
     spacingY={{
       mobile: 'space-100',
-      tablet: 'space-400',
-      desktop: 'space-900',
+      tablet: 'space-500',
+      desktop: 'space-1100',
     }}
   >
     <GridItemFactory items={8} label="1/2, 1/3, 1/4" />
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig
index b418a7d07f..194443c23b 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridCustomSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="4" spacing="space-1000">
+<Grid cols="4" spacing="space-1200">
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig
index 946cef5a35..b1a9506235 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridNestedGridItem.twig
@@ -1,6 +1,6 @@
 <Grid>
     <GridItem columnStart="1" columnEnd="{{ { mobile: 9, tablet: 10 } }}">
-        <div class="bg-cover py-400">
+        <div class="bg-cover py-500">
             <Grid>
                 <GridItem columnStart="1" columnEnd="span 4">
                     <DocsBox size="small">First Nested Content</DocsBox>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig
index 57d50c6e42..92fc065bb8 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomHorizontalSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="{{ { mobile: 'space-100', tablet: 'space-400', desktop: 'space-900' } }}">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingX="{{ { mobile: 'space-100', tablet: 'space-500', desktop: 'space-1100' } }}">
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig
index 91e947f8a9..501ab342cb 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomSpacing.twig
@@ -1,7 +1,7 @@
 <Grid
     cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}"
-    spacingX="{{ { mobile: 'space-1000', tablet: 'space-900', desktop: 'space-1200' } }}"
-    spacingY="{{ { mobile: 'space-800', tablet: 'space-1000', desktop: 'space-0' } }}"
+    spacingX="{{ { mobile: 'space-1200', tablet: 'space-1100', desktop: 'space-1600' } }}"
+    spacingY="{{ { mobile: 'space-1000', tablet: 'space-1200', desktop: 'space-0' } }}"
 >
     {% for i in 1..4 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig
index 9d1be5091b..5901d54fff 100644
--- a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig
+++ b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveCustomVerticalSpacing.twig
@@ -1,4 +1,4 @@
-<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-100', tablet: 'space-400', desktop: 'space-900' } }}">
+<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" spacingY="{{ { mobile: 'space-100', tablet: 'space-500', desktop: 'space-1100' } }}">
     {% for i in 1..8 %}
         <DocsBox size="small">1/2, 1/3, 1/4</DocsBox>
     {% endfor %}
diff --git a/packages/web/src/scss/components/Grid/index.html b/packages/web/src/scss/components/Grid/index.html
index dceff82739..be066dbf75 100644
--- a/packages/web/src/scss/components/Grid/index.html
+++ b/packages/web/src/scss/components/Grid/index.html
@@ -76,8 +76,8 @@ <h2 class="docs-Heading">Custom Spacing</h2>
     <div
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
-        --grid-spacing-x: var(--spirit-space-1000);
-        --grid-spacing-y: var(--spirit-space-1000);
+        --grid-spacing-x: var(--spirit-space-1200);
+        --grid-spacing-y: var(--spirit-space-1200);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -96,11 +96,11 @@ <h2 class="docs-Heading">Responsive Custom Spacing</h2>
     <div
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
-        --grid-spacing-x: var(--spirit-space-1000);
-        --grid-spacing-x-tablet: var(--spirit-space-900);
-        --grid-spacing-x-desktop: var(--spirit-space-1200);
-        --grid-spacing-y: var(--spirit-space-800);
-        --grid-spacing-y-tablet: var(--spirit-space-1000);
+        --grid-spacing-x: var(--spirit-space-1200);
+        --grid-spacing-x-tablet: var(--spirit-space-1100);
+        --grid-spacing-x-desktop: var(--spirit-space-1600);
+        --grid-spacing-y: var(--spirit-space-1000);
+        --grid-spacing-y-tablet: var(--spirit-space-1200);
         --grid-spacing-y-desktop: var(--spirit-space-0);
       "
     >
@@ -121,8 +121,8 @@ <h2 class="docs-Heading">Responsive Custom Horizontal Spacing</h2>
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
         --grid-spacing-x: var(--spirit-space-100);
-        --grid-spacing-x-tablet: var(--spirit-space-400);
-        --grid-spacing-x-desktop: var(--spirit-space-900);
+        --grid-spacing-x-tablet: var(--spirit-space-500);
+        --grid-spacing-x-desktop: var(--spirit-space-1100);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -142,8 +142,8 @@ <h2 class="docs-Heading">Responsive Custom Vertical Spacing</h2>
       class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"
       style="
         --grid-spacing-y: var(--spirit-space-100);
-        --grid-spacing-y-tablet: var(--spirit-space-400);
-        --grid-spacing-y-desktop: var(--spirit-space-900);
+        --grid-spacing-y-tablet: var(--spirit-space-500);
+        --grid-spacing-y-desktop: var(--spirit-space-1100);
       "
     >
       <div class="docs-Box docs-Box--small">1/2, 1/3, 1/4</div>
@@ -239,7 +239,7 @@ <h2 class="docs-Heading">Nested Grid with Grid Item</h2>
           --grid-item-column-end-tablet: 10;
         "
       >
-        <div class="bg-cover py-400">
+        <div class="bg-cover py-500">
           <div class="Grid">
             <div
               class="GridItem"