diff --git a/services/app/source/06-utility/index.css b/services/app/source/06-utility/index.css
index 8f9256f7..8b79542a 100644
--- a/services/app/source/06-utility/index.css
+++ b/services/app/source/06-utility/index.css
@@ -1,4 +1,5 @@
 @layer utility {
   @import 'accessibility.css';
   @import 'alignment.css';
+  @import 'spacing.css';
 }
diff --git a/services/app/source/06-utility/spacing.css b/services/app/source/06-utility/spacing.css
new file mode 100644
index 00000000..0f43c558
--- /dev/null
+++ b/services/app/source/06-utility/spacing.css
@@ -0,0 +1,25 @@
+@each $value in (0, 0-5, 1, 1-5, 2, 2-5, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15) {
+  .u-spacing-block-$(value) {
+    margin-block: var(--spacing-#{$value});
+  }
+
+  .u-spacing-block-start-$(value) {
+    margin-block-start: var(--spacing-#{$value});
+  }
+
+  .u-spacing-block-end-$(value) {
+    margin-block-end: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-$(value) {
+    margin-inline: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-start-$(value) {
+    margin-inline-start: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-end-$(value) {
+    margin-inline-end: var(--spacing-#{$value});
+  }
+}