diff --git a/static/src/scss/_variables.scss b/static/src/scss/_variables.scss
new file mode 100644
index 0000000..e505fdb
--- /dev/null
+++ b/static/src/scss/_variables.scss
@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+$body-bg: #17181C;
+$body-color: #DEE2E6;
+
+$primary: #E85537;
+$primary-light: #FF773D;
+$primary-lighter: #F19143;
+$primary-yellow: #FFB238;
+$primary-red: #B20600;
+
+$inline-code-color: #E2777A;
+$inline-code-background: #272822;
+$codeblock-background: #272822;
+
+$navbar-height: 40px;
+$footer-height: 110px;
+$headings-margin-bottom: 1.5rem;
+$paragraph-margin-bottom: $headings-margin-bottom * 0.85;
+
+$font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
+$font-family-mono: "JetBrains Mono", monospace;
+$font-size-base: 1.2rem;
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index ac89178..8d76015 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -1,28 +1,7 @@
-$body-bg: #17181C;
-$body-color: #DEE2E6;
-
-$primary: #E85537;
-$primary-light: #FF773D;
-$primary-lighter: #F19143;
-$primary-yellow: #FFB238;
-$primary-red: #B20600;
-
-$inline-code-color: #E2777A;
-$inline-code-background: #272822;
-$codeblock-background: #272822;
-
-$navbar-height: 40px;
-$footer-height: 110px;
-$headings-margin-bottom: 1.5rem;
-$paragraph-margin-bottom: $headings-margin-bottom * 0.85;
-
-$font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
-$font-family-mono: "JetBrains Mono", monospace;
-$font-size-base: 1.2rem;
-
+@import "variables";
+@import "fonts";
 @import "node_modules/bootstrap/scss/bootstrap";
 
-@import "fonts";
 @import "chroma";
 @import "main";
 @import "navbar";