diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
index 5b1e80a..a77b528 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroModel/HeroModel.scss
@@ -42,7 +42,7 @@
       border: none !important;
       font-family: monospace;
       //text-shadow: -5px 5px 0px #d5d5d5, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd, 2px 2px 2px rgba(206,89,55,0);
-      color: #ffffff;
+      color: rgb(var(--lsd-text-primary));
     }
   }
 }
@@ -53,9 +53,9 @@
   position: absolute;
   background: linear-gradient(
     0deg,
-    rgb(0, 0, 0) 37%,
-    rgb(0, 0, 0) 0%,
-    rgba(0, 0, 0, 0) 100%
+    rgb(var(--lsd-surface-primary)) 37%,
+    rgb(var(--lsd-surface-primary)) 0%,
+    rgba(var(--lsd-surface-primary), 0) 100%
   );
   bottom: -0;
   left: 0;