diff --git a/src/css/_about.scss b/src/css/_about.scss
index 624334a..94378af 100644
--- a/src/css/_about.scss
+++ b/src/css/_about.scss
@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 dd {
   margin-bottom: 10px;
diff --git a/src/css/_header.scss b/src/css/_header.scss
index 6b8f4ce..69c9094 100644
--- a/src/css/_header.scss
+++ b/src/css/_header.scss
@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 header {
   width: 100%;
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
index da05a11..97f9853 100644
--- a/src/css/_scorecard.scss
+++ b/src/css/_scorecard.scss
@@ -1,4 +1,4 @@
-@use "colors";
+@use "theme/colors";
 
 .popup-fixed {
   position: fixed;
diff --git a/src/css/theme/_breakpoints.scss b/src/css/theme/_breakpoints.scss
new file mode 100644
index 0000000..2bb908b
--- /dev/null
+++ b/src/css/theme/_breakpoints.scss
@@ -0,0 +1,30 @@
+// Inspired by https://dev.to/alberto/defining-responsive-breakpoints-made-easy-with-sass-mixins-26p0.
+
+$sm-width: "640px";
+$md-width: "768px";
+$lg-width: "1024px";
+$xl-width: "1280px";
+
+@mixin gt-xs() {
+  @media screen and (min-width: $sm-width) {
+    @content();
+  }
+}
+
+@mixin gt-sm() {
+  @media screen and (min-width: $md-width) {
+    @content();
+  }
+}
+
+@mixin gt-md() {
+  @media screen and (min-width: $lg-width) {
+    @content();
+  }
+}
+
+@mixin gt-lg() {
+  @media screen and (min-width: $xl-width) {
+    @content();
+  }
+}
diff --git a/src/css/_colors.scss b/src/css/theme/_colors.scss
similarity index 100%
rename from src/css/_colors.scss
rename to src/css/theme/_colors.scss
diff --git a/src/css/theme/_typography.scss b/src/css/theme/_typography.scss
new file mode 100644
index 0000000..657d67b
--- /dev/null
+++ b/src/css/theme/_typography.scss
@@ -0,0 +1,7 @@
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-md: 18px;
+$font-size-lg: 20px;
+$font-size-xl: 24px;
+$font-size-2xl: 30px;