diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index bbc4ae426..03042304b 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -883,7 +883,7 @@ export const HumanMessage = ({
                           !isEditing &&
                           (!files || files.length === 0)
                         ) && "ml-auto"
-                      } relative   flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
+                      } relative flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
                     >
                       {content}
                     </div>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e0e618e46..9c4e5a453 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -2,6 +2,136 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --text-50: #fafafa;
+    /* neutral-50 - Very light gray */
+    --text-100: #f5f5f5;
+    /* neutral-100, lighter - Light gray */
+    --text-200: #e5e5e5;
+    /* neutral-200, light - Lighter gray */
+    --text-300: #d4d4d4;
+    /* neutral-300, stronger - Light medium gray */
+    --text-400: #a3a3a3;
+    /* neutral-400, medium - Medium gray */
+    --text-500: #737373;
+    /* neutral-500, darkMedium - Dark medium gray */
+    --text-600: #525252;
+    /* neutral-600, dark - Dark gray */
+    --text-700: #404040;
+    /* neutral-700, solid - Very dark gray */
+    --text-800: #262626;
+    /* neutral-800, solidDark - Nearly black */
+    --text-900: #111827;
+    /* neutral-900 - Very dark, almost black */
+    --text-950: #0a0a0a;
+    /* solidDark - Nearly pure black */
+
+    --background: #fafafa;
+    /* 50 - Almost white */
+    --background-100: #f5f5f5;
+    /* neutral-100 - Very light gray */
+    --background-125: #f1f2f4;
+    /* gray-125 - Light grayish */
+    --background-150: #eaeaea;
+    /* gray-150 - Light gray */
+    --background-200: #e5e5e5;
+    /* neutral-200 - Light medium gray */
+    --background-300: #d4d4d4;
+    /* neutral-300 - Medium light gray */
+    --background-400: #a3a3a3;
+    /* neutral-400 - Medium gray */
+    --background-500: #737373;
+    /* neutral-500 - Medium dark gray */
+    --background-600: #525252;
+    /* neutral-600 - Dark gray */
+    --background-700: #404040;
+    /* neutral-700 - Very dark gray */
+    --background-800: #262626;
+    /* neutral-800 - Nearly black */
+    --background-900: #111827;
+    /* gray-900 - Very dark, almost black */
+    --background-inverted: #000000;
+    /* black - Pure black */
+
+    --background-emphasis: #f6f7f8;
+    /* Very light grayish blue */
+    --background-strong: #eaecef;
+    /* Light grayish blue */
+    --border: #e5e5e5;
+    /* gray-200 - Light gray */
+    --border-light: #f5f5f5;
+    /* gray-100 - Very light gray */
+    --border-medium: #d4d4d4;
+    /* gray-300 - Medium light gray */
+    --border-strong: #a3a3a3;
+    /* gray-400 - Medium gray */
+    --border-dark: #525252;
+    /* neutral-600 - Dark gray */
+
+    --link: #3b82f6;
+    /* blue-500 - Bright blue */
+    --link-hover: #1d4ed8;
+    /* blue-700 - Dark blue */
+    --error: #ef4444;
+    /* red-500 - Bright red */
+    --success: #059669;
+    /* emerald-600 - Deep green */
+    --alert: #f59e0b;
+    /* amber-600 - Orange */
+    --accent: #6366f1;
+    /* indigo-500 - Bright indigo */
+    --accent-hover: #4f46e5;
+    /* Darker indigo */
+
+    --black: #000000;
+    /* Pure black */
+    --white: #ffffff;
+    /* Pure white */
+
+    --code-text: #e0e0e0;
+    /* Light gray for code text */
+    --token-comment: #608b4e;
+    /* Muted green for comments */
+    --token-punctuation: #d4d4d4;
+    /* Light gray for punctuation */
+    --token-property: #569cd6;
+    /* Light blue for properties */
+    --token-selector: #e07b53;
+    /* Soft orange for selectors */
+    --token-atrule: #d18ad8;
+    /* Light purple for at-rules */
+    --token-function: #f0e68c;
+    /* Light yellow for functions */
+    --token-regex: #9cdcfe;
+    /* Light blue for regex */
+    --token-attr-name: #9cdcfe;
+    /* Light blue for attribute names */
+
+    --non-selectable: #f8d7da;
+    /* Light pink for non-selectable elements */
+    --highlight-text: #fef9c3;
+    /* Very light yellow for highlighted text */
+    --user-bubble: #f1f2f4;
+    /* near gray-100 - Very light grayish */
+    --ai-bubble: #272a2d;
+    /* Dark grayish for AI bubbles */
+    --document-color: #f43f5e;
+    /* pink-500 - Bright pink for documents */
+
+    --scrollbar-track: #f9fafb;
+    /* Very light gray for scrollbar track */
+    --scrollbar-thumb: #e5e7eb;
+    /* Light gray for scrollbar thumb */
+    --scrollbar-thumb-hover: #d1d5db;
+    /* Medium light gray for scrollbar thumb on hover */
+    --scrollbar-dark-thumb: #989a9c;
+    /* Medium gray for dark scrollbar thumb */
+    --scrollbar-dark-thumb-hover: #c7cdd2;
+    /* Light medium gray for dark scrollbar thumb on hover */
+  }
+}
+
 @layer utilities {
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
@@ -235,5 +365,6 @@ ol > li > p,
 ul > li > p {
   margin-top: 0;
   margin-bottom: 0;
-  display: inline; /* Make paragraphs inline to reduce vertical space */
+  display: inline;
+  /* Make paragraphs inline to reduce vertical space */
 }
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index f9d3fb93b..a061a6d53 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -70,122 +70,105 @@ module.exports = {
       },
       colors: {
         // code styling
-        "code-bg": "black", // black
-        "code-text": "#e0e0e0", // light gray
-        "token-comment": "#608b4e", // green
-        "token-punctuation": "#d4d4d4", // light gray
-        "token-property": "#569cd6", // blue
-        "token-selector": "#e07b53", // more vibrant orange
-        "token-atrule": "#d18ad8", // more vibrant purple
-        "token-function": "#f0e68c", // more vibrant light yellow
-        "token-regex": "#9cdcfe", // light blue
-        "token-attr-name": "#9cdcfe", // light blue
-
-        "non-selectable": "#f8d7da", // red-100
+        "code-bg": "var(--black)",
+        "code-text": "var(--code-text)",
+        "token-comment": "var(--token-comment)",
+        "token-punctuation": "var(--token-punctuation)",
+        "token-property": "var(--token-property)",
+        "token-selector": "var(--token-selector)",
+        "token-atrule": "var(--token-atrule)",
+        "token-function": "var(--token-function)",
+        "token-regex": "var(--token-regex)",
+        "token-attr-name": "var(--token-attr-name)",
+        "non-selectable": "var(--non-selectable)",
 
         // background
-        "background-search": "#ffffff", // white
+        background: "var(--background)",
+        "background-100": "var(--background-100)",
+        "background-125": "var(--background-125)",
+        "background-150": "var(--background-150)",
+        "background-200": "var(--background-200)",
+        "background-300": "var(--background-300)",
+        "background-400": "var(--background-400)",
+        "background-500": "var(--background-500)",
+        "background-600": "var(--background-600)",
+        "background-700": "var(--background-700)",
+        "background-800": "var(--background-800)",
+        "background-900": "var(--background-900)",
 
-        input: "#ffffff",
+        "background-inverted": "var(--background-inverted)",
+        "background-emphasis": "var(--background-emphasis)",
+        "background-strong": "var(--background-strong)",
+        "background-search": "var(--white)",
+        input: "var(--white)",
 
-        // Error colors
-        "error-50": "#fef2f2",
-        "error-100": "#fee2e2",
-        "error-200": "#fecaca",
-        "error-300": "#fca5a5",
-        "error-400": "#f87171",
-        "error-500": "#ef4444",
-        "error-600": "#dc2626",
-        "error-700": "#b91c1c",
-        "error-800": "#991b1b",
-        "error-900": "#7f1d1d",
+        "text-50": "var(--text-50)",
+        "text-100": "var(--text-100)",
+        "text-200": "var(--text-200)",
+        "text-300": "var(--text-300)",
+        "text-400": "var(--text-400)",
+        "text-500": "var(--text-500)",
+        "text-600": "var(--text-600)",
+        "text-700": "var(--text-700)",
+        "text-800": "var(--text-800)",
+        "text-900": "var(--text-900)",
+        "text-950": "var(--text-950)",
 
-        background: "#fafafa", // 50
-        "background-100": "#f5f5f5", // neutral-100
-        "background-125": "#F1F2F4", // gray-125
-        "background-150": "#EAEAEA", // gray-150
-        "background-200": "#e5e5e5", // neutral-200
-        "background-300": "#d4d4d4", // neutral-300
-        "background-400": "#a3a3a3", // neutral-400
-        "background-600": "#525252", // neutral-800
-        "background-500": "#737373", // neutral-400
-        "background-600": "#525252", // neutral-400
-        "background-700": "#404040", // neutral-400
-        "background-800": "#262626", // neutral-800
-        "background-900": "#111827", // gray-900
-        "background-inverted": "#000000", // black
-
-        "background-emphasis": "#f6f7f8",
-        "background-strong": "#eaecef",
-
-        // text or icons
-        "text-50": "#fafafa", // 50, neutral-50
-        "text-100": "#f5f5f5", // lighter, neutral-100
-        "text-200": "#e5e5e5", // light, neutral-200
-        "text-300": "#d4d4d4", // stronger, neutral-300
-        "text-400": "#a3a3a3", // medium, neutral-400
-        "text-500": "#737373", // darkMedium, neutral-500
-        "text-600": "#525252", // dark, neutral-600
-        "text-700": "#404040", // solid, neutral-700
-        "text-800": "#262626", // solidDark, neutral-800
-        "text-900": "#111827", // neutral-900
-        "text-950": "#0a0a0a", // solidDark, neutral-800
-
-        description: "#a3a3a3",
-        subtle: "#6b7280", // gray-500
-        default: "#4b5563", // gray-600
-        emphasis: "#374151", // gray-700
-        strong: "#111827", // gray-900
-
-        link: "#3b82f6", // blue-500
-        "link-hover": "#1d4ed8", // blue-700
-        inverted: "#ffffff", // white
-
-        // one offs
-        error: "#ef4444", // red-500
-        success: "#059669", // emerald-600
-        alert: "#f59e0b", // amber-600
-        accent: "#6366F1", // indigo-500
+        description: "var(--text-400)",
+        subtle: "var(--text-500)",
+        default: "var(--text-600)",
+        emphasis: "var(--text-700)",
+        strong: "var(--text-900)",
 
         // borders
-        border: "#d1d5db", // gray-200
-        "border-light": "#f3f4f6", // gray-100
-        "border-medium": "#d1d5db", // gray-300
-        "border-strong": "#9ca3af", // gray-400
-        "border-dark": "#525252", // neutral-600
-        "non-selectable-border": "#f5c2c7", // red-200
+        border: "var(--border)",
+        "border-light": "var(--border-light)",
+        "border-medium": "var(--border-medium)",
+        "border-strong": "var(--border-strong)",
+        "border-dark": "var(--border-dark)",
+        "non-selectable-border": "#f5c2c7",
+
+        inverted: "var(--white)",
+        link: "var(--link)",
+        "link-hover": "var(--link-hover)",
+
+        // one offs
+        error: "var(--error)",
+        success: "var(--success)",
+        alert: "var(--alert)",
+        accent: "var(--accent)",
 
         // hover
-        "hover-light": "#f3f4f6", // gray-100
-        "hover-lightish": "#EAEBEF", // gray-160
+        "hover-light": "var(--background-100)",
+        "hover-lightish": "var(--background-125)",
 
-        hover: "#e5e7eb", // gray-200
-        "hover-emphasis": "#d1d5db", // gray-300
-        "accent-hover": "#4F46E5",
+        hover: "var(--background-200)",
+        "hover-emphasis": "var(--background-300)",
+        "accent-hover": "var(--accent-hover)",
 
         // keyword highlighting
         highlight: {
-          text: "#fef9c3", // yellow-100
+          text: "var(--highlight-text)",
         },
 
         // scrollbar
         scrollbar: {
-          track: "#f9fafb",
-          thumb: "#e5e7eb",
-          "thumb-hover": "#d1d5db",
+          track: "var(--scrollbar-track)",
+          thumb: "var(--scrollbar-thumb)",
+          "thumb-hover": "var(--scrollbar-thumb-hover)",
 
           dark: {
-            thumb: "#989a9c",
-            "thumb-hover": "#c7cdd2",
+            thumb: "var(--scrollbar-dark-thumb)",
+            "thumb-hover": "var(--scrollbar-dark-thumb-hover)",
           },
         },
 
         // bubbles in chat for each "user"
-        user: "#F1F2F4", // near gray-100
-        ai: "#60a5fa", // blue-400
+        user: "var(--user-bubble)",
+        ai: "var(--ai-bubble)",
 
         // for display documents
-        document: "#f43f5e", // pink-500
+        document: "var(--document-color)",
 
         // light mode
         tremor: {