diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 7af6e4f8833..6c2cb91d4d1 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -52,6 +52,90 @@ To opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` cl
 
 More details can be found in our [Styling Knowledge Base](?path=/docs/knowledge-base-styling--docs#scrollbars).
 
+## Spacing
+
+The `spacing` variables of our base package (`@ui5/webcomponents-react-base`) have been removed.
+Most variables can be replaced by applying the corresponding CSS classes from the `@sap-ui/common-css` package to your element, for all others you can find the respective CSS properties and values below.
+
+**Full Documentation of Common CSS classes:**
+
+- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
+- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
+
+### Common CSS substitute classes
+
+<details>
+    <summary>Show</summary>
+
+| Removed Variable                    | Equivalent Common CSS Class   |
+| ----------------------------------- | ----------------------------- |
+| **All Around Margins**              |                               |
+| `sapUiTinyMargin`                   | `.sap-margin-tiny`            |
+| `sapUiSmallMargin`                  | `.sap-margin-small`           |
+| `sapUiMediumMargin`                 | `.sap-margin-medium`          |
+| `sapUiLargeMargin`                  | `.sap-margin-large`           |
+| **Single Side Margins**             |                               |
+| `sapUiTinyMarginTop`                | `.sap-margin-top-tiny`        |
+| `sapUiSmallMarginTop`               | `.sap-margin-top-small`       |
+| `sapUiMediumMarginTop`              | `.sap-margin-top-medium`      |
+| `sapUiLargeMarginTop`               | `.sap-margin-top-large`       |
+| `sapUiTinyMarginBottom`             | `.sap-margin-bottom-tiny`     |
+| `sapUiSmallMarginBottom`            | `.sap-margin-bottom-small`    |
+| `sapUiMediumMarginBottom`           | `.sap-margin-bottom-medium`   |
+| `sapUiLargeMarginBottom`            | `.sap-margin-bottom-large`    |
+| `sapUiTinyMarginBegin`              | `.sap-margin-begin-tiny`      |
+| `sapUiSmallMarginBegin`             | `.sap-margin-begin-small`     |
+| `sapUiMediumMarginBegin`            | `.sap-margin-begin-medium`    |
+| `sapUiLargeMarginBegin`             | `.sap-margin-begin-large`     |
+| `sapUiTinyMarginEnd`                | `.sap-margin-end-tiny`        |
+| `sapUiSmallMarginEnd`               | `.sap-margin-end-small`       |
+| `sapUiMediumMarginEnd`              | `.sap-margin-end-medium`      |
+| `sapUiLargeMarginEnd`               | `.sap-margin-end-large`       |
+| **Horizontal Margins**              |                               |
+| `sapUiTinyMarginBeginEnd`           | `.sap-margin-x-tiny`          |
+| `sapUiSmallMarginBeginEnd`          | `.sap-margin-x-small`         |
+| `sapUiMediumMarginBeginEnd`         | `.sap-margin-x-medium`        |
+| `sapUiLargeMarginBeginEnd`          | `.sap-margin-x-large`         |
+| **Vertical Margins**                |                               |
+| `sapUiTinyMarginTopBottom`          | `.sap-margin-y-tiny`          |
+| `sapUiSmallMarginBeginEnd`          | `.sap-margin-y-small`         |
+| `sapUiMediumMarginTopBottom`        | `.sap-margin-y-medium`        |
+| `sapUiLargeMarginTopBottom`         | `.sap-margin-y-large`         |
+| **Responsive Margins**              |                               |
+| `sapUiResponsiveMargin`             | `.sap-margin-responsive`      |
+| **Negative Margins**                |                               |
+| `sapUiTinyNegativeMarginBeginEnd`   | `.sap-margin-tiny-negative`   |
+| `sapUiSmallNegativeMarginBeginEnd`  | `.sap-margin-small-negative`  |
+| `sapUiMediumNegativeMarginBeginEnd` | `.sap-margin-medium-negative` |
+| `sapUiLargeNegativeMarginBeginEnd`  | `.sap-margin-large-negative`  |
+| **All Around Padding**              |                               |
+| `sapUiContentPadding`               | `.sap-padding`                |
+| **Responsive Paddings**             |                               |
+| `sapUiResponsiveContentPadding`     | `.sap-padding-responsive`     |
+| **Horizontal Paddings**             |                               |
+| `sapUiTinyPaddingBeginEnd`          | `.sap-padding-x-tiny`         |
+| `sapUiSmallPaddingBeginEnd`         | `.sap-padding-x-small`        |
+| `sapUiMediumPaddingBeginEnd`        | `.sap-padding-x-medium`       |
+| `sapUiLargePaddingBeginEnd`         | `.sap-padding-x-large`        |
+| **No Padding**                      |                               |
+| `sapUiNoContentPadding`             | `.sap-padding-none`           |
+
+</details>
+
+### Removed variables without substitute
+
+<details>
+    <summary>Show</summary>
+
+| Removed Variable      | Property and Value             |
+| --------------------- | ------------------------------ |
+| `sapUiNoMargin`       | `margin: 0 !important;`        |
+| `sapUiNoMarginTop`    | `margin-top: 0 !important;`    |
+| `sapUiNoMarginBottom` | `margin-bottom: 0 !important;` |
+| `sapUiForceWidthAuto` | `width: auto !important;`      |
+
+</details>
+
 ## Removed hooks
 
 ### `useResponsiveContentPadding`
diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx
index 2c42cad3251..abbd4e99aac 100644
--- a/docs/knowledge-base/CommonCSS.mdx
+++ b/docs/knowledge-base/CommonCSS.mdx
@@ -38,9 +38,26 @@ import '@sap-ui/common-css/dist/sap-content-paddings.css';
 
 You can apply a dynamic content padding for your element by applying the following classes to your HTML:
 
-```html
-<div class="sap-container-type-inline-size">
-  <div class="sap-content-paddings-container">I will have a responsive content padding</div>
+```jsx
+<div className="sap-container-type-inline-size">
+  <div className="sap-content-paddings-container">I will have a responsive content padding</div>
+</div>
+```
+
+## Margins & Paddings
+
+Common CSS is offering classes that you can use to create some spacing between elements.
+
+**Full Documentation:**
+
+- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
+- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
+
+```jsx
+<div className="sap-padding-x-small">
+  <button className="sap-margin-begin-small">Start Button</button>
+  <button className="sap-margin-x-small">Mid Button</button>
+  <button className="sap-margin-end-small">End Button</button>
 </div>
 ```
 
diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx
index 38f8e4802ee..ef6b9170ecc 100644
--- a/docs/knowledge-base/Public-Utils.mdx
+++ b/docs/knowledge-base/Public-Utils.mdx
@@ -81,14 +81,6 @@ background color for your current theme.
 
 <ThemeableCSSVars />
 
-## Spacing
-
-<Source code={`import { spacing } from '@ui5/webcomponents-react-base';`} />
-
-The `spacing` file is containing all standard margins and paddings that are used in SAP Applications.
-You can explore them via the [UI5 Standard Margins Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.StandardMargins)
-and the [UI5 Standard Paddings Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.ContainerPadding).
-
 ## Hooks
 
 ### `useI18nBundle`
diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
index 3b8d086d7aa..3ac13b0e145 100644
--- a/packages/base/src/index.ts
+++ b/packages/base/src/index.ts
@@ -2,11 +2,10 @@ import { getI18nContext, I18nContext } from './context/I18nContext.js';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
 import { StyleStore } from './stores/StyleStore.js';
-import * as spacing from './styling/spacing.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
 
 export * from './styling/CssSizeVariables.js';
 export * from './utils/index.js';
 export * from './hooks/index.js';
 
-export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };
+export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks };
diff --git a/packages/base/src/styling/spacing.ts b/packages/base/src/styling/spacing.ts
deleted file mode 100644
index 20498b8ea31..00000000000
--- a/packages/base/src/styling/spacing.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-const TINY_SPACE = '0.5rem';
-const SMALL_SPACE = '1rem';
-const MEDIUM_SPACE = '2rem';
-const LARGE_SPACE = '3rem';
-
-/*
- * ###################################################
- * Margin Classes
- * ###################################################
- */
-
-// All Around Margins
-export const sapUiTinyMargin = {
-  margin: TINY_SPACE
-};
-export const sapUiSmallMargin = {
-  margin: SMALL_SPACE
-};
-export const sapUiMediumMargin = {
-  margin: MEDIUM_SPACE
-};
-export const sapUiLargeMargin = {
-  margin: LARGE_SPACE
-};
-
-// Single Side Margins
-// Tiny
-export const sapUiTinyMarginTop = {
-  marginTop: TINY_SPACE
-};
-export const sapUiTinyMarginBottom = {
-  marginBottom: TINY_SPACE
-};
-export const sapUiTinyMarginBegin = {
-  marginLeft: TINY_SPACE
-};
-export const sapUiTinyMarginEnd = {
-  marginRight: TINY_SPACE
-};
-
-// Small
-export const sapUiSmallMarginTop = {
-  marginTop: SMALL_SPACE
-};
-export const sapUiSmallMarginBottom = {
-  marginBottom: SMALL_SPACE
-};
-export const sapUiSmallMarginBegin = {
-  marginLeft: SMALL_SPACE
-};
-export const sapUiSmallMarginEnd = {
-  marginRight: SMALL_SPACE
-};
-
-// Medium
-export const sapUiMediumMarginTop = {
-  marginTop: MEDIUM_SPACE
-};
-export const sapUiMediumMarginBottom = {
-  marginBottom: MEDIUM_SPACE
-};
-export const sapUiMediumMarginBegin = {
-  marginLeft: MEDIUM_SPACE
-};
-export const sapUiMediumMarginEnd = {
-  marginRight: MEDIUM_SPACE
-};
-
-// Large
-export const sapUiLargeMarginTop = {
-  marginTop: LARGE_SPACE
-};
-export const sapUiLargeMarginBottom = {
-  marginBottom: LARGE_SPACE
-};
-export const sapUiLargeMarginBegin = {
-  marginLeft: LARGE_SPACE
-};
-export const sapUiLargeMarginEnd = {
-  marginRight: LARGE_SPACE
-};
-
-// Two Sided Margin
-// Tiny
-export const sapUiTinyMarginBeginEnd = {
-  ...sapUiTinyMarginBegin,
-  ...sapUiTinyMarginEnd
-};
-export const sapUiTinyMarginTopBottom = {
-  ...sapUiTinyMarginTop,
-  ...sapUiTinyMarginBottom
-};
-
-// Small
-export const sapUiSmallMarginBeginEnd = {
-  ...sapUiSmallMarginBegin,
-  ...sapUiSmallMarginEnd
-};
-export const sapUiSmallMarginTopBottom = {
-  ...sapUiSmallMarginTop,
-  ...sapUiSmallMarginBottom
-};
-
-// Medium
-export const sapUiMediumMarginBeginEnd = {
-  ...sapUiMediumMarginBegin,
-  ...sapUiMediumMarginEnd
-};
-export const sapUiMediumMarginTopBottom = {
-  ...sapUiMediumMarginTop,
-  ...sapUiMediumMarginBottom
-};
-
-// Large
-export const sapUiLargeMarginBeginEnd = {
-  ...sapUiLargeMarginBegin,
-  ...sapUiLargeMarginEnd
-};
-export const sapUiLargeMarginTopBottom = {
-  ...sapUiLargeMarginTop,
-  ...sapUiLargeMarginBottom
-};
-
-// Remove Margins
-export const sapUiNoMargin = {
-  margin: '0 !important'
-};
-
-// Remove Single Side Margins
-export const sapUiNoMarginTop = {
-  marginTop: '0 !important'
-};
-export const sapUiNoMarginBottom = {
-  marginBottom: '0 !important'
-};
-export const sapUiNoMarginBegin = {
-  marginBegin: '0 !important'
-};
-export const sapUiNoMarginEnd = {
-  marginEnd: '0 !important'
-};
-
-// Force Auto Width
-export const sapUiForceWidthAuto = {
-  width: 'auto !important'
-};
-
-export const sapUiResponsiveMargin = {
-  '@media(max-width:599px)': {
-    margin: '0 0 1rem 0'
-  },
-  '@media (min-width:600px) and (max-width:1023px)': {
-    margin: '1rem !important'
-  },
-  '@media (min-width:1024px) and (max-width: 1439px)': {
-    margin: '1rem 2rem !important'
-  },
-  '@media (min-width:1440px)': {
-    margin: '1rem 3rem !important'
-  }
-};
-
-export const sapUiTinyNegativeMarginBeginEnd = {
-  margin: '0 -0.5rem !important'
-};
-
-export const sapUiSmallNegativeMarginBeginEnd = {
-  margin: '0 -1rem !important'
-};
-
-export const sapUiMediumNegativeMarginBeginEnd = {
-  margin: '0 -2rem !important'
-};
-
-export const sapUiLargeNegativeMarginBeginEnd = {
-  margin: '0 -3rem !important'
-};
-
-/*
- * ###################################################
- * Padding Classes
- * ###################################################
- */
-
-export const sapUiNoContentPadding = {
-  padding: '0 !important'
-};
-
-export const sapUiContentPadding = {
-  padding: '1rem'
-};
-
-// Two Sided Padding
-export const sapUiTinyPaddingBeginEnd = {
-  paddingLeft: '0.5rem !important',
-  paddingRight: '0.5rem !important'
-};
-
-export const sapUiSmallPaddingBeginEnd = {
-  paddingLeft: '1rem !important',
-  paddingRight: '1rem !important'
-};
-
-export const sapUiMediumPaddingBeginEnd = {
-  paddingLeft: '2rem !important',
-  paddingRight: '2rem !important'
-};
-
-export const sapUiLargePaddingBeginEnd = {
-  paddingLeft: '3rem !important',
-  paddingRight: '3rem !important'
-};
-
-export const sapUiResponsiveContentPadding = {
-  '@media(max-width:599px)': {
-    paddingLeft: '1rem',
-    paddingRight: '1rem'
-  },
-  '@media (min-width:600px) and (max-width:1023px)': {
-    paddingLeft: '2rem',
-    paddingRight: '2rem'
-  },
-  '@media (min-width:1024px) and (max-width: 1439px)': {
-    paddingLeft: '2rem',
-    paddingRight: '2rem'
-  },
-  '@media (min-width:1440px)': {
-    paddingLeft: '3rem',
-    paddingRight: '3rem'
-  }
-};
diff --git a/packages/main/src/components/Loader/Loader.stories.tsx b/packages/main/src/components/Loader/Loader.stories.tsx
index 3c883309f15..3b9d0b7b981 100644
--- a/packages/main/src/components/Loader/Loader.stories.tsx
+++ b/packages/main/src/components/Loader/Loader.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { useEffect, useRef, useState } from 'react';
 import { FlexBoxDirection, LoaderType } from '../../enums/index.js';
 import { Card } from '../../webComponents/Card/index.js';
@@ -62,7 +61,7 @@ export const WithCard: Story = {
       >
         <FlexBox direction={FlexBoxDirection.Column}>
           {loading && <Loader {...args} />}
-          <Text style={spacing.sapUiContentPadding}>{text}</Text>
+          <Text style={{ padding: '1rem' }}>{text}</Text>
         </FlexBox>
       </Card>
     );
diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
index 99933cfead7..31356888e04 100644
--- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
+++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { useState } from 'react';
 import { FlexBox } from '../../components/FlexBox';
 import { Toolbar } from '../../components/Toolbar';
@@ -400,7 +399,7 @@ export const WithDifferentColumns: Story = {
                 />
               }
             >
-              <div style={spacing.sapUiContentPadding}>
+              <div style={{ padding: '1rem' }}>
                 <Text>
                   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                   et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut