diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
index 6c52205dc37..9756fd02110 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
@@ -1,2 +1,2 @@
 <div class="color-bg {{color}}"></div>
-<div class="color-name">${{color}}</div>
+<div class="color-name">var(--{{color}})</div>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
index f2a9d6595cb..8df374a6862 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
@@ -34,66 +34,66 @@
     </p>
     <pre>
       .parent {
-        <span class="hljs-attribute">font-size</span>: $font-up-3;
+        <span class="hljs-attribute">font-size</span>: var(--font-up-3);
         <span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
         .child {
-          <span>// If this is set to $font-down-3 in Discourse's default CSS,
-             the parent font-size increase above would make this equivilant to $font-0
-             ($font-down-3 + $font-up-3 = $font-0)</span>
+          <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
+             the parent font-size increase above would make this equivalent to var(--font-0)
+             (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
         }
       }
     </pre>
   </p>
 </div>
 
-{{#styleguide-example title="$font-up-6, 2.296em"}}
+{{#styleguide-example title="var(--font-up-6), 2.296em"}}
   <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-5, 2em"}}
+{{#styleguide-example title="var(--font-up-5), 2em"}}
   <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-4, 1.7511em"}}
+{{#styleguide-example title="var(--font-up-4), 1.7511em"}}
   <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-3, 1.5157em"}}
+{{#styleguide-example title="var(--font-up-3), 1.5157em"}}
   <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-2, 1.3195em"}}
+{{#styleguide-example title="var(--font-up-2), 1.3195em"}}
   <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-up-1, 1.1487em"}}
+{{#styleguide-example title="var(--font-up-1), 1.1487em"}}
   <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-0, 1em — base font"}}
+{{#styleguide-example title="var(--font-0), 1em — base font"}}
   <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-1, 0.8706em"}}
+{{#styleguide-example title="var(--font-down-1), 0.8706em"}}
   <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-2, 0.7579em"}}
+{{#styleguide-example title="var(--font-down-2), 0.7579em"}}
   <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-3, 0.6599em"}}
+{{#styleguide-example title="var(--font-down-3), 0.6599em"}}
   <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-4, 0.5745em"}}
+{{#styleguide-example title="var(--font-down-4), 0.5745em"}}
   <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-5, 0.5em"}}
+{{#styleguide-example title="var(--font-down-5), 0.5em"}}
   <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$font-down-6, 0.4355em"}}
+{{#styleguide-example title="var(--font-down-6), 0.4355em"}}
   <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
 {{/styleguide-example}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
index b233a376192..8f35784a94e 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
@@ -1,4 +1,4 @@
-{{#styleguide-example title="$primary"}}
+{{#styleguide-example title="primary"}}
   <section class="color-row">
     {{color-example color="primary-very-low"}}
     {{color-example color="primary-low"}}
@@ -11,7 +11,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$secondary"}}
+{{#styleguide-example title="secondary"}}
   <section class="color-row">
     {{color-example color="secondary-low"}}
     {{color-example color="secondary-medium"}}
@@ -20,7 +20,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$tertiary"}}
+{{#styleguide-example title="tertiary"}}
   <section class="color-row">
     {{color-example color="tertiary-low"}}
     {{color-example color="tertiary-medium"}}
@@ -29,14 +29,14 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$quaternary"}}
+{{#styleguide-example title="quaternary"}}
   <section class="color-row">
     {{color-example color="quaternary-low"}}
     {{color-example color="quaternary"}}
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$highlight"}}
+{{#styleguide-example title="highlight"}}
   <section class="color-row">
     {{color-example color="highlight-low"}}
     {{color-example color="highlight-medium"}}
@@ -45,7 +45,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$danger"}}
+{{#styleguide-example title="danger"}}
   <section class="color-row">
     {{color-example color="danger-low"}}
     {{color-example color="danger-low-mid"}}
@@ -54,7 +54,7 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$success"}}
+{{#styleguide-example title="success"}}
   <section class="color-row">
     {{color-example color="success-low"}}
     {{color-example color="success-medium"}}
@@ -62,14 +62,14 @@
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$love"}}
+{{#styleguide-example title="love"}}
   <section class="color-row">
     {{color-example color="love-low"}}
     {{color-example color="love"}}
   </section>
 {{/styleguide-example}}
 
-{{#styleguide-example title="$header"}}
+{{#styleguide-example title="header"}}
   <section class="color-row">
     {{color-example color="header_background"}}
   </section>
diff --git a/plugins/styleguide/assets/stylesheets/colors.scss b/plugins/styleguide/assets/stylesheets/colors.scss
index e1b4e28c498..6ca33307155 100644
--- a/plugins/styleguide/assets/stylesheets/colors.scss
+++ b/plugins/styleguide/assets/stylesheets/colors.scss
@@ -1,120 +1,117 @@
 .color-row {
   .primary-very-low {
-    background-color: var(--primary-very-low, $primary-very-low);
+    background-color: var(--primary-very-low);
   }
   .primary-low {
-    background-color: var(--primary-low, $primary-low);
+    background-color: var(--primary-low);
   }
   .primary-low-mid {
-    background-color: var(--primary-low-mid, $primary-low-mid);
+    background-color: var(--primary-low-mid);
   }
   .primary-medium {
-    background-color: var(--primary-medium, $primary-medium);
+    background-color: var(--primary-medium);
   }
   .primary-high {
-    background-color: var(--primary-high, $primary-high);
+    background-color: var(--primary-high);
   }
   .primary {
-    background-color: var(--primary, $primary);
+    background-color: var(--primary);
   }
   .secondary-low {
-    background-color: var(--secondary-low, $secondary-low);
+    background-color: var(--secondary-low);
   }
   .secondary-medium {
-    background-color: var(--secondary-medium, $secondary-medium);
+    background-color: var(--secondary-medium);
   }
   .secondary-high {
-    background-color: var(--secondary-high, $secondary-high);
+    background-color: var(--secondary-high);
   }
   .secondary {
-    background-color: var(--secondary, $secondary);
+    background-color: var(--secondary);
   }
   .tertiary-low {
-    background-color: var(--tertiary-low, $tertiary-low);
+    background-color: var(--tertiary-low);
   }
   .tertiary-medium {
-    background-color: var(--tertiary-medium, $tertiary-medium);
+    background-color: var(--tertiary-medium);
   }
   .tertiary-high {
-    background-color: var(--tertiary-high, $tertiary-high);
+    background-color: var(--tertiary-high);
   }
   .tertiary {
-    background-color: var(--tertiary, $tertiary);
+    background-color: var(--tertiary);
   }
   .quaternary-low {
-    background-color: var(--quaternary-low, $quaternary-low);
+    background-color: var(--quaternary-low);
   }
   .quaternary {
-    background-color: var(--quaternary, $quaternary);
+    background-color: var(--quaternary);
   }
   .highlight-low {
-    background-color: var(--highlight-low, $highlight-low);
+    background-color: var(--highlight-low);
   }
   .highlight-medium {
-    background-color: var(--highlight-medium, $highlight-medium);
+    background-color: var(--highlight-medium);
   }
   .highlight-high {
-    background-color: var(--highlight-high, $highlight-high);
+    background-color: var(--highlight-high);
   }
   .highlight {
-    background-color: var(--highlight, $highlight);
+    background-color: var(--highlight);
   }
   .danger-low {
-    background-color: var(--danger-low, $danger-low);
+    background-color: var(--danger-low);
   }
   .danger-low-mid {
-    background-color: var(--danger-low-mid, $danger-low-mid);
+    background-color: var(--danger-low-mid);
   }
   .danger-medium {
-    background-color: var(--danger-medium, $danger-medium);
+    background-color: var(--danger-medium);
   }
   .danger {
-    background-color: var(--danger, $danger);
+    background-color: var(--danger);
   }
   .success-low {
-    background-color: var(--success-low, $success-low);
+    background-color: var(--success-low);
   }
   .success-medium {
-    background-color: var(--success-medium, $success-medium);
+    background-color: var(--success-medium);
   }
   .success {
-    background-color: var(--success, $success);
+    background-color: var(--success);
   }
   .love-low {
-    background-color: var(--love-low, $love-low);
+    background-color: var(--love-low);
   }
   .love {
-    background-color: var(--love, $love);
+    background-color: var(--love);
   }
 
   .header_primary {
-    background-color: var(--header_primary, $header_primary);
+    background-color: var(--header_primary);
   }
 
   .header_background {
-    background-color: var(--header_background, $header_background);
+    background-color: var(--header_background);
   }
 
   .header_primary-low {
-    background-color: var(--header_primary-low, $header_primary-low);
+    background-color: var(--header_primary-low);
   }
 
   .header_primary-low-mid {
-    background-color: var(--header_primary-low-mid, $header_primary-low-mid);
+    background-color: var(--header_primary-low-mid);
   }
 
   .header_primary-medium {
-    background-color: var(--header_primary-medium, $header_primary-medium);
+    background-color: var(--header_primary-medium);
   }
 
   .header_primary-high {
-    background-color: var(--header_primary-high, $header_primary-high);
+    background-color: var(--header_primary-high);
   }
 
   .header_primary-very-high {
-    background-color: var(
-      --header_primary-very-high,
-      $header_primary-very-high
-    );
+    background-color: var(--header_primary-very-high);
   }
 }
diff --git a/plugins/styleguide/assets/stylesheets/styleguide.scss b/plugins/styleguide/assets/stylesheets/styleguide.scss
index 44c98340423..5f2b6425b4b 100644
--- a/plugins/styleguide/assets/stylesheets/styleguide.scss
+++ b/plugins/styleguide/assets/stylesheets/styleguide.scss
@@ -6,7 +6,7 @@
 
   .styleguide-note {
     padding: 1em;
-    background-color: var(--tertiary, $tertiary);
+    background-color: var(--tertiary);
     margin-bottom: 1em;
   }
 
@@ -20,7 +20,7 @@
       margin-left: 0;
 
       li.styleguide-heading {
-        color: var(--primary-medium, $primary-medium);
+        color: var(--primary-medium);
         text-transform: uppercase;
         font-size: 14px;
       }
@@ -29,7 +29,7 @@
         margin-bottom: 0.25em;
 
         a {
-          color: var(--primary, $primary);
+          color: var(--primary);
           font-size: 14px;
         }
 
@@ -47,7 +47,7 @@
 
   .styleguide-section {
     .section-title {
-      font-size: $font-up-5;
+      font-size: var(--font-up-5);
       font-weight: normal;
       margin-bottom: 0.5em;
     }
@@ -66,9 +66,9 @@
 
     .styleguide-example {
       .example-title {
-        color: var(--primary-medium, $primary-medium);
-        font-size: $font-0;
-        border-bottom: 1px solid var(--primary-low, $primary-low);
+        color: var(--primary-medium);
+        font-size: var(--font-0);
+        border-bottom: 1px solid var(--primary-low);
         margin-bottom: 1em;
       }
 
@@ -105,7 +105,7 @@
   }
 
   pre {
-    background: var(--primary-very-low, $primary-very-low);
+    background: var(--primary-very-low);
     white-space: pre-wrap;
     &.pre-inline {
       display: inline-block;
@@ -113,7 +113,7 @@
       vertical-align: bottom;
     }
     span {
-      color: var(--primary-medium, $primary-medium);
+      color: var(--primary-medium);
       &.hljs-attribute {
         color: teal;
       }
@@ -122,7 +122,7 @@
 
   p.reason {
     display: inline;
-    color: var(--primary-medium, $primary-medium);
+    color: var(--primary-medium);
     margin: 0 0 0 10px;
   }
 }
@@ -152,7 +152,7 @@
   grid-gap: 10px;
 
   .styleguide-icon {
-    background-color: var(--primary-low, $primary-low);
+    background-color: var(--primary-low);
     margin: 3px;
     text-align: center;
     padding: 10px;
@@ -163,7 +163,7 @@
       margin: 5px auto;
     }
     span {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
 }
diff --git a/plugins/styleguide/assets/stylesheets/typography.scss b/plugins/styleguide/assets/stylesheets/typography.scss
index 29cd8db9c8e..9550481c152 100644
--- a/plugins/styleguide/assets/stylesheets/typography.scss
+++ b/plugins/styleguide/assets/stylesheets/typography.scss
@@ -3,41 +3,41 @@ p[class*="font-"] {
 }
 
 .font-up-6 {
-  font-size: $font-up-6;
+  font-size: var(--font-up-6);
 }
 .font-up-5 {
-  font-size: $font-up-5;
+  font-size: var(--font-up-5);
 }
 .font-up-4 {
-  font-size: $font-up-4;
+  font-size: var(--font-up-4);
 }
 .font-up-3 {
-  font-size: $font-up-3;
+  font-size: var(--font-up-3);
 }
 .font-up-2 {
-  font-size: $font-up-2;
+  font-size: var(--font-up-2);
 }
 .font-up-1 {
-  font-size: $font-up-1;
+  font-size: var(--font-up-1);
 }
 .font-0 {
-  font-size: $font-0;
+  font-size: var(--font-0);
 }
 .font-down-1 {
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 .font-down-2 {
-  font-size: $font-down-2;
+  font-size: var(--font-down-2);
 }
 .font-down-3 {
-  font-size: $font-down-3;
+  font-size: var(--font-down-3);
 }
 .font-down-4 {
-  font-size: $font-down-4;
+  font-size: var(--font-down-4);
 }
 .font-down-5 {
-  font-size: $font-down-5;
+  font-size: var(--font-down-5);
 }
 .font-down-6 {
-  font-size: $font-down-6;
+  font-size: var(--font-down-6);
 }