diff --git a/assets/sass/_sass_variables.scss b/assets/sass/_sass_variables.scss
index b9d92a4..a3ace85 100644
--- a/assets/sass/_sass_variables.scss
+++ b/assets/sass/_sass_variables.scss
@@ -1,4 +1,5 @@
 // Variables
+// These need to be sass variables since they are used in sass functions and mixins.
 // Override sass variables in "assets/sass/_extra.scss"
 
 // Base line height, unitless.
@@ -70,7 +71,7 @@ $max-content-width: 1111px;
 // The max page width. Defaults to max-content-width.
 // Setting this to a larger value than max-content-width allows
 // content with class "stretch" to stretch out to the page edge.
-// $max-page-width: 1111px;
+$max-page-width: $max-content-width;
 
 // Show horizontal grid to help with debugging typography.
 $debug: false;
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
index 6657018..c2fb3a9 100644
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@@ -1,8 +1,5 @@
-$max-page-width: $max-content-width !default;
-
 :root {
   // Convert sass variables to css variables.
-  // These need to be sass variables sincethey are used in sass functions and mixins.
 
   @each $name, $size in $font-size {
     --fs-#{$name}: #{$size};
@@ -72,13 +69,22 @@ $max-page-width: $max-content-width !default;
   --ff-monospace: var(--ui-monospace);
 
   // Font weights.
-  --fw-headings:   700;
-  --fw-bolder:     900;
-  --fw-bold:       700;
-  --fw-medium:     500;
-  --fw-normal:     400;
-  --fw-light:      300;
-  --fw-lighter:    200;
+  --fw-headings: 700;
+  --fw-bolder: 900;
+  --fw-bold: 700;
+  --fw-medium: 500;
+  --fw-normal: 400;
+  --fw-light: 300;
+  --fw-lighter: 200;
+
+  // Spacing.
+  --spacing-xxl: calc(3rem * var(--base-line-height));
+  --spacing-xl: calc(2rem * var(--base-line-height));
+  --spacing-l: calc(1.5rem * var(--base-line-height));
+  --spacing-m: calc(1rem * var(--base-line-height));
+  --spacing-s: calc(0.75rem * var(--base-line-height));
+  --spacing-xs: calc(0.5rem * var(--base-line-height));
+  --spacing-xxs: calc(0.3rem * var(--base-line-height));
 
   // Border radius.
   --radius-xl: 1rem;
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index da243c9..1061b3d 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -2,13 +2,13 @@
 
 form {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 input,
 textarea,
 select {
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 label {
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
index 828cdaa..1c9edce 100644
--- a/assets/sass/base/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -12,7 +12,7 @@
 
 blockquote {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
   // Also indent the quote on both sides.
@@ -28,7 +28,7 @@ ol,
 ul,
 menu {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 dt {
@@ -76,7 +76,7 @@ hr {
 
 p {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
 
@@ -90,7 +90,7 @@ p {
 
 pre {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   font-family: var(--ff-monospace);
 }
 
diff --git a/assets/sass/base/headings/_headings.scss b/assets/sass/base/headings/_headings.scss
index 9f1b724..ece98e2 100644
--- a/assets/sass/base/headings/_headings.scss
+++ b/assets/sass/base/headings/_headings.scss
@@ -15,7 +15,7 @@ h5,
 %h5,
 h6,
 %h6 {
-  @include margin-block(1 .33, 'em');
+  margin-block: 1.5em .5em;
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
@@ -24,7 +24,7 @@ h6,
 
   // Smaller margin when a headeing is right after another heading.
   & + & {
-    @include margin-block-start(.5, 'em');
+    margin-block-start: .75em
   }
 
   // Set max text line width in main for readability.
@@ -36,7 +36,8 @@ h6,
 h1,
 %h1 {
   // h1 only on top of page so different margins.
-  @include margin-block(1 .5, 'rem');
+  margin-block-start: var(--spacing-m);
+  margin-block-end: var(--spacing-xs);
   font-size: var(--fs-xxl);
   letter-spacing: -.01em;
 }
diff --git a/assets/sass/base/images/_images.scss b/assets/sass/base/images/_images.scss
index 40edc98..67774a1 100644
--- a/assets/sass/base/images/_images.scss
+++ b/assets/sass/base/images/_images.scss
@@ -31,7 +31,7 @@ img {
 
 figure {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 
   &.image {
     figcaption {
@@ -81,6 +81,6 @@ figure {
 img {
   &.image {
     // Add vertical rhythm margins.
-    @include margin-block(0 1);
+    margin-block: 0 var(--spacing-m);
   }
 }
diff --git a/assets/sass/base/tables/_tables.scss b/assets/sass/base/tables/_tables.scss
index deeaa12..8c4e54e 100644
--- a/assets/sass/base/tables/_tables.scss
+++ b/assets/sass/base/tables/_tables.scss
@@ -4,7 +4,7 @@
 
 table {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Remove default spacing between table cells.
   border-collapse: collapse;
   // Prevent cramped-looking tables
diff --git a/assets/sass/components/box/_box.scss b/assets/sass/components/box/_box.scss
index 381b397..3fe62bf 100644
--- a/assets/sass/components/box/_box.scss
+++ b/assets/sass/components/box/_box.scss
@@ -20,8 +20,8 @@
 .box,
 %box {
   // Add vertical rhythm margins.
-  @include margin-block(1);
-  @include padding(.5);
+  margin-block: var(--spacing-m);
+  padding: var(--spacing-xs);
   border: 5px solid var(--color-border);
 
   // Sass compiles this to the selector: .box__title, %box__title {}
diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
index 2ec8df9..1be6346 100644
--- a/assets/sass/components/cards/_cards.scss
+++ b/assets/sass/components/cards/_cards.scss
@@ -6,12 +6,12 @@
 %cards {
   @extend %grid-group;
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
 }
 
 .card,
 %card {
-  @include padding(.5);
+  padding: var(--spacing-xs);
   border: 1px solid var(--color-border);
 
   &--highlight {
diff --git a/assets/sass/components/divider/_divider.scss b/assets/sass/components/divider/_divider.scss
index e74b7c8..b74ab29 100644
--- a/assets/sass/components/divider/_divider.scss
+++ b/assets/sass/components/divider/_divider.scss
@@ -5,12 +5,12 @@
 .divider,
 %divider {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
   border: 0;
   border-block-start: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {
-    @include margin-top(1);
+    margin-block-start: var(--spacing-m);
   }
 }
diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss
index 9231832..8caf42e 100644
--- a/assets/sass/components/language-selector/_language-selector.scss
+++ b/assets/sass/components/language-selector/_language-selector.scss
@@ -5,6 +5,6 @@
 }
 
 .language-icon {
-  @include margin-inline-end(.5);
+  margin-inline-end: var(--spacing-xs);
   fill: var(--color-text);
 }
diff --git a/assets/sass/components/list-straight-left/_list-straight-left.scss b/assets/sass/components/list-straight-left/_list-straight-left.scss
index 0c63764..0698740 100644
--- a/assets/sass/components/list-straight-left/_list-straight-left.scss
+++ b/assets/sass/components/list-straight-left/_list-straight-left.scss
@@ -10,7 +10,7 @@
     display: table-row;
 
     &::before {
-      @include padding-inline-end(.5);
+      padding-inline-end: var(--spacing-xs);
       display: table-cell;
       content: '\2981';
       font-size: var(--fs-s);
@@ -29,7 +29,7 @@
     counter-increment: table-ol;
 
     &::before {
-      @include padding-inline-end(.5);
+      padding-inline-end: var(--spacing-xs);
       display: table-cell;
       content: counter(table-ol) '.';
       font-size: var(--fs-s);
diff --git a/assets/sass/components/pager/_pager.scss b/assets/sass/components/pager/_pager.scss
index 24b033f..8d8ddbf 100644
--- a/assets/sass/components/pager/_pager.scss
+++ b/assets/sass/components/pager/_pager.scss
@@ -9,7 +9,7 @@
   @extend %flex-inline;
   @extend %link-nav;
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
   justify-content: center;
 
   .page-item {