diff --git a/atoms/_spacings.scss b/atoms/_spacings.scss
new file mode 100644
index 0000000..5d2c0b3
--- /dev/null
+++ b/atoms/_spacings.scss
@@ -0,0 +1,42 @@
+$include-spacing-css: true !default;
+$sizes: (
+  xxs: 0.25rem, // 4px
+  xs: 0.5rem, // 8px
+  s: 0.75rem, // 12px
+  m: 1rem, // 16px
+  l: 1.5rem, // 24px
+  xl: 2rem, // 32px
+  xxl: 3rem, // 48px
+  xxxl: 4rem // 64px
+);
+
+@if $include-spacing-css {
+  @each $size in map-keys($sizes) {
+    // Margin
+    .mb-#{$size} {
+      margin-bottom: map-get($sizes, $size);
+    }
+    .mt-#{$size} {
+      margin-top: map-get($sizes, $size);
+    }
+    .ml-#{$size} {
+      margin-left: map-get($sizes, $size);
+    }
+    .mr-#{$size} {
+      margin-right: map-get($sizes, $size);
+    }
+    // Padding
+    .pb-#{$size} {
+      padding-bottom: map-get($sizes, $size);
+    }
+    .pt-#{$size} {
+      padding-top: map-get($sizes, $size);
+    }
+    .pl-#{$size} {
+      padding-left: map-get($sizes, $size);
+    }
+    .pr-#{$size} {
+      padding-right: map-get($sizes, $size);
+    }
+  }
+}
diff --git a/index.scss b/index.scss
index ef6949a..10afab2 100644
--- a/index.scss
+++ b/index.scss
@@ -11,6 +11,7 @@
 @import 'atoms/forms';
 @import 'atoms/toggles';
 @import 'atoms/typography';
+@import 'atoms/spacings';
 
 @import 'molecules/dropdown';
 @import 'molecules/pagination';