diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
index e9318c9..9eb2310 100644
--- a/src/sass/_mixins.scss
+++ b/src/sass/_mixins.scss
@@ -51,3 +51,26 @@
     @include svg-icon;
   }
 }
+
+///  Responsiveness
+
+// Between a minimum and maximum breakpoint
+@mixin between-breakpoints($min, $max) {
+  @media (min-width: map.get(tokens.$breakpoints, $min)) and (max-width: (map.get(tokens.$breakpoints, $max) - 1px)) {
+    @content;
+  }
+}
+
+// Apply styling past a specific breakpoint
+@mixin from-breakpoint($w) {
+  @media (min-width: map.get(tokens.$breakpoints, $w)) {
+    @content;
+  }
+}
+
+// Helper for constructing to-* mixins
+@mixin to-breakpoint($w) {
+  @media (max-width: (map.get(tokens.$breakpoints, $w) - 1px)) {
+    @content;
+  }
+}
diff --git a/src/sass/_tokens.scss b/src/sass/_tokens.scss
index 5fc5b2c..46fbbf9 100644
--- a/src/sass/_tokens.scss
+++ b/src/sass/_tokens.scss
@@ -80,3 +80,14 @@ $duration: (
 $spacing: (
   xs: 0.25rem,
 );
+
+// Responsiveness
+// These values are borrowed from Tailwind: https://tailwindcss.com/docs/responsive-design#overview
+$breakpoints: (
+  zero: 0,
+  sm: 40rem,
+  base: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+  "2xl": 96rem,
+);