diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
index 350c208f27..450e500320 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size }>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isSquare>
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
index 15c36974bb..6cb57eb692 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size } isDisabled>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isDisabled isSquare>
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
index d59f8c8b88..cfa1908f58 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </Button>
                     <Button color={ color } size={ size } isLoading>
-                        <Icon name="hamburger" UNSAFE_className="mr-400" />
+                        <Icon name="hamburger" marginRight="space-400" />
                         Menu
                     </Button>
                     <Button color={ color } size={ size } isLoading isSquare>
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
index 9fe123483a..3d02577247 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#">
-                        <Icon name="link" UNSAFE_className="mr-400" />
+                        <Icon name="link" marginRight="space-400" />
                         Menu
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isSquare>
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
index a9c62b0871..f93abe8f72 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -11,7 +11,7 @@
                         Button {{ color }}
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled>
-                        <Icon name="link" UNSAFE_className="mr-400" />
+                        <Icon name="link" marginRight="space-400" />
                         Menu
                     </ButtonLink>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled isSquare>
diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig
index 86beec8f57..2f4e07135d 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownPlacements.twig
@@ -1,5 +1,5 @@
 <form autocomplete="off">
-    <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 40rem;">
+    <Grid cols="3" marginX="auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 40rem;">
         <GridItem columnStart="2" rowStart="1">
 
             <Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left"/>
diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig
index d948bb14c5..ef60a8a37a 100644
--- a/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig
+++ b/packages/web-twig/src/Resources/components/Header/stories/HeaderSimpleTransparent.twig
@@ -4,6 +4,6 @@
         {% include '@components/Header/stories/_partials/SpiritLogo.twig' %}
     </Header>
 
-    <Heading elementType="div" size="large" UNSAFE_className="text-center mb-1200">Example Cover</Heading>
+    <Heading elementType="div" size="large" marginBottom="space-1200" UNSAFE_className="text-center">Example Cover</Heading>
 
 </div>
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
index ae7515cdf8..befaa23d09 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -28,9 +28,9 @@
             <!-- Footer alignment demo: start -->
             <form onchange="setFooterAlignment(event, '#example-basic .ModalFooter')" class="d-none d-tablet-block">
                 <div>Footer alignment (from tablet up):</div>
-                <Radio id="footer-alignment-left" UNSAFE_className="mr-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
-                <Radio id="footer-alignment-center" UNSAFE_className="mr-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
-                <Radio id="footer-alignment-right" UNSAFE_className="mr-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
+                <Radio id="footer-alignment-left" marginRight="space-600" label="Left" value="left" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-center" marginRight="space-600" label="Center" value="center" name="footer-alignment" autocomplete="off" />
+                <Radio id="footer-alignment-right" marginRight="space-600" label="Right" value="right" name="footer-alignment" autocomplete="off" isChecked />
             </form>
             <form class="d-tablet-none">
                 <Checkbox id="expand-on-mobile" label="Expand on mobile" value="right" onchange="toggleExpandOnMobile('#example-basic .ModalDialog')" autocomplete="off" isChecked />
@@ -70,7 +70,7 @@
         <ModalBody>
 
             <!-- Content: start -->
-            <TextField UNSAFE_className="mb-400" label="Label" id="textfield" placeholder="TextField" />
+            <TextField marginBottom="space-400" label="Label" id="textfield" placeholder="TextField" />
             <p>
                 The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
             </p>
diff --git a/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig b/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig
index 728716b25f..34f256cb02 100644
--- a/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig
+++ b/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewHorizontalBreakout.twig
@@ -4,7 +4,7 @@
         direction="horizontal"
         data-spirit-toggle="scrollView"
     >
-        <Grid cols="4" UNSAFE_className="mb-700" UNSAFE_style="padding-inline: var(--container-padding-inline)">
+        <Grid cols="4" marginBottom="space-700" UNSAFE_style="padding-inline: var(--container-padding-inline)">
             {% for i in 1..4 %}
                 <DocsBox size="small" UNSAFE_style="width: 20rem; aspect-ratio: 2/1">1/4</DocsBox>
             {% endfor %}
diff --git a/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig b/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig
index 30fe5c40ff..490d73b604 100644
--- a/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig
+++ b/packages/web-twig/src/Resources/components/ScrollView/stories/ScrollViewOverflowDecorators.twig
@@ -15,7 +15,7 @@
     direction="horizontal"
     overflowDecorators="borders"
     data-spirit-toggle="scrollView"
-    UNSAFE_className="mb-1000"
+    marginBottom="space-1000"
 >
     <p class="py-700" style="white-space: nowrap">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
index 188feaabb9..75715dad7c 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig
@@ -1,5 +1,5 @@
 <div>
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" UNSAFE_className="TooltipTarget">
             Tooltip on top
         </ButtonLink>
@@ -8,7 +8,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" UNSAFE_className="TooltipTarget">
             Tooltip on right
         </ButtonLink>
@@ -17,7 +17,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" UNSAFE_className="TooltipTarget">
             Tooltip on bottom
         </ButtonLink>
@@ -26,7 +26,7 @@
         </Tooltip>
     </TooltipWrapper>
 
-    <TooltipWrapper UNSAFE_className="d-inline-block mr-600 mb-600">
+    <TooltipWrapper marginRight="space-600" marginBottom="space-600" UNSAFE_className="d-inline-block">
         <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" UNSAFE_className="TooltipTarget">
             Tooltip on left
         </ButtonLink>
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 dcffbda99e..646d55296a 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -1,5 +1,5 @@
 <form autocomplete="off">
-    <Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
+    <Grid cols="3" marginX="auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
         <GridItem columnStart="2" rowStart="1">
 
             <Radio name="placement" isLabelHidden value="top-start" id="placement_top_start" label="top-left"/>
diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig
index 5d0660d350..b306d1e343 100644
--- a/packages/web-twig/src/Resources/icons/Icons.stories.twig
+++ b/packages/web-twig/src/Resources/icons/Icons.stories.twig
@@ -10,7 +10,7 @@
                 <li class="mb-600">
                     <Icon name={{ icon }} />
 
-                    <Text UNSAFE_className="mt-500" emphasis="bold">{{ icon }}</Text>
+                    <Text marginTop="space-500" emphasis="bold">{{ icon }}</Text>
                 </li>
             {% endfor %}