diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 1ab8d70..31c97b0 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -40,13 +40,14 @@
   @import url("/assets/fonts/inter.css");
 
   $primary: #2c3e50;
+  $primary-lighter: #394F66;
   $background: white;
 
   html {
     --default-font: "Inter", sans-serif;
     --monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
     --foreground: #{$primary};
-    --foreground-lighter: #{color.scale($primary, $lightness: 50%)};
+    --foreground-lighter: #{$primary-lighter};
     --background: #{$background};
     --background-emph: #{color.scale($background, $lightness: -3%)};
 
@@ -67,7 +68,7 @@
       --foreground: #{$background};
       --foreground-lighter: #{color.scale($background, $lightness: -50%)};
       --background: #{$primary};
-      --background-emph: #{color.scale($primary, $lightness: 5%)};
+      --background-emph: #{$primary-lighter};
     }
   }