diff --git a/assets/sass/mixins/debug/_debug.scss b/assets/sass/mixins/debug/_debug.scss
new file mode 100644
index 0000000..31472f9
--- /dev/null
+++ b/assets/sass/mixins/debug/_debug.scss
@@ -0,0 +1,20 @@
+// Output a horizontal grid to help with debugging typography.
+@mixin debug-grid() {
+  @if $debug == true {
+    $grid-height: #{$base-line-height + 'rem'};
+
+    position: relative;
+    // stylelint-disable-next-line  max-line-length
+    background-image: repeating-linear-gradient(180deg, $debug-color, $debug-color 1px, transparent 1px, transparent $grid-height);
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      width: 100%;
+      background-color: $debug-color;
+    }
+  }
+}