diff --git a/docs/_data/position.json b/docs/_data/position.json
new file mode 100755
index 0000000000..c63c7c9a68
--- /dev/null
+++ b/docs/_data/position.json
@@ -0,0 +1,42 @@
+{
+  "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%",
+  "properties": "t, r, b, l, i",
+  "definitions": [
+    {
+      "term": "t",
+      "define": "top"
+    },
+    {
+      "term": "r",
+      "define": "right"
+    },
+    {
+      "term": "b",
+      "define": "bottom"
+    },
+    {
+      "term": "l",
+      "define": "left"
+    },
+    {
+      "term": "i",
+      "define": "inset"
+    },
+    {
+      "term": "tn",
+      "define": "negative top"
+    },
+    {
+      "term": "rn",
+      "define": "negative right"
+    },
+    {
+      "term": "bn",
+      "define": "negative bottom"
+    },
+    {
+      "term": "ln",
+      "define": "negative left"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/_data/spacing.json b/docs/_data/spacing.json
index 13d35f595c..357fe22241 100755
--- a/docs/_data/spacing.json
+++ b/docs/_data/spacing.json
@@ -1,446 +1,114 @@
 {
-  "margin": [
-    {
-      "prefix": "m",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "mt",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "mr",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "ml",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "mb",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "mx",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": false
-    },
-    {
-      "prefix": "my",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": false
-    }
-  ],
-  "negative-margin": [
-    {
-      "prefix": "mtn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    },
-    {
-      "prefix": "mrn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    },
-    {
-      "prefix": "mln",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    },
-    {
-      "prefix": "mbn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    },
-    {
-      "prefix": "mxn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    },
-    {
-      "prefix": "myn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    }
-  ],
-  "padding": [
-    {
-      "prefix": "p",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "pt",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "pr",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "pl",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "pb",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": true
-    },
-    {
-      "prefix": "px",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": false
-    },
-    {
-      "prefix": "py",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128",
-      "responsive": false
-    }
-  ],
-  "position": [
-    {
-      "prefix": "t",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "r",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "l",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "b",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "i",
-      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128"
-    }
-  ],
-  "negative-position": [
-    {
-      "prefix": "tn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "rn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "ln",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    },
-    {
-      "prefix": "bn",
-      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
-    }
-  ],
-  "margin-definitions": [
-    {
-      "term": "m",
-      "define": "margin",
-      "responsive": true
-    },
-    {
-      "term": "mt",
-      "define": "margin-top",
-      "responsive": true
-    },
-    {
-      "term": "mr",
-      "define": "margin-right",
-      "responsive": true
-    },
-    {
-      "term": "mb",
-      "define": "margin-bottom",
-      "responsive": true
-    },
-    {
-      "term": "ml",
-      "define": "margin-left",
-      "responsive": true
-    },
-    {
-      "term": "mx",
-      "define": "margin x-axis (left, right)"
-    },
-    {
-      "term": "my",
-      "define": "margin y-axis (top, bottom)"
-    },
-    {
-      "term": "mxn",
-      "define": "negative margin x-axis"
-    },
-    {
-      "term": "mtn",
-      "define": "negative margin-top"
-    },
-    {
-      "term": "mrn",
-      "define": "negative margin-right"
-    },
-    {
-      "term": "mbn",
-      "define": "negative margin-bottom"
-    },
-    {
-      "term": "mln",
-      "define": "negative margin-left"
-    },
-    {
-      "term": 0,
-      "define": "0;"
-    },
-    {
-      "term": 1,
-      "define": "1px;"
-    },
-    {
-      "term": 2,
-      "define": "2px;"
-    },
-    {
-      "term": 4,
-      "define": "4px;"
-    },
-    {
-      "term": 6,
-      "define": "6px;"
-    },
-    {
-      "term": 8,
-      "define": "8px;"
-    },
-    {
-      "term": 12,
-      "define": "12px;"
-    },
-    {
-      "term": 16,
-      "define": "16px;"
-    },
-    {
-      "term": 24,
-      "define": "24px;"
-    },
-    {
-      "term": 32,
-      "define": "32px;"
-    },
-    {
-      "term": 48,
-      "define": "48px;"
-    },
-    {
-      "term": 64,
-      "define": "64px;"
-    },
-    {
-      "term": 96,
-      "define": "96px;"
-    },
-    {
-      "term": 128,
-      "define": "128px;"
-    }
-  ],
-  "padding-definitions": [
-    {
-      "term": "p",
-      "define": "padding",
-      "responsive": true
-    },
-    {
-      "term": "pt",
-      "define": "padding-top",
-      "responsive": true
-    },
-    {
-      "term": "pr",
-      "define": "padding-right",
-      "responsive": true
-    },
-    {
-      "term": "pb",
-      "define": "padding-bottom",
-      "responsive": true
-    },
-    {
-      "term": "pl",
-      "define": "padding-left",
-      "responsive": true
-    },
-    {
-      "term": "px",
-      "define": "padding x-axis (left, right)"
-    },
-    {
-      "term": "py",
-      "define": "padding y-axis (top, bottom)"
-    },
-    {
-      "term": 0,
-      "define": "padding: 0;"
-    },
-    {
-      "term": 1,
-      "define": "padding: 1;"
-    },
-    {
-      "term": 2,
-      "define": "padding: 2px;"
-    },
-    {
-      "term": 4,
-      "define": "padding: 4px;"
-    },
-    {
-      "term": 6,
-      "define": "padding: 6px;"
-    },
-    {
-      "term": 8,
-      "define": "padding: 8px;"
-    },
-    {
-      "term": 12,
-      "define": "padding: 12px;"
-    },
-    {
-      "term": 16,
-      "define": "padding: 16px;"
-    },
-    {
-      "term": 24,
-      "define": "padding: 24px;"
-    },
-    {
-      "term": 32,
-      "define": "padding: 32px;"
-    },
-    {
-      "term": 48,
-      "define": "padding: 48px;"
-    },
-    {
-      "term": 64,
-      "define": "padding: 64px;"
-    },
-    {
-      "term": 96,
-      "define": "padding: 96px;"
-    },
-    {
-      "term": 128,
-      "define": "padding: 128px;"
-    }
-  ],
-  "position-definitions": [
-    {
-      "term": "t",
-      "define": "top"
-    },
-    {
-      "term": "r",
-      "define": "right"
-    },
-    {
-      "term": "b",
-      "define": "bottom"
-    },
-    {
-      "term": "l",
-      "define": "left"
-    },
-    {
-      "term": "i",
-      "define": "inset"
-    },
-    {
-      "term": "tn",
-      "define": "negative top"
-    },
-    {
-      "term": "rn",
-      "define": "negative right"
-    },
-    {
-      "term": "bn",
-      "define": "negative bottom"
-    },
-    {
-      "term": "ln",
-      "define": "negative left"
-    },
-    {
-      "term": 0,
-      "define": "0;"
-    },
-    {
-      "term": 1,
-      "define": "1px;"
-    },
-    {
-      "term": 2,
-      "define": "2px;"
-    },
-    {
-      "term": 4,
-      "define": "4px;"
-    },
-    {
-      "term": 6,
-      "define": "6px;"
-    },
-    {
-      "term": 8,
-      "define": "8px;"
-    },
-    {
-      "term": 12,
-      "define": "12px;"
-    },
-    {
-      "term": 16,
-      "define": "16px;"
-    },
-    {
-      "term": 24,
-      "define": "24px;"
-    },
-    {
-      "term": 32,
-      "define": "32px;"
-    },
-    {
-      "term": 48,
-      "define": "48px;"
-    },
-    {
-      "term": 64,
-      "define": "64px;"
-    },
-    {
-      "term": 96,
-      "define": "96px;"
-    },
-    {
-      "term": 128,
-      "define": "128px;"
-    },
-    {
-      "term": 50,
-      "define": "50%;"
-    },
-    {
-      "term": 100,
-      "define": "100%;"
+    "margin": {
+        "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%",
+        "properties": "m, mt, mr, mb, ml, mx, my",
+        "definitions": [
+            {
+                "term": "m",
+                "define": "margin",
+                "responsive": true
+            },
+            {
+                "term": "mt",
+                "define": "margin-top",
+                "responsive": true
+            },
+            {
+                "term": "mr",
+                "define": "margin-right",
+                "responsive": true
+            },
+            {
+                "term": "mb",
+                "define": "margin-bottom",
+                "responsive": true
+            },
+            {
+                "term": "ml",
+                "define": "margin-left",
+                "responsive": true
+            },
+            {
+                "term": "mx",
+                "define": "margin x-axis (left, right)",
+                "responsive": true
+            },
+            {
+                "term": "my",
+                "define": "margin y-axis (top, bottom)",
+                "responsive": true
+            },
+            {
+                "term": "mxn",
+                "define": "negative margin x-axis",
+                "responsive": true
+            },
+            {
+                "term": "myn",
+                "define": "negative margin y-axis",
+                "responsive": true
+            },
+            {
+                "term": "mtn",
+                "define": "negative margin-top",
+                "responsive": true
+            },
+            {
+                "term": "mrn",
+                "define": "negative margin-right",
+                "responsive": true
+            },
+            {
+                "term": "mbn",
+                "define": "negative margin-bottom",
+                "responsive": true
+            },
+            {
+                "term": "mln",
+                "define": "negative margin-left",
+                "responsive": true
+            }
+        ]
+    },
+    "padding": {
+        "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%",
+        "properties": "p, pt, pr, pb, pl, px, py",
+        "definitions": [
+            {
+                "term": "p",
+                "define": "padding",
+                "responsive": true
+            },
+            {
+                "term": "pt",
+                "define": "padding-top",
+                "responsive": true
+            },
+            {
+                "term": "pr",
+                "define": "padding-right",
+                "responsive": true
+            },
+            {
+                "term": "pb",
+                "define": "padding-bottom",
+                "responsive": true
+            },
+            {
+                "term": "pl",
+                "define": "padding-left",
+                "responsive": true
+            },
+            {
+                "term": "px",
+                "define": "padding x-axis (left, right)",
+                "responsive": true
+            },
+            {
+                "term": "py",
+                "define": "padding y-axis (top, bottom)",
+                "responsive": true
+            }
+        ]
     }
-  ]
 }
\ No newline at end of file
diff --git a/docs/product/base/position.html b/docs/product/base/position.html
index 5fb596050d..012e96458c 100644
--- a/docs/product/base/position.html
+++ b/docs/product/base/position.html
@@ -64,21 +64,28 @@
                 <tr>
                     <th class="s-table--cell2" scope="col">Abbreviation</th>
                     <th scope="col">Definition</th>
+                    <th class="s-table--cell2 ta-center" scope="col">Responsive?</th>
                 </tr>
             </thead>
             <tbody>
-                {% for space in spacing.position-definitions %}
+                {% for space in position.definitions %}
                     <tr>
                         <th scope="row">{{ space.term }}</th>
                         <td>{{ space.define }}</td>
+                        <td class="ta-center">
+                            {% icon "Checkmark", "fc-green-400" %}
+                        </td>
                     </tr>
                 {% endfor %}
             </tbody>
         </table>
     </div>
 
-    {% header "h3", "Coordinate examples" %}
-    <div class="stacks-preview">
+{% assign position-properties = position.properties | split: ", " %}
+{% assign position-values = position.values | split: ", " %}
+
+{% header "h3", "Coordinate examples" %}
+<div class="stacks-preview">
 {% highlight html %}
 <div class="ps-absolute t12 l12"> … </div>
 <div class="ps-absolute t48 r24"> … </div>
@@ -118,31 +125,25 @@
             <thead>
                 <tr>
                     <th scope="col">Prefix</th>
-                    <th scope="col" class="ta-center ff-mono">0</th>
-                    <th scope="col" class="ta-center ff-mono">1px</th>
-                    <th scope="col" class="ta-center ff-mono">2px</th>
-                    <th scope="col" class="ta-center ff-mono">4px</th>
-                    <th scope="col" class="ta-center ff-mono">6px</th>
-                    <th scope="col" class="ta-center ff-mono">8px</th>
-                    <th scope="col" class="ta-center ff-mono">12px</th>
-                    <th scope="col" class="ta-center ff-mono">16px</th>
-                    <th scope="col" class="ta-center ff-mono">24px</th>
-                    <th scope="col" class="ta-center ff-mono">32px</th>
-                    <th scope="col" class="ta-center ff-mono">48px</th>
-                    <th scope="col" class="ta-center ff-mono">64px</th>
-                    <th scope="col" class="ta-center ff-mono">96px</th>
-                    <th scope="col" class="ta-center ff-mono">128px</th>
-                    <th scope="col" class="ta-center ff-mono">50%</th>
-                    <th scope="col" class="ta-center ff-mono">100%</th>
+                    {% for value in position-values %}
+                        <th scope="col" class="ta-center ff-mono">{{ value }}</th>
+                    {% endfor %}
                 </tr>
             </thead>
             <tbody>
-                {% for class in spacing.position %}
-                {% assign prefix-value = class.values | split: ", " %}
+                {% for className in position-properties %}
                     <tr>
-                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                        {% for values in prefix-value %}
-                            <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
+                        <th scope="row">{{ className }}</th>
+                        {% for value in position-values %}
+                            {% if className == "i" %}
+                                {% if value == "50%" or value == "100%" %}
+                                    <td>-</td>
+                                {% else %}
+                                    <td><code>.{{ className }}{{ value | replace: "px", "" }}</code></td>
+                                {% endif %}
+                            {% else %}
+                                <td><code>.{{ className }}{{ value | replace: "px", "" | replace: "%", "" }}</code></td>
+                            {% endif %}
                         {% endfor %}
                     </tr>
                 {% endfor %}
@@ -150,36 +151,26 @@
         </table>
     </div>
 
+    {% assign position-properties-negative = position.properties | replace: ", i", "" | split: ", " %}
+    {% assign position-values-negative = position.values | replace: "0, ", "" | split: ", " %}
+
     {% header "h2", "Negative coordinates" %}
     <div class="overflow-x-auto mb48 mt24" tabindex="0">
         <table class="wmn3 s-table s-table__bx-simple">
             <thead>
                 <tr>
                     <th scope="col">Prefix</th>
-                    <th scope="col" class="ta-center ff-mono">-1px</th>
-                    <th scope="col" class="ta-center ff-mono">-2px</th>
-                    <th scope="col" class="ta-center ff-mono">-4px</th>
-                    <th scope="col" class="ta-center ff-mono">-6px</th>
-                    <th scope="col" class="ta-center ff-mono">-8px</th>
-                    <th scope="col" class="ta-center ff-mono">-12px</th>
-                    <th scope="col" class="ta-center ff-mono">-16px</th>
-                    <th scope="col" class="ta-center ff-mono">-24px</th>
-                    <th scope="col" class="ta-center ff-mono">-32px</th>
-                    <th scope="col" class="ta-center ff-mono">-48px</th>
-                    <th scope="col" class="ta-center ff-mono">-64px</th>
-                    <th scope="col" class="ta-center ff-mono">-96px</th>
-                    <th scope="col" class="ta-center ff-mono">-128px</th>
-                    <th scope="col" class="ta-center ff-mono">-50%</th>
-                    <th scope="col" class="ta-center ff-mono">-100%</th>
+                    {% for value in position-values-negative %}
+                        <th scope="col" class="ta-center ff-mono">-{{ value }}</th>
+                    {% endfor %}
                 </tr>
             </thead>
             <tbody>
-                {% for class in spacing.negative-position %}
-                {% assign prefix-value = class.values | split: ", " %}
+                {% for className in position-properties-negative %}
                     <tr>
-                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                        {% for values in prefix-value %}
-                            <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
+                        <th scope="row">{{ className }}n</th>
+                        {% for value in position-values-negative %}
+                            <td><code>.{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }}</code></td>
                         {% endfor %}
                     </tr>
                 {% endfor %}
diff --git a/docs/product/base/spacing.html b/docs/product/base/spacing.html
index d518f8728c..7fdb145dd2 100644
--- a/docs/product/base/spacing.html
+++ b/docs/product/base/spacing.html
@@ -19,7 +19,7 @@
                 </tr>
             </thead>
             <tbody>
-                {% for space in spacing.margin-definitions %}
+                {% for space in spacing.margin.definitions %}
                     <tr>
                         <th scope="row">{{ space.term }}</th>
                         <td>{{ space.define }}</td>
@@ -34,8 +34,11 @@
         </table>
     </div>
 
-    {% header "h3", "Margin classes" %}
-    <div class="stacks-preview">
+{% header "h3", "Margin classes" %}
+{% assign margin-properties = spacing.margin.properties | split: ", " %}
+{% assign margin-values = spacing.margin.values | split: ", " %}
+{% assign margin-values-negative = spacing.margin.values | replace: "0, ", "" | split: ", " %}
+<div class="stacks-preview">
 {% highlight html %}
 <div class="mt8 mr4 mb32 ml64">
     …
@@ -52,36 +55,26 @@
             <thead>
                 <tr>
                     <th scope="col"></th>
-                    <th scope="col" class="ta-center ff-mono">0</th>
-                    <th scope="col" class="ta-center ff-mono">1px</th>
-                    <th scope="col" class="ta-center ff-mono">2px</th>
-                    <th scope="col" class="ta-center ff-mono">4px</th>
-                    <th scope="col" class="ta-center ff-mono">6px</th>
-                    <th scope="col" class="ta-center ff-mono">8px</th>
-                    <th scope="col" class="ta-center ff-mono">12px</th>
-                    <th scope="col" class="ta-center ff-mono">16px</th>
-                    <th scope="col" class="ta-center ff-mono">24px</th>
-                    <th scope="col" class="ta-center ff-mono">32px</th>
-                    <th scope="col" class="ta-center ff-mono">48px</th>
-                    <th scope="col" class="ta-center ff-mono">64px</th>
-                    <th scope="col" class="ta-center ff-mono">96px</th>
-                    <th scope="col" class="ta-center ff-mono">128px</th>
-                    <th scrop="col" class="ta-center">Responsive?</th>
+                    {% for value in margin-values %}
+                        <th scope="col" class="ta-center ff-mono">{{ value }}</th>
+                    {% endfor %}
                 </tr>
             </thead>
             <tbody>
-              {% for class in spacing.margin %}
-              {% assign prefix-value = class.values | split: ", " %}
+                {% for className in margin-properties %}
                     <tr>
-                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                        {% for values in prefix-value %}
-                        <td class="ta-center"><code>.{{ class.prefix }}{{ values }}</code></td>
-                        {% endfor %}
-                        <td class="ta-center">
-                            {% if class.responsive %}
-                                {% icon "Checkmark", "fc-green-400" %}
+                        <th scope="row">{{ className }}</th>
+                        {% for value in margin-values %}
+                            {% if className == "mx" or className == "my" %}
+                                {% if value == "0" or value == "50%" or value == "100%" %}
+                                    <td>-</td>
+                                {% else %}
+                                    <td><code>.{{ className }}{{ value | replace: "px", "" }}</code></td>
+                                {% endif %}
+                            {% else %}
+                                <td><code>.{{ className }}{{ value | replace: "px", "" | replace: "%", "" }}</code></td>
                             {% endif %}
-                        </td>
+                        {% endfor %}
                     </tr>
                 {% endfor %}
             </tbody>
@@ -94,30 +87,27 @@
             <thead>
                 <tr>
                     <th scope="col"></th>
-                    <th scope="col" class="ta-center ff-mono">-1px</th>
-                    <th scope="col" class="ta-center ff-mono">-2px</th>
-                    <th scope="col" class="ta-center ff-mono">-4px</th>
-                    <th scope="col" class="ta-center ff-mono">-6px</th>
-                    <th scope="col" class="ta-center ff-mono">-8px</th>
-                    <th scope="col" class="ta-center ff-mono">-12px</th>
-                    <th scope="col" class="ta-center ff-mono">-16px</th>
-                    <th scope="col" class="ta-center ff-mono">-24px</th>
-                    <th scope="col" class="ta-center ff-mono">-32px</th>
-                    <th scope="col" class="ta-center ff-mono">-48px</th>
-                    <th scope="col" class="ta-center ff-mono">-64px</th>
-                    <th scope="col" class="ta-center ff-mono">-96px</th>
-                    <th scope="col" class="ta-center ff-mono">-128px</th>
+                    {% for value in margin-values-negative %}
+                        <th scope="col" class="ta-center ff-mono">-{{ value }}</th>
+                    {% endfor %}
                 </tr>
             </thead>
             <tbody>
-              {% for class in spacing.negative-margin %}
-              {% assign prefix-value = class.values | split: ", " %}
-                  <tr>
-                      <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                      {% for values in prefix-value %}
-                      <td class="ta-center"><code>.{{ class.prefix }}{{ values }}</code></td>
-                      {% endfor %}
-                  </tr>
+                {% for className in margin-properties %}
+                    <tr>
+                        <th scope="row">{{ className }}n</th>
+                        {% for value in margin-values-negative %}
+                            {% if className == "mx" or className == "my" %}
+                                {% if value == "0" or value == "50%" or value == "100%" %}
+                                    <td>-</td>
+                                {% else %}
+                                    <td><code>.{{ className }}n{{ value | replace: "px", "" }}</code></td>
+                                {% endif %}
+                            {% else %}
+                                <td><code>.{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }}</code></td>
+                            {% endif %}
+                        {% endfor %}
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -192,7 +182,7 @@
                 </tr>
             </thead>
             <tbody>
-                {% for space in spacing.padding-definitions %}
+                {% for space in spacing.padding.definitions %}
                     <tr>
                         <th scope="row">{{ space.term }}</th>
                         <td>{{ space.define }}</td>
@@ -207,8 +197,11 @@
         </table>
     </div>
 
-    {% header "h3", "Padding classes" %}
-    <div class="stacks-preview">
+{% header "h3", "Padding classes" %}
+{% assign padding-properties = spacing.padding.properties | split: ", " %}
+{% assign padding-values = spacing.padding.values | split: ", " %}
+
+<div class="stacks-preview">
 {% highlight html %}
 <div class="pt4 pr64 pb64 pl64">
     …
@@ -224,37 +217,27 @@
         <table class="wmn5 s-table s-table__bx-simple">
             <thead>
                 <tr>
-                    <th scope="col">Prefix</th>
-                    <th scope="col" class="ta-center">0</th>
-                    <th scope="col" class="ta-center">1px</th>
-                    <th scope="col" class="ta-center">2px</th>
-                    <th scope="col" class="ta-center">4px</th>
-                    <th scope="col" class="ta-center">6px</th>
-                    <th scope="col" class="ta-center">8px</th>
-                    <th scope="col" class="ta-center">12px</th>
-                    <th scope="col" class="ta-center">16px</th>
-                    <th scope="col" class="ta-center">24px</th>
-                    <th scope="col" class="ta-center">32px</th>
-                    <th scope="col" class="ta-center">48px</th>
-                    <th scope="col" class="ta-center">64px</th>
-                    <th scope="col" class="ta-center">96px</th>
-                    <th scope="col" class="ta-center">128px</th>
-                    <th scope="col" class="ta-center">Responsive?</th>
+                    <th scope="col"></th>
+                    {% for value in padding-values %}
+                        <th scope="col" class="ta-center ff-mono">{{ value }}</th>
+                    {% endfor %}
                 </tr>
             </thead>
             <tbody>
-                {% for class in spacing.padding %}
-                {% assign prefix-value = class.values | split: ", " %}
+                {% for className in padding-properties %}
                     <tr>
-                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                        {% for values in prefix-value %}
-                            <td class="ta-center"><code>.{{ class.prefix }}{{ values }}</code></td>
-                        {% endfor %}
-                        <td class="ta-center">
-                            {% if class.responsive %}
-                                {% icon "Checkmark", "fc-green-400" %}
+                        <th scope="row">{{ className }}</th>
+                        {% for value in padding-values %}
+                            {% if className == "px" or className == "py" %}
+                                {% if value == "0" or value == "50%" or value == "100%" %}
+                                    <td>-</td>
+                                {% else %}
+                                    <td><code>.{{ className }}{{ value | replace: "px", "" }}</code></td>
+                                {% endif %}
+                            {% else %}
+                                <td><code>.{{ className }}{{ value | replace: "px", "" | replace: "%", "" }}</code></td>
                             {% endif %}
-                        </td>
+                        {% endfor %}
                     </tr>
                 {% endfor %}
             </tbody>
diff --git a/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/lib/atomic/__snapshots__/spacing.less.test.ts.snap
index 40265e2e56..914cb48c0c 100644
--- a/lib/atomic/__snapshots__/spacing.less.test.ts.snap
+++ b/lib/atomic/__snapshots__/spacing.less.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`atomic: misc > should output all atomic css classes 1`] = `
 "body {
     --su-base: 1;
+    --su-static0: 0px;
     --su-static1: 1px;
     --su-static2: 2px;
     --su-static4: 4px;
@@ -16,6 +17,7 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     --su-static64: 64px;
     --su-static96: 96px;
     --su-static128: 128px;
+    --su0: var(--su-static0);
     --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
     --su2: calc(var(--su-static2) * var(--su-base));
     --su4: calc(var(--su-static4) * var(--su-base));
@@ -31,64 +33,12 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     --su128: calc(var(--su-static128) * var(--su-base));
 }
 
-.m0 {
-    margin: 0 !important;
-}
-
-.mt0 {
-    margin-top: 0 !important;
-}
-
-.mr0 {
-    margin-right: 0 !important;
-}
-
-.mb0 {
-    margin-bottom: 0 !important;
-}
-
-.ml0 {
-    margin-left: 0 !important;
-}
-
-.mx0 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-
-.my0 {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-}
-
 .m-auto {
     margin: auto !important;
 }
 
-.mt-auto {
-    margin-top: auto !important;
-}
-
-.mr-auto {
-    margin-right: auto !important;
-}
-
-.mb-auto {
-    margin-bottom: auto !important;
-}
-
-.ml-auto {
-    margin-left: auto !important;
-}
-
-.mx-auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
-}
-
-.my-auto {
-    margin-top: auto !important;
-    margin-bottom: auto !important;
+.m0 {
+    margin: var(--su0) !important;
 }
 
 .m1 {
@@ -143,10 +93,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin: var(--su128) !important;
 }
 
-.m0 {
-    margin: 0 !important;
-}
-
 .mn1 {
     margin: calc(var(--su1) * -1) !important;
 }
@@ -199,6 +145,30 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin: calc(var(--su128) * -1) !important;
 }
 
+.m50 {
+    margin: 50% !important;
+}
+
+.m100 {
+    margin: 100% !important;
+}
+
+.mn50 {
+    margin: -50% !important;
+}
+
+.mn100 {
+    margin: -100% !important;
+}
+
+.mt-auto {
+    margin-top: auto !important;
+}
+
+.mt0 {
+    margin-top: var(--su0) !important;
+}
+
 .mt1 {
     margin-top: var(--su1) !important;
 }
@@ -251,10 +221,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-top: var(--su128) !important;
 }
 
-.mt0 {
-    margin-top: 0 !important;
-}
-
 .mtn1 {
     margin-top: calc(var(--su1) * -1) !important;
 }
@@ -307,6 +273,30 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-top: calc(var(--su128) * -1) !important;
 }
 
+.mt50 {
+    margin-top: 50% !important;
+}
+
+.mt100 {
+    margin-top: 100% !important;
+}
+
+.mtn50 {
+    margin-top: -50% !important;
+}
+
+.mtn100 {
+    margin-top: -100% !important;
+}
+
+.mr-auto {
+    margin-right: auto !important;
+}
+
+.mr0 {
+    margin-right: var(--su0) !important;
+}
+
 .mr1 {
     margin-right: var(--su1) !important;
 }
@@ -359,10 +349,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-right: var(--su128) !important;
 }
 
-.mr0 {
-    margin-right: 0 !important;
-}
-
 .mrn1 {
     margin-right: calc(var(--su1) * -1) !important;
 }
@@ -415,6 +401,30 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-right: calc(var(--su128) * -1) !important;
 }
 
+.mr50 {
+    margin-right: 50% !important;
+}
+
+.mr100 {
+    margin-right: 100% !important;
+}
+
+.mrn50 {
+    margin-right: -50% !important;
+}
+
+.mrn100 {
+    margin-right: -100% !important;
+}
+
+.mb-auto {
+    margin-bottom: auto !important;
+}
+
+.mb0 {
+    margin-bottom: var(--su0) !important;
+}
+
 .mb1 {
     margin-bottom: var(--su1) !important;
 }
@@ -467,10 +477,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-bottom: var(--su128) !important;
 }
 
-.mb0 {
-    margin-bottom: 0 !important;
-}
-
 .mbn1 {
     margin-bottom: calc(var(--su1) * -1) !important;
 }
@@ -523,6 +529,30 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-bottom: calc(var(--su128) * -1) !important;
 }
 
+.mb50 {
+    margin-bottom: 50% !important;
+}
+
+.mb100 {
+    margin-bottom: 100% !important;
+}
+
+.mbn50 {
+    margin-bottom: -50% !important;
+}
+
+.mbn100 {
+    margin-bottom: -100% !important;
+}
+
+.ml-auto {
+    margin-left: auto !important;
+}
+
+.ml0 {
+    margin-left: var(--su0) !important;
+}
+
 .ml1 {
     margin-left: var(--su1) !important;
 }
@@ -575,10 +605,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-left: var(--su128) !important;
 }
 
-.ml0 {
-    margin-left: 0 !important;
-}
-
 .mln1 {
     margin-left: calc(var(--su1) * -1) !important;
 }
@@ -631,6 +657,37 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-left: calc(var(--su128) * -1) !important;
 }
 
+.ml50 {
+    margin-left: 50% !important;
+}
+
+.ml100 {
+    margin-left: 100% !important;
+}
+
+.mln50 {
+    margin-left: -50% !important;
+}
+
+.mln100 {
+    margin-left: -100% !important;
+}
+
+.mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.my-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+}
+
+.mx0 {
+    margin-left: var(--su0) !important;
+    margin-right: var(--su0) !important;
+}
+
 .mx1 {
     margin-left: var(--su1) !important;
     margin-right: var(--su1) !important;
@@ -761,6 +818,11 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     margin-right: calc(var(--su128) * -1) !important;
 }
 
+.my0 {
+    margin-top: var(--su0) !important;
+    margin-bottom: var(--su0) !important;
+}
+
 .my1 {
     margin-top: var(--su1) !important;
     margin-bottom: var(--su1) !important;
@@ -892,33 +954,7 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
 }
 
 .p0 {
-    padding: 0 !important;
-}
-
-.pt0 {
-    padding-top: 0 !important;
-}
-
-.pr0 {
-    padding-right: 0 !important;
-}
-
-.pb0 {
-    padding-bottom: 0 !important;
-}
-
-.pl0 {
-    padding-left: 0 !important;
-}
-
-.px0 {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.py0 {
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
+    padding: var(--su0) !important;
 }
 
 .p1 {
@@ -973,8 +1009,8 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding: var(--su128) !important;
 }
 
-.p0 {
-    padding: 0 !important;
+.pt0 {
+    padding-top: var(--su0) !important;
 }
 
 .pt1 {
@@ -1029,8 +1065,8 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-top: var(--su128) !important;
 }
 
-.pt0 {
-    padding-top: 0 !important;
+.pr0 {
+    padding-right: var(--su0) !important;
 }
 
 .pr1 {
@@ -1085,6 +1121,10 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-right: var(--su128) !important;
 }
 
+.pb0 {
+    padding-bottom: var(--su0) !important;
+}
+
 .pb1 {
     padding-bottom: var(--su1) !important;
 }
@@ -1137,8 +1177,8 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-bottom: var(--su128) !important;
 }
 
-.pr0 {
-    padding-right: 0 !important;
+.pl0 {
+    padding-left: var(--su0) !important;
 }
 
 .pl1 {
@@ -1193,8 +1233,9 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-left: var(--su128) !important;
 }
 
-.pl0 {
-    padding-left: 0 !important;
+.px0 {
+    padding-left: var(--su0) !important;
+    padding-right: var(--su0) !important;
 }
 
 .px1 {
@@ -1262,6 +1303,11 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-right: var(--su128) !important;
 }
 
+.py0 {
+    padding-top: var(--su0) !important;
+    padding-bottom: var(--su0) !important;
+}
+
 .py1 {
     padding-top: var(--su1) !important;
     padding-bottom: var(--su1) !important;
@@ -1327,6 +1373,66 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     padding-bottom: var(--su128) !important;
 }
 
+.i0 {
+    inset: var(--su0) !important;
+}
+
+.i1 {
+    inset: var(--su1) !important;
+}
+
+.i2 {
+    inset: var(--su2) !important;
+}
+
+.i4 {
+    inset: var(--su4) !important;
+}
+
+.i6 {
+    inset: var(--su6) !important;
+}
+
+.i8 {
+    inset: var(--su8) !important;
+}
+
+.i12 {
+    inset: var(--su12) !important;
+}
+
+.i16 {
+    inset: var(--su16) !important;
+}
+
+.i24 {
+    inset: var(--su24) !important;
+}
+
+.i32 {
+    inset: var(--su32) !important;
+}
+
+.i48 {
+    inset: var(--su48) !important;
+}
+
+.i64 {
+    inset: var(--su64) !important;
+}
+
+.i96 {
+    inset: var(--su96) !important;
+}
+
+.i128 {
+    inset: var(--su128) !important;
+}
+
+.t0 {
+    top: var(--su0) !important;
+}
+
 .t1 {
     top: var(--su1) !important;
 }
@@ -1379,26 +1485,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     top: var(--su128) !important;
 }
 
-.t0 {
-    top: 0 !important;
-}
-
-.t50 {
-    top: 50% !important;
-}
-
-.tn50 {
-    top: -50% !important;
-}
-
-.t100 {
-    top: 100% !important;
-}
-
-.tn100 {
-    top: -100% !important;
-}
-
 .tn1 {
     top: calc(var(--su1) * -1) !important;
 }
@@ -1451,6 +1537,26 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     top: calc(var(--su128) * -1) !important;
 }
 
+.t50 {
+    top: 50% !important;
+}
+
+.t100 {
+    top: 100% !important;
+}
+
+.tn50 {
+    top: -50% !important;
+}
+
+.tn100 {
+    top: -100% !important;
+}
+
+.r0 {
+    right: var(--su0) !important;
+}
+
 .r1 {
     right: var(--su1) !important;
 }
@@ -1503,26 +1609,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     right: var(--su128) !important;
 }
 
-.r0 {
-    right: 0 !important;
-}
-
-.r50 {
-    right: 50% !important;
-}
-
-.rn50 {
-    right: -50% !important;
-}
-
-.r100 {
-    right: 100% !important;
-}
-
-.rn100 {
-    right: -100% !important;
-}
-
 .rn1 {
     right: calc(var(--su1) * -1) !important;
 }
@@ -1575,6 +1661,26 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     right: calc(var(--su128) * -1) !important;
 }
 
+.r50 {
+    right: 50% !important;
+}
+
+.r100 {
+    right: 100% !important;
+}
+
+.rn50 {
+    right: -50% !important;
+}
+
+.rn100 {
+    right: -100% !important;
+}
+
+.b0 {
+    bottom: var(--su0) !important;
+}
+
 .b1 {
     bottom: var(--su1) !important;
 }
@@ -1627,26 +1733,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     bottom: var(--su128) !important;
 }
 
-.b0 {
-    bottom: 0 !important;
-}
-
-.b50 {
-    bottom: 50% !important;
-}
-
-.bn50 {
-    bottom: -50% !important;
-}
-
-.b100 {
-    bottom: 100% !important;
-}
-
-.bn100 {
-    bottom: -100% !important;
-}
-
 .bn1 {
     bottom: calc(var(--su1) * -1) !important;
 }
@@ -1699,6 +1785,26 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     bottom: calc(var(--su128) * -1) !important;
 }
 
+.b50 {
+    bottom: 50% !important;
+}
+
+.b100 {
+    bottom: 100% !important;
+}
+
+.bn50 {
+    bottom: -50% !important;
+}
+
+.bn100 {
+    bottom: -100% !important;
+}
+
+.l0 {
+    left: var(--su0) !important;
+}
+
 .l1 {
     left: var(--su1) !important;
 }
@@ -1751,26 +1857,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     left: var(--su128) !important;
 }
 
-.l0 {
-    left: 0 !important;
-}
-
-.l50 {
-    left: 50% !important;
-}
-
-.ln50 {
-    left: -50% !important;
-}
-
-.l100 {
-    left: 100% !important;
-}
-
-.ln100 {
-    left: -100% !important;
-}
-
 .ln1 {
     left: calc(var(--su1) * -1) !important;
 }
@@ -1823,60 +1909,20 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     left: calc(var(--su128) * -1) !important;
 }
 
-.i1 {
-    inset: var(--su1) !important;
-}
-
-.i2 {
-    inset: var(--su2) !important;
-}
-
-.i4 {
-    inset: var(--su4) !important;
-}
-
-.i6 {
-    inset: var(--su6) !important;
-}
-
-.i8 {
-    inset: var(--su8) !important;
-}
-
-.i12 {
-    inset: var(--su12) !important;
-}
-
-.i16 {
-    inset: var(--su16) !important;
-}
-
-.i24 {
-    inset: var(--su24) !important;
-}
-
-.i32 {
-    inset: var(--su32) !important;
-}
-
-.i48 {
-    inset: var(--su48) !important;
-}
-
-.i64 {
-    inset: var(--su64) !important;
+.l50 {
+    left: 50% !important;
 }
 
-.i96 {
-    inset: var(--su96) !important;
+.l100 {
+    left: 100% !important;
 }
 
-.i128 {
-    inset: var(--su128) !important;
+.ln50 {
+    left: -50% !important;
 }
 
-.i0 {
-    inset: 0 !important;
+.ln100 {
+    left: -100% !important;
 }
 "
 `;
diff --git a/lib/atomic/spacing.less b/lib/atomic/spacing.less
index 7ff81e8ef9..54d7c385d9 100644
--- a/lib/atomic/spacing.less
+++ b/lib/atomic/spacing.less
@@ -1,23 +1,10 @@
 @import (reference) "../base/internal.less";
+@import (reference) "../exports/spacing-mixins.less";
 
-//
-//  STACK OVERFLOW
-//  SPACING
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  • SPACING UNIT CSS VARIABLES
-//  • MARGIN
-//  • PADDING
-//  • POSITIONING
-//
-//  ============================================================================
-//  $   SPACING UNITS CSS VARIABLES
-//  ----------------------------------------------------------------------------
+// SPACING UNITS CSS CUSTOM PROPERTIES
 body {
     --su-base: 1;
+    --su-static0: 0px;
     --su-static1: 1px;
     --su-static2: 2px;
     --su-static4: 4px;
@@ -32,6 +19,7 @@ body {
     --su-static96: 96px;
     --su-static128: 128px;
 
+    --su0: var(--su-static0);
     // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
     --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
     --su2: calc(var(--su-static2) * var(--su-base));
@@ -48,297 +36,63 @@ body {
     --su128: calc(var(--su-static128) * var(--su-base));
 }
 
-//  ============================================================================
-//  $   MARGIN
-//  ----------------------------------------------------------------------------
-//  $$ 0 margin
-.m0 { margin: 0 !important; }
-.mt0 { margin-top: 0 !important; }
-.mr0 { margin-right: 0 !important; }
-.mb0 { margin-bottom: 0 !important; }
-.ml0 { margin-left: 0 !important; }
-.mx0 { margin-left: 0 !important; margin-right: 0 !important; }
-.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-
-//  $$ auto margin
+// MARGIN
+//  Margin
 .m-auto { margin: auto !important; }
+.generate-spacing('.m', margin, true);
+.generate-spacing('.m', margin, true, percent);
+
+//  Margin top
 .mt-auto { margin-top: auto !important; }
+.generate-spacing('.mt', margin-top, true);
+.generate-spacing('.mt', margin-top, true, percent);
+
+//  Margin right
 .mr-auto { margin-right: auto !important; }
+.generate-spacing('.mr', margin-right, true);
+.generate-spacing('.mr', margin-right, true, percent);
+
+//  Margin bottom
 .mb-auto { margin-bottom: auto !important; }
+.generate-spacing('.mb', margin-bottom, true);
+.generate-spacing('.mb', margin-bottom, true, percent);
+
+//  Margin left
 .ml-auto { margin-left: auto !important; }
+.generate-spacing('.ml', margin-left, true);
+.generate-spacing('.ml', margin-left, true, percent);
+
+//  Margin x-axis, y-axis
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-
-// $$ Margin
-#stacks-internals #build-classes(
-    responsive,
-    '.m',
-    { .template(@value) { margin: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.m0', { margin: 0 !important; });
-
-// $$ Margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mn',
-    { .template(@value) { margin: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Top margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mt',
-    { .template(@value) { margin-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mt0', { margin-top: 0 !important; });
-
-// $$ Top margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mtn',
-    { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Right margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mr',
-    { .template(@value) { margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mr0', { margin-right: 0 !important; });
-
-// $$ Right margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mrn',
-    { .template(@value) { margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Bottom margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mb',
-    { .template(@value) { margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mb0', { margin-bottom: 0 !important; });
-
-// $$ Bottom margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mbn',
-    { .template(@value) { margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Left margin
-#stacks-internals #build-classes(
-    responsive,
-    '.ml',
-    { .template(@value) { margin-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.ml0', { margin-left: 0 !important; });
-
-// $$ Left margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mln',
-    { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mx', { .template(@value) { margin-left: var(~"--su@{value}") !important; margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mxn', { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.myn', { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   PADDING
-//  ----------------------------------------------------------------------------
-
-//  $$ 0 padding
-.p0 { padding: 0 !important; }
-.pt0 { padding-top: 0 !important; }
-.pr0 { padding-right: 0 !important; }
-.pb0 { padding-bottom: 0 !important; }
-.pl0 { padding-left: 0 !important; }
-.px0 { padding-left: 0 !important; padding-right: 0 !important; }
-.py0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-
-#stacks-internals #build-classes(
-    responsive,
-    '.p', { .template(@value) { padding: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.p0', { padding: 0 !important; });
-
-//  $$  Top Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pt', { .template(@value) { padding-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pt0', { padding-top: 0 !important; });
-
-//  $$  Right Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pr', { .template(@value) { padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Bottom Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pb', { .template(@value) { padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pr0', { padding-right: 0 !important; });
-
-//  $$  Left Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pl', { .template(@value) { padding-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pl0', { padding-left: 0 !important; });
-
-//  $$  X-Axis Padding
-#stacks-internals #build-classes(
-    '.px', { .template(@value) { padding-left: var(~"--su@{value}") !important; padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Y-Axis Padding
-#stacks-internals #build-classes(
-    '.py', { .template(@value) { padding-top: var(~"--su@{value}") !important; padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   POSITIONING
-//  ----------------------------------------------------------------------------
-
-//  $$ Top
-#stacks-internals #build-classes(
-    responsive,
-    '.t', { .template(@value) { top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Top 0, percent
-#stacks-internals #build-classes(
-    '.t', { .template(@value) { top: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Top negative
-#stacks-internals #build-classes(
-    responsive,
-    '.tn', { .template(@value) { top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right
-#stacks-internals #build-classes(
-    responsive,
-    '.r', { .template(@value) { right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right 0, percent
-#stacks-internals #build-classes(
-    '.r', { .template(@value) { right: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Right negative
-#stacks-internals #build-classes(
-    responsive,
-    '.rn', { .template(@value) { right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom
-#stacks-internals #build-classes(
-    responsive,
-    '.b', { .template(@value) { bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom 0, percent
-#stacks-internals #build-classes(
-    '.b', { .template(@value) { bottom: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Bottom negative
-#stacks-internals #build-classes(
-    responsive,
-    '.bn', { .template(@value) { bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left
-#stacks-internals #build-classes(
-    responsive,
-    '.l', { .template(@value) { left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left 0, percent
-#stacks-internals #build-classes(
-    '.l', { .template(@value) { left: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Left negative
-#stacks-internals #build-classes(
-    responsive,
-    '.ln', { .template(@value) { left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset
-#stacks-internals #build-classes(
-    responsive,
-    '.i', { .template(@value) { inset: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset 0
-#stacks-internals #build-classes(
-    '.i', { .template(@value) { inset: @value !important; } },
-    0
-);
+.generate-spacing('.mx'; margin-left, margin-right; true);
+.generate-spacing('.my'; margin-top, margin-bottom; true);
+
+// PADDING
+.generate-spacing('.p', padding);
+.generate-spacing('.pt', padding-top);
+.generate-spacing('.pr', padding-right);
+.generate-spacing('.pb', padding-bottom);
+.generate-spacing('.pl', padding-left);
+.generate-spacing('.px'; padding-left, padding-right);
+.generate-spacing('.py'; padding-top, padding-bottom);
+
+// POSITIONING
+// Inset
+.generate-spacing('.i', inset);
+
+//  Top
+.generate-spacing('.t', top, true);
+.generate-spacing('.t', top, true, percent);
+
+// Right
+.generate-spacing('.r', right, true);
+.generate-spacing('.r', right, true, percent);
+
+// Bottom
+.generate-spacing('.b', bottom, true);
+.generate-spacing('.b', bottom, true, percent);
+
+// Left
+.generate-spacing('.l', left, true);
+.generate-spacing('.l', left, true, percent);
diff --git a/lib/exports/spacing-mixins.less b/lib/exports/spacing-mixins.less
new file mode 100644
index 0000000000..f79196c5c8
--- /dev/null
+++ b/lib/exports/spacing-mixins.less
@@ -0,0 +1,67 @@
+/**
+ * Generate base and responsive atomic spacing classes.
+ *
+ * Usage example:
+ * .generate-spacing('.m', margin, true);
+ * .generate-spacing('.ml', margin-left, true, percent);
+ * .generate-spacing('.mx'; margin-left, margin-right; true);
+ * .generate-spacing('.pr', padding-right);
+ *
+ * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
+ * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
+ * @includeNegative: bool - Boolean to include generation of negative value classes.
+ * @type: px | percent - What set of value to generate.
+ */
+.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
+  & when (@type = px) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: var(~"--su@{value}") !important;
+            })
+          } },
+          0 1 2 4 6 8 12 16 24 32 48 64 96 128
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
+              })
+            } },
+            1 2 4 6 8 12 16 24 32 48 64 96 128
+        );
+    }
+  }
+
+  & when (@type = percent) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: @value !important;
+            })
+          } },
+          50% 100%
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: -@value !important;
+              })
+            } },
+            50% 100%
+        );
+    }
+  }
+}