diff --git a/site/layouts/partials/header_homepage.html b/site/layouts/partials/header_homepage.html
index a43714f8..a660c25e 100644
--- a/site/layouts/partials/header_homepage.html
+++ b/site/layouts/partials/header_homepage.html
@@ -1,4 +1,4 @@
-<section id="homepage-hero" class="hero is-medium is-info is-bold">
+<section id="homepage-hero" class="hero is-medium is-primary is-bold">
     <div class="hero-head">
         <nav id="hero-navbar" class="navbar is-dark is-size-6 is-fixed-top" role="navigation" aria-label="main navigation">
             {{ partial "nav_contents" . }}
diff --git a/src/scss/shared.scss b/src/scss/shared.scss
index da1c2465..f388af29 100644
--- a/src/scss/shared.scss
+++ b/src/scss/shared.scss
@@ -10,9 +10,8 @@
     transition: background-color 0.2s ease;
 }
 
-// TODO: $navbar-background-color is the wrong variable to use here, as it's a dark theme?
 .hero .navbar.is-freestanding {
-    background: #363636;
+    background: $navbar-background-color;
 }
 
 // https://github.com/jgthms/bulma/issues/935
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 7a3941b1..36f897c0 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,15 +1,23 @@
-@import "./yuzu.scss";
+/* 1. Import the initial variables */
+@import "./node_modules/bulma/sass/utilities/functions.sass";
+@import "./node_modules/bulma/sass/utilities/initial-variables.sass";
 
-// Override/configure the default color palette
-$info: $primary-color;
+/* 2. Set the derived variables */
+@import "./yuzu_before_derived.scss";
+@import "./node_modules/bulma/sass/utilities/derived-variables.sass";
+@import "./yuzu_after_derived.scss";
 
+/* 3. Misc customization of Bulma */
+$body-background-color: $background;
+$footer-background-color: $background;
+
+// Changes the navbar height to match discourse.
 $navbar-height: 64px;
-$body-background-color: darken(white, 10%);
 
 // Allows for larger icons with less padding
 $navbar-item-img-max-height: 2.75rem;
 
-$footer-background-color: $body-background-color;
-
+/* 4. Import the rest of Bulma */
 @import "./node_modules/bulma/bulma.sass";
-@import "./shared.scss";
\ No newline at end of file
+@import "./shared.scss";
+@import "./yuzu.scss";
\ No newline at end of file
diff --git a/src/scss/yuzu.scss b/src/scss/yuzu.scss
index 857b3a6c..e69de29b 100644
--- a/src/scss/yuzu.scss
+++ b/src/scss/yuzu.scss
@@ -1,3 +0,0 @@
-$dark-primary-color: #102027;
-$light-primary-color: #62727b;
-$primary-color: #37474f;
\ No newline at end of file
diff --git a/src/scss/yuzu_after_derived.scss b/src/scss/yuzu_after_derived.scss
new file mode 100644
index 00000000..3f3bc28f
--- /dev/null
+++ b/src/scss/yuzu_after_derived.scss
@@ -0,0 +1,2 @@
+$background: darken($dark, 8);
+$navbar-background-color: $dark;
diff --git a/src/scss/yuzu_before_derived.scss b/src/scss/yuzu_before_derived.scss
new file mode 100644
index 00000000..dabe15f9
--- /dev/null
+++ b/src/scss/yuzu_before_derived.scss
@@ -0,0 +1 @@
+$primary: #37474f;