diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 5aebe7c1e77..2165d73ebdf 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -4,7 +4,6 @@
 @import "common/foundation/base";
 @import "common/foundation/mixins";
 @import "common/foundation/variables";
-@import "common/foundation/spacing";
 @import "common/select-kit/*";
 @import "common/components/*";
 @import "common/input_tip";
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index cb7e0a4c354..9667a0cb475 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -723,8 +723,8 @@
 
       .modal-tab {
         list-style: none;
-        padding: s(1 2);
-        margin-right: s(1);
+        padding: 4px 8px;
+        margin-right: 4px;
         cursor: pointer;
 
         &.is-active {
@@ -734,7 +734,7 @@
           &.single-tab {
             background: none;
             color: $primary;
-            padding: s(1 0);
+            padding: 4px 0;
           }
         }
       }
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 20b15d756ed..d2d8c72b6d1 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -6,7 +6,7 @@
   z-index: z("dropdown");
   box-shadow: shadow("card");
   background-color: $secondary;
-  padding: s(2 2 1 2);
+  padding: 8px 8px 4px 8px;
   width: 300px;
   display: none;
   &.visible {
@@ -17,7 +17,7 @@
   }
 
   .title {
-    margin-bottom: s(1);
+    margin-bottom: 4px;
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -46,7 +46,7 @@
     }
   }
   .social-link {
-    margin-right: s(2);
+    margin-right: 8px;
     font-size: $font-up-4;
     .d-icon {
       color: dark-light-choose($tertiary, white);
@@ -69,7 +69,7 @@
   .actions {
     display: flex;
     align-items: flex-end;
-    margin-top: s(2);
+    margin-top: 8px;
 
     .sources {
       display: flex;
@@ -79,7 +79,7 @@
       max-width: 45%;
 
       .social-link {
-        margin-right: s(2);
+        margin-right: 8px;
       }
     }
 
@@ -96,7 +96,7 @@
       }
 
       .new-topic {
-        margin-right: s(4);
+        margin-right: 16px;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index c06f4fc6559..805b6bc8d0e 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -7,7 +7,7 @@
   display: grid;
   grid-template-columns: 1fr 5fr;
   grid-template-rows: auto auto 1fr auto;
-  grid-row-gap: s(5);
+  grid-row-gap: 20px;
   .user-primary-navigation {
     grid-column-start: 1;
     grid-column-end: 3;
@@ -46,10 +46,10 @@
 .user-content {
   .list-actions {
     display: flex;
-    margin-bottom: s(3);
+    margin-bottom: 12px;
 
     .btn {
-      margin-right: s(3);
+      margin-right: 12px;
     }
   }
 
@@ -264,7 +264,7 @@
     color: $secondary;
     display: flex;
     padding: 10px;
-    margin-bottom: s(4);
+    margin-bottom: 16px;
     > div,
     > div a {
       display: flex;
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
index 624109f9ba3..b964ea12b0d 100644
--- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss
+++ b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
@@ -25,7 +25,7 @@
     .title {
       font-size: $font-0;
       font-weight: normal;
-      margin-bottom: s(2);
+      margin-bottom: 8px;
 
       .post-date {
         color: $primary-medium;
@@ -45,7 +45,7 @@
     }
 
     .topic-share-url {
-      margin-bottom: s(2);
+      margin-bottom: 8px;
     }
 
     .sources {
@@ -56,7 +56,7 @@
 
       .social-link {
         font-size: $font-up-6;
-        margin-right: s(2);
+        margin-right: 8px;
       }
     }
   }
@@ -65,18 +65,18 @@
 .share-and-invite.modal .invite.modal-panel {
   .error-message,
   .success-message {
-    margin-bottom: s(2);
+    margin-bottom: 8px;
   }
 
   .body {
     .invite-user-control,
     .group-access-control,
     .show-custom-message-control {
-      margin-bottom: s(4);
+      margin-bottom: 8px;
     }
 
     .instructions {
-      margin-bottom: s(2);
+      margin-bottom: 8px;
     }
 
     .email-or-username-input {
@@ -96,7 +96,7 @@
     align-items: center;
 
     .btn-primary {
-      margin-right: s(2);
+      margin-right: 8px;
 
       &:last-child {
         margin-right: 0;
diff --git a/app/assets/stylesheets/common/foundation/spacing.scss b/app/assets/stylesheets/common/foundation/spacing.scss
deleted file mode 100644
index 9acbb71abb1..00000000000
--- a/app/assets/stylesheets/common/foundation/spacing.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$base-space: 4px;
-
-@function s(
-  $sizes: (
-    0
-  )
-) {
-  $spaces: ();
-  @each $size in $sizes {
-    @if ($size == 0) {
-      // Strip units if 0
-      $size: $size * $base-space;
-      $size: $size / ($size * 0 + 1);
-    } @else if ($size == auto) {
-      $size: auto;
-    } @else {
-      $size: $size * $base-space;
-    }
-
-    $spaces: append($spaces, $size);
-  }
-  @return $spaces;
-}
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 8ddc7f7d21f..78a40485093 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
     align-items: stretch;
     min-height: 75px;
-    padding: s(0 6);
+    padding: 0 24px;
     order: 2;
 
     button {
@@ -39,7 +39,7 @@
 
   #modal-alert {
     max-width: 100%;
-    padding: s(2 4);
+    padding: 8px 16px;
   }
 
   .login-modal {
@@ -68,7 +68,7 @@
   #login-form {
     box-sizing: border-box;
     flex: 1 0 auto;
-    padding: s(0 6);
+    padding: 0 24px;
     + #login-buttons {
       border-left: 1px solid $primary-low; // Only show border when login-form is present
     }
@@ -171,7 +171,7 @@
     }
     form {
       box-sizing: border-box;
-      padding: s(4 6);
+      padding: 16px 24px;
       margin-bottom: 0;
       max-height: 475px;
       @media screen and (max-height: 650px) {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 6cfaa87a813..d6b0342dfc4 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -50,8 +50,8 @@
 }
 
 .user-content {
-  padding-bottom: s(3);
-  margin-bottom: s(3);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
   background-color: $secondary;
   box-sizing: border-box;
 
@@ -118,7 +118,7 @@
 
       .primary {
         .primary-textual {
-          padding: s(0 1 1);
+          padding: 0 4px 4px;
           a[href] {
             text-decoration: underline;
           }
@@ -146,7 +146,7 @@
       }
 
       .secondary {
-        margin-top: s(4);
+        margin-top: 16px;
       }
     }
 
@@ -183,7 +183,7 @@
           display: inline-flex;
           > li {
             display: inline;
-            margin-left: s(3);
+            margin-left: 12px;
             .d-button-label {
               line-height: 1;
             }
@@ -246,7 +246,7 @@
 
   .instructions {
     display: inline-block;
-    margin-top: s(1);
+    margin-top: 4px;
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index d6fa6ff9d39..9cd4931ce83 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -43,18 +43,18 @@ span.badge-posts {
           flex: 1 1 auto;
         }
         &.button-count {
-          padding: s(2 1 2 2);
+          padding: 8px 4px 8px 8px;
           + .toggle-like,
           + .create-flag {
-            padding: s(2 2 2 1);
+            padding: 8px 8px 8px 4px;
           }
           &.my-likes,
           &.regular-likes {
             display: flex;
             max-width: unset;
-            padding: s(2);
+            padding: 8px;
             .d-icon {
-              padding-left: s(2);
+              padding-left: 8px;
             }
           }
         }
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 99f1fe16da0..55888d37a1b 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -4,8 +4,8 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto auto;
-  grid-row-gap: s(5);
-  grid-column-gap: s(4);
+  grid-row-gap: 20px;
+  grid-column-gap: 16px;
   .user-primary-navigation {
     grid-column-start: 1;
     grid-row-start: 1;
@@ -31,14 +31,14 @@
 }
 
 .user-main {
-  margin-top: s(3);
+  margin-top: 12px;
 
   .user-content {
     box-sizing: border-box;
     background-color: $secondary;
     table {
       width: 100%;
-      margin-top: s(3);
+      margin-top: 12px;
     }
   }
 
@@ -48,12 +48,12 @@
 
     .secondary {
       dl {
-        padding: s(2) 0;
+        padding: 8px 0;
       }
     }
 
     .details {
-      margin-bottom: s(3);
+      margin-bottom: 12px;
 
       h1 {
         line-height: $line-height-small;
@@ -69,7 +69,7 @@
         }
         display: block;
         float: none;
-        margin: s(2 auto);
+        margin: 8px auto;
         img.avatar {
           float: none;
         }
@@ -117,7 +117,7 @@
       color: $primary;
 
       .avatar {
-        margin: 0 0 s(3);
+        margin: 0 0 12px;
       }
 
       .primary-textual {
@@ -129,7 +129,7 @@
 
       .bio {
         color: $primary;
-        margin: 0 auto s(2);
+        margin: 0 auto 8px;
         max-width: 700px;
         text-align: center;
 
@@ -155,7 +155,7 @@
         height: 200px;
       }
       .user-profile-avatar {
-        margin-top: s(-15);
+        margin-top: -60px;
       }
     }
 
@@ -267,11 +267,11 @@
   padding-bottom: 2em;
 
   .instructions {
-    margin-top: s(1);
+    margin-top: 4px;
   }
 
   .controls-dropdown {
-    margin-bottom: s(4);
+    margin-bottom: 16px;
   }
 
   .delete-account {