diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index e8c10de3f..021003124 100644
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -1,43 +1,46 @@
 @import "./animation.scss";
 @import "./window.scss";
+@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap");
 
 @mixin light {
   --theme: light;
 
   /* color */
-  --white: white;
-  --black: rgb(48, 48, 48);
-  --gray: rgb(250, 250, 250);
-  --primary: rgb(29, 147, 171);
-  --second: rgb(231, 248, 255);
-  --hover-color: #f3f3f3;
-  --bar-color: rgba(0, 0, 0, 0.1);
-  --theme-color: var(--gray);
+  --white: var(--color-fanta-50);
+  --black: var(--color-black-900);
+  --gray: var(--color-mud-500); /* Main background */
+  --primary: var(--color-violetta-500); /* Accent */
+  --second: var(--color-mud-200); /* Secondary background */
+  --hover-color: var(--color-black-100);
+  --bar-color: var(--color-black-200); /* Scrollbar */
+  --theme-color: var(--gray); /* Keep referencing the main background */
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
   --card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
 
   /* stroke */
-  --border-in-light: 1px solid rgb(222, 222, 222);
+  --border-in-light: 1px solid var(--color-pipe-500);
 }
 
 @mixin dark {
   --theme: dark;
 
   /* color */
-  --white: rgb(30, 30, 30);
-  --black: rgb(187, 187, 187);
-  --gray: rgb(21, 21, 21);
-  --primary: rgb(29, 147, 171);
-  --second: rgb(27 38 42);
-  --hover-color: #323232;
+  --white: var(
+    --color-black-900
+  ); /* "Light" background elements in dark mode */
+  --black: var(--color-tan-50); /* Text color */
+  --gray: var(--color-black-950); /* Main background */
+  --primary: var(--color-violetta-400); /* Accent (lighter for dark mode) */
+  --second: var(--color-mauve-800); /* Secondary background */
+  --hover-color: var(--color-mauve-700);
 
-  --bar-color: rgba(255, 255, 255, 0.1);
+  --bar-color: var(--color-black-400); /* Scrollbar */
 
-  --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
+  --border-in-light: 1px solid var(--color-mauve-500);
 
-  --theme-color: var(--gray);
+  --theme-color: var(--gray); /* Keep referencing the main background */
 
   div:not(.no-dark) > svg {
     filter: invert(0.5);
@@ -57,6 +60,162 @@
 }
 
 :root {
+  /* Base color palette */
+  --color-tan-50: #fcf9f8;
+  --color-tan-100: #f9f2f1;
+  --color-tan-200: #f1e3df;
+  --color-tan-300: #ebd6d1;
+  --color-tan-400: #e3c6bf;
+  --color-tan-500: #ddbab1;
+  --color-tan-600: #c48778;
+  --color-tan-700: #a75c49;
+  --color-tan-800: #6e3c30;
+  --color-tan-900: #391f19;
+  --color-tan-950: #1c100c;
+  --color-black-50: #e8e8e8;
+  --color-black-100: #d1d1d1;
+  --color-black-200: #a3a3a3;
+  --color-black-300: #737373;
+  --color-black-400: #454545;
+  --color-black-500: #171717;
+  --color-black-600: #141414;
+  --color-black-700: #141414;
+  --color-black-800: #121212;
+  --color-black-900: #121212;
+  --color-black-950: #0f0f0f;
+  --color-red-50: #ffebeb;
+  --color-red-100: #ffdbdb;
+  --color-red-200: #ffb3b3;
+  --color-red-300: #ff8f8f;
+  --color-red-400: #ff6b6b;
+  --color-red-500: #ff4444;
+  --color-red-600: #ff0505;
+  --color-red-700: #c20000;
+  --color-red-800: #800000;
+  --color-red-900: #420000;
+  --color-red-950: #1f0000;
+  --color-brown-50: #f2e6e3;
+  --color-brown-100: #e7d0ca;
+  --color-brown-200: #ce9e92;
+  --color-brown-300: #b76f5d;
+  --color-brown-400: #8a4d3d;
+  --color-brown-500: #532e25;
+  --color-brown-600: #43251e;
+  --color-brown-700: #311b16;
+  --color-brown-800: #20120e;
+  --color-brown-900: #120a08;
+  --color-brown-950: #070403;
+  --color-purple-50: #ebeaf1;
+  --color-purple-100: #d8d4e2;
+  --color-purple-200: #aea7c3;
+  --color-purple-300: #877ca6;
+  --color-purple-400: #635983;
+  --color-purple-500: #423b57;
+  --color-purple-600: #352f46;
+  --color-purple-700: #272334;
+  --color-purple-800: #191721;
+  --color-purple-900: #0e0c12;
+  --color-purple-950: #070609;
+  --color-orange-50: #fdede7;
+  --color-orange-100: #fcded4;
+  --color-orange-200: #f9bda9;
+  --color-orange-300: #f79c7e;
+  --color-orange-400: #f47b53;
+  --color-orange-500: #f15a26;
+  --color-orange-600: #d33f0e;
+  --color-orange-700: #9e2f0a;
+  --color-orange-800: #691f07;
+  --color-orange-900: #351003;
+  --color-orange-950: #180702;
+  --color-teal-50: #e8f5f7;
+  --color-teal-100: #d2ecef;
+  --color-teal-200: #a1d7de;
+  --color-teal-300: #73c3ce;
+  --color-teal-400: #42aebd;
+  --color-teal-500: #32838e;
+  --color-teal-600: #286971;
+  --color-teal-700: #1f5057;
+  --color-teal-800: #143439;
+  --color-teal-900: #0b1c1e;
+  --color-teal-950: #050e0f;
+  --color-darkviolet-50: #e8e8ed;
+  --color-darkviolet-100: #d3d5de;
+  --color-darkviolet-200: #a8aabd;
+  --color-darkviolet-300: #7a7d9a;
+  --color-darkviolet-400: #565971;
+  --color-darkviolet-500: #353746;
+  --color-darkviolet-600: #2a2b37;
+  --color-darkviolet-700: #1f2029;
+  --color-darkviolet-800: #16171d;
+  --color-darkviolet-900: #0b0b0f;
+  --color-darkviolet-950: #040506;
+  --color-mud-50: #fefcfb;
+  --color-mud-100: #fcf9f8;
+  --color-mud-200: #f9f3f1;
+  --color-mud-300: #f6ece9;
+  --color-mud-400: #f3e6e2;
+  --color-mud-500: #f0e0db;
+  --color-mud-600: #d5a89a;
+  --color-mud-700: #ba7059;
+  --color-mud-800: #824836;
+  --color-mud-900: #41241b;
+  --color-mud-950: #20120d;
+  --color-fanta-50: #ffffff;
+  --color-fanta-100: #fffbfa;
+  --color-fanta-200: #fffbfa;
+  --color-fanta-300: #fff7f5;
+  --color-fanta-400: #fff3f0;
+  --color-fanta-500: #fff2ee;
+  --color-fanta-600: #ffa58a;
+  --color-fanta-700: #ff5b29;
+  --color-fanta-800: #c72e00;
+  --color-fanta-900: #611700;
+  --color-fanta-950: #330c00;
+  --color-pipe-50: #f8f2f2;
+  --color-pipe-100: #f3e8e8;
+  --color-pipe-200: #e6d0d0;
+  --color-pipe-300: #dab9b9;
+  --color-pipe-400: #cda2a2;
+  --color-pipe-500: #c08989;
+  --color-pipe-600: #aa5f5f;
+  --color-pipe-700: #824545;
+  --color-pipe-800: #562e2e;
+  --color-pipe-900: #2b1717;
+  --color-pipe-950: #140b0b;
+  --color-mauve-50: #e8e7ee;
+  --color-mauve-100: #d4d2e0;
+  --color-mauve-200: #aaa5c0;
+  --color-mauve-300: #7c759f;
+  --color-mauve-400: #585275;
+  --color-mauve-500: #363248;
+  --color-mauve-600: #2b2839;
+  --color-mauve-700: #201d2a;
+  --color-mauve-800: #17151e;
+  --color-mauve-900: #0b0a0f;
+  --color-mauve-950: #050406;
+  --color-violetta-50: #f2effa;
+  --color-violetta-100: #e5e0f5;
+  --color-violetta-200: #cac1eb;
+  --color-violetta-300: #b0a2e2;
+  --color-violetta-400: #9583d8;
+  --color-violetta-500: #7c66cf;
+  --color-violetta-600: #563bba;
+  --color-violetta-700: #412c8c;
+  --color-violetta-800: #2b1d5d;
+  --color-violetta-900: #160f2f;
+  --color-violetta-950: #0b0717;
+  --color-crevice-50: #fefcfb;
+  --color-crevice-100: #fcf5f3;
+  --color-crevice-200: #f9efeb;
+  --color-crevice-300: #f6e5df;
+  --color-crevice-400: #f3dbd3;
+  --color-crevice-500: #f0d3c9;
+  --color-crevice-600: #dd9a83;
+  --color-crevice-700: #ca623f;
+  --color-crevice-800: #8c4027;
+  --color-crevice-900: #441f13;
+  --color-crevice-950: #24100a;
+
   @include light;
 
   --window-width: 90vw;
@@ -90,8 +249,7 @@
 html {
   height: var(--full-height);
 
-  font-family: "Noto Sans", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: "Archivo", sans-serif;
 }
 
 body {
@@ -272,7 +430,7 @@ div.math {
 
 pre {
   position: relative;
-  
+
   &:hover .copy-code-button {
     pointer-events: all;
     transform: translateX(0px);
@@ -315,7 +473,7 @@ pre {
     display: inline-flex;
     justify-content: center;
     pointer-events: none;
-    button{
+    button {
       pointer-events: auto;
       margin-top: 3em;
       margin-bottom: 4em;
@@ -326,14 +484,18 @@ pre {
       text-align: center;
       color: white;
       background: #464e4e;
-    } 
+    }
   }
-  
+
   .expanded {
     background-image: none;
   }
   .collapsed {
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.06));
+    background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.8),
+      rgba(0, 0, 0, 0.06)
+    );
   }
 }