Move some styles fron zen to base. Add margin-top and margin bottom classes for all spacing levels. Add footer component.

assets/sass/components/button/_button.scss

@@ -15,20 +15,20 @@ button,
 [type='reset'],
 [type='submit'] {
   @extend %button--disabled;
-  @include margin-right(.75);
-  @include margin-bottom(.75);
-  @include padding(.2 1);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
   font-family: var(--ff-headings);
   text-decoration: none;
   text-align: center;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  padding: .2rem 1rem;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
   color: var(--color-button-text);
   background-color: var(--color-button);
   border: 0;
-  border-radius: var(--radius-m);
+  border-radius: var(--radius-s);
 
   &:hover,
   &:focus,
@@ -44,10 +44,10 @@ button,
 .button,
 %button {
   &--small {
-    @include margin-right(.3);
-    @include margin-bottom(.3);
-    @include padding(.1 .5);
     font-size: var(--fs-xs);
+    margin-right: .5rem;
+    margin-bottom: .5rem;
+    padding: .2rem .75rem;
   }
 
   &--alt {

assets/sass/components/footer/_footer.scss

@@ -0,0 +1,12 @@
+// Branding footer
+
+.footer,
+%footer {
+  padding-block: var(--gutters);
+  background-color: var(--color-footer-bg);
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}

assets/sass/components/header/_header.scss

@@ -2,6 +2,7 @@
 
 .header,
 %header {
+  padding-block: var(--gutters);
   display: flex;
   flex-direction: column;
   gap: var(--gutters);
@@ -24,6 +25,7 @@
   // The name of the website.
   &__site-name {
     margin: 0;
+    line-height: 1;
   }
 
   // The link around the name of the website.

assets/sass/components/spacing/_spacing.scss

@@ -0,0 +1,9 @@
+@each $name, $space in $spacing {
+  .mt--#{$name} {
+    @include margin-top($space);
+  }
+
+  .mb--#{$name} {
+    @include margin-bottom($space);
+  }
+}