diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 5b056cba..e8e03783 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -1,5 +1,5 @@
 .banner {
-  margin: 1.25rem 0;
+  margin: var(--spacing-base) 0;
   padding: .75rem;
   border: 1px solid;
   border-radius: var(--rounded-lg);
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 4588ae2c..f2f88d3f 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -19,7 +19,7 @@ textarea {
   /* necessary for pagefind overrides */
 
   outline: none;
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--spacing-base);
   font-weight: 400 !important;
   line-height: var(--line-height-base);
   transition-property: border-color;
diff --git a/src/assets/styles/components/mastodon-post.css b/src/assets/styles/components/mastodon-post.css
index 5247247a..2f2b9122 100644
--- a/src/assets/styles/components/mastodon-post.css
+++ b/src/assets/styles/components/mastodon-post.css
@@ -1,6 +1,6 @@
 .mastodon-post-wrapper {
   border-bottom: 1px solid var(--gray-light);
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--spacing-base);
   padding-bottom: .25rem;
 }
 
diff --git a/src/assets/styles/components/pagefind.css b/src/assets/styles/components/pagefind.css
index 250073e1..6f3b1b8f 100644
--- a/src/assets/styles/components/pagefind.css
+++ b/src/assets/styles/components/pagefind.css
@@ -1,5 +1,5 @@
 .pagefind-ui {
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--spacing-base);
   --pagefind-ui-primary: var(--accent-color);
   --pagefind-ui-text: var(--text-color);
   --pagefind-ui-background: var(--color-lightest);
diff --git a/src/assets/styles/components/post-graph.css b/src/assets/styles/components/post-graph.css
index 97be575d..5fb24a17 100644
--- a/src/assets/styles/components/post-graph.css
+++ b/src/assets/styles/components/post-graph.css
@@ -1,6 +1,6 @@
 .post-graph {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 }
 
 .post-graph__wrapper {
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index dca37c2e..20c26e42 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -21,7 +21,7 @@ html {
 p,
 blockquote {
   line-height: var(--line-height-lg);
-  margin: 1.25rem 0;
+  margin: var(--spacing-base) 0;
 }
 
 blockquote {
diff --git a/src/assets/styles/pages/404.css b/src/assets/styles/pages/404.css
index 63009a5d..d18e8271 100644
--- a/src/assets/styles/pages/404.css
+++ b/src/assets/styles/pages/404.css
@@ -1,4 +1,4 @@
 .four-oh-four__wrapper .image__banner,
 .four-oh-four__wrapper a {
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--spacing-base);
 }
\ No newline at end of file
diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css
index d983db04..bf562715 100644
--- a/src/assets/styles/pages/now.css
+++ b/src/assets/styles/pages/now.css
@@ -11,8 +11,8 @@
 .now__section--text p > svg {
   display: inline;
   vertical-align: middle;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: var(--spacing-base);
+  width: var(--spacing-base);
 }
 
 .now__section--header {
diff --git a/src/assets/styles/pages/post.css b/src/assets/styles/pages/post.css
index 8757a824..2f8652f4 100644
--- a/src/assets/styles/pages/post.css
+++ b/src/assets/styles/pages/post.css
@@ -5,7 +5,7 @@
 
 /* footnotes */
 hr.footnotes-sep {
-  margin: 1.25rem 0;
+  margin: var(--spacing-base) 0;
 }
 
 .footnotes-list {
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index f6f786fe..75bc13a8 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -80,6 +80,9 @@
 
   --font-size-3xl: 1.875rem;
   --line-height-3xl: 2.25rem;
+  
+  /* spacing */
+  --spacing-base: 1.25rem; 
 
   /* radii */
   --rounded-none: 0;