diff --git a/.storybook/components/Utilities/SpacingMarginUtilities.js b/.storybook/components/Utilities/SpacingMarginUtilities.js
index 02a19ca79..b989d4021 100755
--- a/.storybook/components/Utilities/SpacingMarginUtilities.js
+++ b/.storybook/components/Utilities/SpacingMarginUtilities.js
@@ -31,9 +31,18 @@ export class SpacingMarginUtilities extends Component {
 
         <Hr />
 
-        <code>u-margin-lg</code>
+        <code>u-margin-left-lg</code>
         <div className="sg-demo-container-box">
-          <div className="u-margin-lg sg-demo-box-2">Large margin</div>
+          <div className="u-margin-left-lg sg-demo-box-2">
+            Margin left large
+          </div>
+        </div>
+
+        <Hr />
+
+        <code>u-margin-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-xl sg-demo-box-2">Large margin</div>
         </div>
 
         <Hr />
@@ -124,6 +133,15 @@ export class SpacingMarginUtilities extends Component {
 
         <Hr />
 
+        <code>u-margin-right-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-right-xl sg-demo-box-2">
+            Margin right large
+          </div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>margin-bottom</code>
         </h2>
@@ -167,7 +185,7 @@ export class SpacingMarginUtilities extends Component {
         <code>u-margin-bottom-xl</code>
         <div className="sg-demo-container-box">
           <div className="u-margin-bottom-xl sg-demo-box-2">
-            Margin bottom xl
+            Margin bottom large
           </div>
         </div>
 
@@ -179,6 +197,14 @@ export class SpacingMarginUtilities extends Component {
             Margin bottom xxl
           </div>
         </div>
+        <Hr />
+
+        <code>u-margin-bottom-xxxl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-bottom-xxxl sg-demo-box-2">
+            Margin bottom xxxl
+          </div>
+        </div>
 
         <Hr />
 
@@ -219,6 +245,15 @@ export class SpacingMarginUtilities extends Component {
             Margin left large
           </div>
         </div>
+
+        <Hr />
+
+        <code>u-margin-left-xl</code>
+        <div className="sg-demo-container-box">
+          <div className="u-margin-left-xl sg-demo-box-2">
+            Margin left large
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/.storybook/components/Utilities/SpacingPaddingUtilities.js b/.storybook/components/Utilities/SpacingPaddingUtilities.js
index 5cadd807b..3d8ca70c2 100755
--- a/.storybook/components/Utilities/SpacingPaddingUtilities.js
+++ b/.storybook/components/Utilities/SpacingPaddingUtilities.js
@@ -38,6 +38,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-xl</code>
+        <div className="u-padding-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">XL padding</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-top</code>
         </h2>
@@ -70,6 +77,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-top-xl</code>
+        <div className="u-padding-top-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding top XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-right</code>
         </h2>
@@ -102,6 +116,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-right-xl</code>
+        <div className="u-padding-right-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding right XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-bottom</code>
         </h2>
@@ -134,6 +155,13 @@ export class SpacingPaddingUtilities extends Component {
 
         <Hr />
 
+        <code>u-padding-bottom-xl</code>
+        <div className="u-padding-bottom-xl sg-demo-container-box">
+          <div className=" sg-demo-box-2">Padding bottom XL</div>
+        </div>
+
+        <Hr />
+
         <h2>
           <code>padding-left</code>
         </h2>
@@ -161,7 +189,14 @@ export class SpacingPaddingUtilities extends Component {
 
         <code>u-padding-left-lg</code>
         <div className="u-padding-left-lg sg-demo-container-box">
-          <div className="sg-demo-box-2">Padding left large</div>
+          <div className=" sg-demo-box-2">Padding left large</div>
+        </div>
+
+        <Hr />
+
+        <code>u-padding-left-xl</code>
+        <div className="u-padding-left-xl sg-demo-container-box">
+          <div className="sg-demo-box-2">Padding left XL</div>
         </div>
       </div>
     );
diff --git a/.storybook/pages/Cad/Cad.tsx b/.storybook/pages/Cad/Cad.tsx
index 158e75997..c43a8084b 100644
--- a/.storybook/pages/Cad/Cad.tsx
+++ b/.storybook/pages/Cad/Cad.tsx
@@ -297,10 +297,10 @@ export const Cad = () => (
       <Layout variant="67-33">
         <LayoutSection region="main">
           <Panel>
-            <Heading as="h2" className="u-margin-bottom-lg" size="headline-sm">
+            <Heading as="h2" className="u-margin-bottom-md" size="headline-sm">
               Select projects for your History 6 plan
             </Heading>
-            <Text as="div" className="u-margin-bottom-lg">
+            <Text as="div" className="u-margin-bottom-xl">
               <p>
                 Make a plan so that you can stay connected to learning
                 objectives even as changes occur throughout the year.
@@ -318,7 +318,7 @@ export const Cad = () => (
                   itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
                   emptyContent: (
                     <>
-                      <Text as="div" className="u-margin-bottom-lg">
+                      <Text as="div" className="u-margin-bottom-xl">
                         <p>
                           There are no more available projects to create your
                           course plan
@@ -349,7 +349,7 @@ export const Cad = () => (
                   itemIds: [],
                   emptyContent: (
                     <>
-                      <Text as="div" className="u-margin-bottom-lg">
+                      <Text as="div" className="u-margin-bottom-xl">
                         <p>
                           Drag in available projects to build your course plan
                         </p>
diff --git a/.storybook/pages/CadStep1/CadStep1.tsx b/.storybook/pages/CadStep1/CadStep1.tsx
index 2598725b7..d79fdf113 100644
--- a/.storybook/pages/CadStep1/CadStep1.tsx
+++ b/.storybook/pages/CadStep1/CadStep1.tsx
@@ -50,7 +50,7 @@ export const CadStep1 = () => (
     <LayoutContainer>
       <Layout gap="lg-xl" variant="50-50">
         <LayoutSection region="main">
-          <Grid className="u-margin-bottom-lg" variant="1-2-1up">
+          <Grid className="u-margin-bottom-xl" variant="1-2-1up">
             <img alt="compass vignette" src={CompassCenter} />
             <Heading as="h2" size="headline-lg">
               Let&apos;s start planning, Amy Frankle.
@@ -62,7 +62,7 @@ export const CadStep1 = () => (
           </Text>
         </LayoutSection>
         <LayoutSection region="main">
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <h3>Tell us how often your course meets.</h3>
             <p>
               We’ll adjust project plans based on your schedule. This way, you
@@ -78,7 +78,7 @@ export const CadStep1 = () => (
             How many times per week do you have class?
           </Text>
           <TextField
-            className="u-margin-bottom-lg"
+            className="u-margin-bottom-xl"
             hideLabel
             label="times per week"
             min={0}
@@ -89,7 +89,7 @@ export const CadStep1 = () => (
             How many minutes is each class?
           </Text>
           <TextField
-            className="u-margin-bottom-lg"
+            className="u-margin-bottom-xl"
             hideLabel
             label="minutes"
             min={0}
diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx
index b363e8679..6260be338 100644
--- a/.storybook/pages/ProjectOverview/ProjectOverview.tsx
+++ b/.storybook/pages/ProjectOverview/ProjectOverview.tsx
@@ -39,7 +39,7 @@ export const ProjectOverview = () => {
       />
       <ListDetail>
         <ListDetailPanel title="Overview" variant="success">
-          <Heading as="h2" className="u-margin-bottom-lg" size="headline-lg">
+          <Heading as="h2" className="u-margin-bottom-xl" size="headline-lg">
             What is this Project About?
           </Heading>
           <Text size="lg">
@@ -48,13 +48,13 @@ export const ProjectOverview = () => {
             mattis sem turpis id dictum. Volutpat ornare turpis ultrices augue
             bibendum pellentesque. Habitasse.
           </Text>
-          <Button className="u-margin-bottom-lg" variant="link">
+          <Button className="u-margin-bottom-xl" variant="link">
             See More
           </Button>
           <Heading as="h3" className="u-margin-bottom-sm" size="title-md">
             Essential Questions
           </Heading>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <ul>
               <li>How are structures in the body organized?</li>
               <li>
@@ -68,7 +68,7 @@ export const ProjectOverview = () => {
           <Heading as="h3" className="u-margin-bottom-sm" size="title-md">
             Key Take Aways
           </Heading>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <ol>
               <li>
                 Groups of specialized cells make up organs and body systems,
diff --git a/docs/CODE_GUIDELINES.md b/docs/CODE_GUIDELINES.md
index a1c2655f7..e009a7f28 100644
--- a/docs/CODE_GUIDELINES.md
+++ b/docs/CODE_GUIDELINES.md
@@ -249,7 +249,7 @@ import { EdsThemeColorUtilitySuccessForeground } from 'src/tokens-dist/ts/colors
 
 ## Utility classes <a name="utility-classes"></a>
 
-EDS provides a number of utility classes (e.g. `u-margin-bottom-lg` and `u-padding-none`) that can be appended to components (e.g. `<TableCell className="u-padding-none">`) in order to achieve certain style results. Utility classes provide an additional layer to help "massage" components into place without having to overwhelm component styles with too many style variants.
+EDS provides a number of utility classes (e.g. `u-margin-bottom-xl` and `u-padding-none`) that can be appended to components (e.g. `<TableCell className="u-padding-none">`) in order to achieve certain style results. Utility classes provide an additional layer to help "massage" components into place without having to overwhelm component styles with too many style variants.
 
 - Utility classes can be found in `src/components/Utilities`
 - Utility classes use the `!important` declaration to override any existing component styles
diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
index b1171b549..af0a6e734 100644
--- a/src/components/DragDrop/DragDrop.stories.tsx
+++ b/src/components/DragDrop/DragDrop.stories.tsx
@@ -95,7 +95,7 @@ Default.args = {
       itemIds: [],
       emptyContent: (
         <>
-          <Text as="div" className="u-margin-bottom-lg">
+          <Text as="div" className="u-margin-bottom-xl">
             <p>Drag in available projects to build your couse plan</p>
           </Text>
           <svg
diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap
index 92779f194..ceaad507e 100644
--- a/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap
+++ b/src/components/DragDrop/__snapshots__/DragDrop.test.tsx.snap
@@ -252,7 +252,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
           data-rbd-droppable-id="container-2"
         >
           <div
-            class="layout-linelength-container text text--body text-passage text-passage--body u-margin-bottom-lg"
+            class="layout-linelength-container text text--body text-passage text-passage--body u-margin-bottom-xl"
           >
             <p>
               Drag in available projects to build your couse plan
diff --git a/src/components/Utilities/Spacing.css b/src/components/Utilities/Spacing.css
index 4f1bb0e8f..c2fe5549d 100644
--- a/src/components/Utilities/Spacing.css
+++ b/src/components/Utilities/Spacing.css
@@ -30,9 +30,17 @@
 
 /**
  * Margin large
- * 1) Forces margin to 2rem
+ * 1) Forces margin to 1.5rem
  */
 .u-margin-lg {
+  margin: var(--eds-size-3) !important;
+}
+
+/**
+ * Margin xl
+ * 1) Forces margin to 2rem
+ */
+.u-margin-xl {
   margin: var(--eds-size-4) !important;
 }
 
@@ -62,25 +70,33 @@
 
 /**
  * Margin top large
- * 1) Forces margin top to 2rem
+ * 1) Forces margin top to 1.5rem
  */
 .u-margin-top-lg {
-  margin-top: var(--eds-size-4) !important;
+  margin-top: var(--eds-size-3) !important;
 }
 
 /**
  * Margin top xl
- * 1) Forces margin top to 4rem
+ * 1) Forces margin top to 2rem
  */
 .u-margin-top-xl {
+  margin-top: var(--eds-size-4) !important;
+}
+
+/**
+ * Margin top xxl
+ * 1) Forces margin top to 3rem
+ */
+.u-margin-top-xxl {
   margin-top: var(--eds-size-6) !important;
 }
 
 /**
- * Margin bottom XXL
+ * Margin bottom xxxL
  * 1) Forces bottom margin to 6rem
  */
-.u-margin-top-xxl {
+.u-margin-top-xxxl {
   margin-top: var(--eds-size-12) !important;
 }
 
@@ -110,9 +126,17 @@
 
 /**
  * Margin right large
- * 1) Forces right margin to 2rem
+ * 1) Forces margin right to 1.5rem
  */
 .u-margin-right-lg {
+  margin-right: var(--eds-size-3) !important;
+}
+
+/**
+ * Margin right xl
+ * 1) Forces right margin to 2rem
+ */
+.u-margin-right-xl {
   margin-right: var(--eds-size-4) !important;
 }
 
@@ -142,9 +166,17 @@
 
 /**
  * Margin bottom large
- * 1) Forces bottom margin to 2rem
+ * 1) Forces margin bottom to 1.5rem
  */
 .u-margin-bottom-lg {
+  margin-bottom: var(--eds-size-3) !important;
+}
+
+/**
+ * Margin bottom xl
+ * 1) Forces bottom margin to 2rem
+ */
+.u-margin-bottom-xl {
   margin-bottom: var(--eds-size-4) !important;
 }
 
@@ -152,7 +184,7 @@
  * Margin bottom extra large
  * 1) Forces bottom margin to 3rem
  */
-.u-margin-bottom-xl {
+.u-margin-bottom-xxl {
   margin-bottom: var(--eds-size-6) !important;
 }
 
@@ -160,7 +192,7 @@
  * Margin bottom XXL
  * 1) Forces bottom margin to 6rem
  */
-.u-margin-bottom-xxl {
+.u-margin-bottom-xxxl {
   margin-bottom: var(--eds-size-12) !important;
 }
 
@@ -190,18 +222,18 @@
 
 /**
  * Margin left large
- * 1) Forces left margin to 2rem
+ * 1) Forces left margin to 1.5rem
  */
 .u-margin-left-lg {
-  margin-left: var(--eds-size-4) !important;
+  margin-left: var(--eds-size-3) !important;
 }
 
 /**
  * Margin left xl
- * 1) Forces margin left to 4rem
+ * 1) Forces left margin to 2rem
  */
 .u-margin-left-xl {
-  margin-left: var(--eds-size-8) !important;
+  margin-left: var(--eds-size-4) !important;
 }
 
 /*------------------------------------*\
@@ -233,10 +265,18 @@
 }
 
 /**
- * Padding large
- * 1) Forces padding to 2rem
+ * Padding
+ * 1) Forces padding to 1.5rem
  */
 .u-padding-lg {
+  padding: var(--eds-size-3) !important;
+}
+
+/**
+ * Padding xl
+ * 1) Forces padding to 2rem
+ */
+.u-padding-xl {
   padding: var(--eds-size-4) !important;
 }
 
@@ -266,9 +306,17 @@
 
 /**
  * Padding top large
- * 1) Forces padding top to 2rem
+ * 1) Forces padding top to 1.5rem
  */
 .u-padding-top-lg {
+  padding: var(--eds-size-3) !important;
+}
+
+/**
+ * Padding top xl
+ * 1) Forces padding top to 2rem
+ */
+.u-padding-top-xl {
   padding-top: var(--eds-size-4) !important;
 }
 
@@ -298,9 +346,17 @@
 
 /**
  * Padding right large
- * 1) Forces right padding to 2rem
+ * 1) Forces padding right to 1.5rem
  */
 .u-padding-right-lg {
+  padding: var(--eds-size-3) !important;
+}
+
+/**
+ * Padding right xl
+ * 1) Forces right padding to 2rem
+ */
+.u-padding-right-xl {
   padding-right: var(--eds-size-4) !important;
 }
 
@@ -330,9 +386,17 @@
 
 /**
  * Padding bottom large
- * 1) Forces bottom padding to 2rem
+ * 1) Forces bottom padding to 1.5rem
  */
 .u-padding-bottom-lg {
+  padding-bottom: var(--eds-size-3) !important;
+}
+
+/**
+ * Padding bottom xl
+ * 1) Forces bottom padding to 2rem
+ */
+.u-padding-bottom-xl {
   padding-bottom: var(--eds-size-4) !important;
 }
 
@@ -362,8 +426,16 @@
 
 /**
  * Padding left large
- * 1) Forces left padding to 2rem
+ * 1) Forces left padding to 1.5rem
  */
 .u-padding-left-lg {
+  padding-left: var(--eds-size-3) !important;
+}
+
+/**
+ * Padding left xl
+ * 1) Forces left padding to 2rem
+ */
+.u-padding-left-xl {
   padding-left: var(--eds-size-4) !important;
 }
diff --git a/src/upcoming-components/Hero/Hero.stories.tsx b/src/upcoming-components/Hero/Hero.stories.tsx
index 2932efff1..da26ef174 100644
--- a/src/upcoming-components/Hero/Hero.stories.tsx
+++ b/src/upcoming-components/Hero/Hero.stories.tsx
@@ -17,7 +17,7 @@ export default {
 const Template: Story<Props> = (args) => (
   <Hero {...args}>
     <Heading size="h1">Hero title</Heading>
-    <Text className="u-margin-top-lg">This is the hero description</Text>
+    <Text className="u-margin-top-xl">This is the hero description</Text>
   </Hero>
 );