diff --git a/docs/assets/_sass/toc.scss b/docs/assets/_sass/toc.scss
index 0eb87b26..1ee23572 100644
--- a/docs/assets/_sass/toc.scss
+++ b/docs/assets/_sass/toc.scss
@@ -43,7 +43,7 @@ html {
 
   // ScrollSpy active styles (see toc.js tab for activation)
   .section-nav li.active>a {
-    color: #333;
+    color: $nav-text-active-color;
     font-weight: 500;
   }
 
@@ -56,13 +56,13 @@ html {
     text-decoration: none;
     display: block;
     padding: .125rem 0;
-    color: #ccc;
+    color: $nav-text-color;
     transition: all 50ms ease-in-out;
     /* 💡 This small transition makes setting of the active state smooth */
   }
 
   .section-nav a:hover,
   .section-nav a:focus {
-    color: #666;
+    color: $nav-text-focus-color;
   }
 }
\ No newline at end of file
diff --git a/docs/assets/_sass/variables.scss b/docs/assets/_sass/variables.scss
index 1f12ce6b..cc625fe8 100644
--- a/docs/assets/_sass/variables.scss
+++ b/docs/assets/_sass/variables.scss
@@ -2,6 +2,11 @@
 $large-breakpoint: 64em !default;
 $medium-breakpoint: 42em !default;
 
+// Navigation
+$nav-text-color: #ccc !default;
+$nav-text-active-color: #333 !default;
+$nav-text-focus-color: #666 !default;
+
 // Headers
 $header-heading-color: #fff !default;
 $header-bg-color: #008383 !default;