diff --git a/megatype.scss b/megatype.scss
index 4d5723e..138b094 100644
--- a/megatype.scss
+++ b/megatype.scss
@@ -29,7 +29,8 @@ $debug-allow: false !default;
 @import "megatype/typography";
 @import "megatype/debug";
 @import "megatype/text-link";
+@import "megatype/box";
 
 // import test css — enable to output some test styles
 // @import "megatype/test/globals";
-// @import "megatype/test/typography";
+// @import "megatype/test/defaults";
diff --git a/megatype/_box.scss b/megatype/_box.scss
new file mode 100644
index 0000000..42adf52
--- /dev/null
+++ b/megatype/_box.scss
@@ -0,0 +1,79 @@
+// =====================================================
+// ----------------- Megatype box items ----------------
+// =====================================================
+// @author Thomas Bredin-Grey <tom@studiothick.com>
+// Megatype: https://github.com/StudioThick/megatype
+// =====================================================
+
+// Type box mixin centers a box inside of the grid. Great for elements like buttons.
+@mixin type-box($size, $line-height, $padding: 0, $bottom: 0, $border: 0) {
+    font-size: $size;
+    line-height: $line-height;
+    display: inline-block;
+
+    @if $border != false or $border != 0 or $border != 0px {
+        @if unit($border) == px {
+            $border: px-to-rem($border);
+        }
+    }
+    @debug $border;
+
+    $total: 0;
+
+    @if $border == false or $border == 0 or $border == 0rem {
+        padding: $padding;
+        $total: $padding + $line-height * $size;
+    } @else {
+        padding: $padding - $border /2;
+        border-width: rem-to-px($border);
+        $total: $padding + $line-height * $size;
+    }
+
+    $remainder: $current-rootsize - (rem-to-px($total) % $current-rootsize);
+    @debug $current-rootsize;
+    @debug $remainder;
+
+    @if $remainder != 0 or $remainder != 0px {
+        position: relative;
+        top: px-to-rem($remainder);
+        margin-bottom: $bottom + px-to-rem($remainder * 2);
+    }
+}
+
+/*
+ Example usage:
+*/
+// .button {
+//     background: none;
+//     text-decoration: none;
+//     margin: 0;
+//     font-weight: bold-of($sans);
+//     font-family: font-family-of($sans);
+//     background-color: tomato;
+
+//     @include type-box(1rem, 1, 0.5rem, 1rem);
+
+//     &,
+//     &:hover,
+//     &:focus {
+//         color: palette(white);
+//         background-image: none;
+//     }
+
+//     &:hover,
+//     &:focus {
+//         background-color: purple;
+//     }
+// }
+
+// .button-outline {
+//     background-color: transparent;
+//     color: tomato;
+//     @include type-box(1rem, 1, 0.5rem, 1rem, 1px);
+//     border-style: solid;
+
+//     &:hover,
+//     &:focus {
+//         border-color: purple;
+//     }
+// }
\ No newline at end of file
diff --git a/megatype/test/_defaults.scss b/megatype/test/_defaults.scss
index 96e8503..8916527 100755
--- a/megatype/test/_defaults.scss
+++ b/megatype/test/_defaults.scss
@@ -432,3 +432,38 @@ th {
 	border-bottom: 2px solid palette(black);
 }
 
+.button {
+    background: none;
+    text-decoration: none;
+    margin: 0;
+    font-weight: bold-of($sans);
+    font-family: font-family-of($sans);
+    background-color: tomato;
+
+    @include type-box(1rem, 1, 0.5rem, 1rem);
+
+    &,
+    &:hover,
+    &:focus {
+        color: palette(white);
+        background-image: none;
+    }
+
+    &:hover,
+    &:focus {
+        background-color: purple;
+    }
+}
+
+.button-outline {
+    background-color: transparent;
+    color: tomato;
+    @include type-box(1rem, 1, 0.5rem, 1rem, 1px);
+    border-style: solid;
+
+    &:hover,
+    &:focus {
+        border-color: purple;
+    }
+}
+