From 838e5b2af7d90bc82e9890bc02605713e5919a0d Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Tue, 20 Jun 2023 19:21:00 -0300
Subject: [PATCH] feat[tailwind colors]: Change all tailwind default colors to
 variables colors

---
 .../components/parameterComponent/index.tsx   |  6 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 28 +++---
 .../src/alerts/alertDropDown/index.tsx        | 12 +--
 src/frontend/src/alerts/error/index.tsx       |  8 +-
 src/frontend/src/alerts/notice/index.tsx      |  8 +-
 src/frontend/src/alerts/success/index.tsx     |  6 +-
 .../components/CrashErrorComponent/index.tsx  | 10 +--
 .../EditFlowSettingsComponent/index.tsx       |  2 +-
 .../ExtraSidebarComponent/index.tsx           | 30 +++----
 .../ReactTooltipComponent/index.tsx           |  2 +-
 .../chatComponent/buildTrigger/index.tsx      |  2 +-
 .../chatComponent/chatMessage/index.tsx       |  2 +-
 .../chatComponent/chatTrigger/index.tsx       |  4 +-
 .../components/codeAreaComponent/index.tsx    |  8 +-
 .../components/dropdownComponent/index.tsx    | 12 +--
 .../src/components/floatComponent/index.tsx   |  6 +-
 .../components/menuBar/index.tsx              |  6 +-
 .../src/components/headerComponent/index.tsx  |  4 +-
 .../src/components/inputComponent/index.tsx   | 12 +--
 .../components/inputFileComponent/index.tsx   |  6 +-
 .../components/inputListComponent/index.tsx   |  8 +-
 .../src/components/intComponent/index.tsx     |  6 +-
 .../src/components/loadingComponent/index.tsx |  4 +-
 .../src/components/promptComponent/index.tsx  |  8 +-
 .../components/textAreaComponent/index.tsx    |  8 +-
 .../src/components/toggleComponent/index.tsx  |  6 +-
 .../src/components/ui/rename-label.tsx        |  2 +-
 src/frontend/src/index.css                    | 86 ++++++++++++++++++-
 src/frontend/src/modals/ApiModal/index.tsx    |  4 +-
 .../src/modals/EditNodeModal/index.tsx        | 12 +--
 .../NodeModal/components/ModalField/index.tsx |  4 +-
 src/frontend/src/modals/NodeModal/index.tsx   | 16 ++--
 .../src/modals/chatModal/chatInput/index.tsx  | 10 +--
 .../modals/chatModal/chatMessage/index.tsx    | 18 ++--
 .../modals/chatModal/fileComponent/index.tsx  |  8 +-
 src/frontend/src/modals/chatModal/index.tsx   | 18 ++--
 .../src/modals/codeAreaModal/index.tsx        |  4 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/flowSettingsModal/index.tsx    |  2 +-
 .../src/modals/genericModal/index.tsx         |  4 +-
 .../modals/importModal/buttonBox/index.tsx    |  2 +-
 src/frontend/src/modals/importModal/index.tsx | 20 ++---
 src/frontend/src/modals/promptModal/index.tsx | 22 ++---
 .../src/modals/textAreaModal/index.tsx        | 22 ++---
 .../ConnectionLineComponent/index.tsx         |  4 +-
 .../components/DisclosureComponent/index.tsx  |  8 +-
 .../components/PageComponent/index.tsx        |  8 +-
 .../extraSidebarComponent/index.tsx           | 20 ++---
 .../components/nodeToolbarComponent/index.tsx | 14 +--
 src/frontend/tailwind.config.js               | 74 ++++++++++++++++
 50 files changed, 378 insertions(+), 220 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 65f946ba2..e2c651519 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -121,12 +121,12 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-dark-gray dark:text-white mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
           {title}
-          <span className="text-red-600">{required ? " *" : ""}</span>
+          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
         </div>
         {left &&
         (type === "str" ||
@@ -153,7 +153,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "w-3 h-3 rounded-full border-2 bg-white dark:bg-dark-gray"
               )}
               style={{
                 borderColor: color,
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index fdf830408..378a02344 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -75,11 +75,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-ring" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+          selected ? "border border-ring" : "border dark:border-almost-dark-gray",
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-high-dark-gray"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-almost-dark-gray dark:bg-dark-gray dark:text-white ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -89,7 +89,7 @@ export default function GenericNode({
             />
             <div className="ml-2 truncate">
               <ShadTooltip delayDuration={1500} content={data.type}>
-                <div className="ml-2 truncate text-gray-800">{data.type}</div>
+                <div className="ml-2 truncate text-dark-gray">{data.type}</div>
               </ShadTooltip>
             </div>
           </div>
@@ -122,25 +122,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full bg-almost-medium-green opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-red-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-medium-red opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-medium-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-medium-gray opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-medium-gray hover:dark:text-medium-low-gray transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
@@ -149,7 +149,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5 text-gray-800">
+        <div className="h-full w-full py-5 text-dark-gray">
           <div className="w-full px-5 pb-3 text-sm text-muted-foreground">
             {data.node.description}
           </div>
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index edd3bb23f..7ba779c02 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,13 +24,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
+      className="z-10 py-3 pb-4 px-2 rounded-md bg-white dark:bg-dark-gray ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
     >
-      <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
+      <div className="flex pl-3 flex-row justify-between text-md font-medium text-dark-gray dark:text-light-gray">
         Notifications
         <div className="flex gap-3 pr-3 ">
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
             onClick={() => {
               closePopUp();
               setTimeout(clearNotificationList, 100);
@@ -39,14 +39,14 @@ export default function AlertDropdown({}: AlertDropdownType) {
             <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
           </button>
           <button
-            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
+            className="text-dark-gray hover:text-medium-red dark:text-light-gray dark:hover:text-medium-red"
             onClick={closePopUp}
           >
             <XMarkIcon className="h-5 w-5" />
           </button>
         </div>
       </div>
-      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-gray-900 dark:text-gray-300">
+      <div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-dark-gray dark:text-medium-low-gray">
         {notificationList.length !== 0 ? (
           notificationList.map((alertItem, index) => (
             <SingleAlert
@@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             />
           ))
         ) : (
-          <div className="h-full w-full pb-16 text-gray-500 dark:text-gray-500 flex justify-center items-center">
+          <div className="h-full w-full pb-16 text-medium-gray dark:text-medium-gray flex justify-center items-center">
             No new notifications
           </div>
         )}
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index bcabe764f..01c8fbb7e 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,21 +39,21 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-red-50 dark:bg-red-900 p-4 cursor-pointer"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-red dark:bg-dark-red p-4 cursor-pointer"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircleIcon
-              className="h-5 w-5 text-red-400 dark:text-red-50"
+              className="h-5 w-5 text-light-red dark:text-light-red"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-red-800 dark:text-white/80">
+            <h3 className="text-sm font-medium text-almost-dark-red dark:text-white/80">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-red-700 dark:text-red-50">
+              <div className="mt-2 text-sm text-medium-dark-red dark:text-light-red">
                 <ul className="list-disc space-y-1 pl-5">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 81dce8ca0..004d63bc7 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-blue-50 dark:bg-blue-900 p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue dark:bg-dark-blue p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <InformationCircleIcon
-              className="h-5 w-5 text-blue-400 dark:text-blue-50"
+              className="h-5 w-5 text-medium-blue dark:text-light-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>
+            <p className="text-sm text-medium-dark-blue dark:text-white/80">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-medium-dark-blue dark:text-light-blue hover:dark:text-blue-10 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index d915adfcd..391a5831f 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-green-50 dark:bg-green-900 p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-light-green dark:bg-dark-green p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircleIcon
-              className="h-5 w-5 text-green-400 dark:text-green-50"
+              className="h-5 w-5 text-medium-green dark:text-light-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800 dark:text-white/80">
+            <p className="text-sm font-medium text-medium-dark-green dark:text-white/80">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index adc8909a8..c498e590a 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,11 +1,11 @@
 export default function CrashErrorComponent({ error, resetErrorBoundary }) {
   return (
-    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-dark-gray bg-opacity-50 z-50">
       <div className="bg-white max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
-        <h1 className="text-red-500 text-3xl mb-4">
+        <h1 className="text-medium-red text-3xl mb-4">
           Oops! An unknown error has occurred.
         </h1>
-        <p className="text-gray-700 mb-4 text-xl">
+        <p className="text-almost-dark-gray mb-4 text-xl">
           Please click the 'Reset Application' button to restore the
           application's state. If the error persists, please create an issue on
           our GitHub page. We apologize for any inconvenience this may have
@@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
         <div className="flex justify-center">
           <button
             onClick={resetErrorBoundary}
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
+            className="bg-almost-dark-blue hover:bg-medium-dark-blue text-white font-bold py-2 px-4 rounded mr-4"
           >
             Reset Application
           </button>
@@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
             href="https://github.com/logspace-ai/langflow/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+            className="bg-medium-red hover:bg-medium-dark-red text-white font-bold py-2 px-4 rounded"
           >
             Create Issue
           </a>
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 90e8f90a6..c24546af4 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="text-red-500 animate-pulse ml-10">
+            <span className="text-medium-red animate-pulse ml-10">
               Character limit reached
             </span>
           )}
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index e03db68c8..abf04c273 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -19,9 +19,9 @@ export default function ExtraSidebar() {
       <aside
         className={` ${
           isStackedOpen ? "w-52" : "w-0 "
-        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
+        } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-almost-dark-gray transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
+        <div className="w-52 dark:bg-dark-gray border dark:border-almost-dark-gray  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
@@ -33,16 +33,16 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-muted text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                              ? "bg-muted text-high-dark-gray"
+                              : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
                           )}
                         >
                           <item.icon
                             className={classNames(
                               item.href.split("/")[2] === current[4]
-                                ? "text-gray-500"
-                                : "text-gray-400 group-hover:text-gray-500",
+                                ? "text-medium-gray"
+                                : "text-almost-medium-gray group-hover:text-medium-gray",
                               "mr-3 flex-shrink-0 h-6 w-6"
                             )}
                           />
@@ -60,22 +60,22 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-muted text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                                  ? "bg-muted text-high-dark-gray"
+                                  : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-medium-indigo"
                               )}
                             >
                               <item.icon
-                                className="mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                className="mr-3 h-6 w-6 flex-shrink-0 text-almost-medium-gray group-hover:text-medium-gray"
                                 aria-hidden="true"
                               />
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
                                   open
-                                    ? "text-gray-400 rotate-90"
-                                    : "text-gray-300",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+                                    ? "text-almost-medium-gray rotate-90"
+                                    : "text-medium-low-gray",
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-almost-medium-gray"
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -93,8 +93,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-muted text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
+                                      ? "bg-muted text-high-dark-gray"
+                                      : "bg-white text-medium-dark-gray hover:bg-muted hover:text-high-dark-gray",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >
diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx
index cb2a54f7c..2ecfd1af9 100644
--- a/src/frontend/src/components/ReactTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ReactTooltipComponent/index.tsx
@@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
         id={selector}
         content={content}
         className={classNames(
-          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
+          "!bg-white !text-xs !font-normal !text-almost-dark-gray !shadow-md !opacity-100 z-[9999]",
           className
         )}
         place={position}
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 8b11ffdcb..4ea9cb162 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -143,7 +143,7 @@ export default function BuildTrigger({
         >
           <div
             className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
-            bg-buildBackground dark:border-gray-600 cursor-pointer"
+            bg-buildBackground dark:border-medium-dark-gray cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
diff --git a/src/frontend/src/components/chatComponent/chatMessage/index.tsx b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
index 8ca2e56e3..6bca7e58e 100644
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@@ -48,7 +48,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
         </div>
       ) : (
         <div className="w-full text-end">
-          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
+          <div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-almost-dark-gray bg-light-gray font-normal rounded-tr-none">
             {chat.message}
           </div>
         </div>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 1b7cb2f12..3e2b7bc73 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -36,13 +36,13 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
           side="left"
         >
           <div
-            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 dark:border-gray-600 cursor-pointer"
+            className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-almost-dark-blue dark:border-medium-dark-gray cursor-pointer"
             onClick={handleClick}
           >
             <button>
               <div className="flex gap-3">
                 <MessagesSquare
-                  className="h-6 w-6  text-blue-100 fill-blue-100"
+                  className="h-6 w-6  text-medium-light-blue fill-medium-light-blue"
                   style={{ color: "white" }}
                   strokeWidth={1.5}
                 />
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 399ab40b2..f23a2bd9d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -46,11 +46,11 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray border-1 shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -69,7 +69,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray ml-3" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 0f4942198..aa7645e96 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,9 +31,9 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md shadow-sm sm:text-sm border-medium-low-gray border-1" +
                       INPUT_STYLE
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                    : "ring-1 ring-light-slate dark:ring-medium-slate w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-high-dark-gray dark:focus:ring-1 dark:focus:ring-medium-dark-gray dark:focus-visible:ring-high-dark-gray dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
@@ -44,7 +44,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronUpDownIcon
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-almost-medium-gray"
                     aria-hidden="true"
                   />
                 </span>
@@ -70,11 +70,11 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active
-                            ? " bg-accent dark:bg-white dark:text-gray-500"
+                            ? " bg-accent dark:bg-white dark:text-medium-gray"
                             : "",
                           editNode
-                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-medium-low-gray dark:bg-dark-gray"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-medium-low-gray dark:bg-dark-gray"
                         )
                       }
                       value={option}
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 2fc80962b..286662351 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -56,11 +56,11 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm ring-offset-light-gray sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 1b2728d51..edf19283d 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -70,7 +70,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 openPopUp(<FlowSettingsModal />);
               }}
             >
-              <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -78,7 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 undo();
               }}
             >
-              <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Undo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -86,7 +86,7 @@ export const MenuBar = ({ flows, tabId }) => {
                 redo();
               }}
             >
-              <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
+              <Redo className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
               Redo
             </DropdownMenuItem>
             <DropdownMenuSeparator />
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index d59078836..3d955a0e4 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -60,7 +60,7 @@ export default function Header() {
           <Button
             asChild
             variant="outline"
-            className="text-gray-600 dark:text-gray-300 "
+            className="text-medium-dark-gray dark:text-medium-low-gray "
           >
             <a
               href="https://github.com/logspace-ai/langflow"
@@ -85,7 +85,7 @@ export default function Header() {
             )}
           </button> */}
           <button
-            className="text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 relative"
+            className="text-medium-dark-gray hover:text-medium-gray dark:text-medium-low-gray dark:hover:text-light-gray relative"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               setNotificationCenter(false);
               const { top, left } = (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 98e643871..5e449d7e5 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -46,13 +46,13 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
-          disabled ? " bg-gray-200 dark:bg-gray-700" : "",
+          "block w-full pr-12 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm focus:placeholder-transparent",
+          disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
-            : "ring-offset-gray-200" + INPUT_STYLE,
+            : "ring-offset-light-gray" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
@@ -65,8 +65,8 @@ export default function InputComponent({
         <button
           className={classNames(
             editNode
-              ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
-              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+              ? "absolute inset-y-0 right-0 pr-2 items-center text-medium-dark-gray"
+              : "absolute inset-y-0 right-0 items-center px-4 text-medium-dark-gray"
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 9f801138f..6fb2874bc 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,11 +78,11 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
+              ? "truncate placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+              : "truncate block w-full text-medium-gray dark:text-medium-low-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE +
-                (disabled ? " bg-gray-200" : "")
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 4bb82147f..2fbf98891 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,10 +32,10 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-medium-gray block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                   INPUT_STYLE
-                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
-                  (disabled ? " bg-gray-200" : "") +
+                : "block w-full form-input rounded-md border-medium-low-gray shadow-sm focus:border-medium-gray focus:ring-medium-gray sm:text-sm" +
+                  (disabled ? " bg-light-gray" : "") +
                   "focus:placeholder-transparent"
             }
             placeholder="Type something..."
@@ -72,7 +72,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+              <XMarkIcon className="w-4 h-4 hover:text-almost-medium-red" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 1c1bc9872..d6a88044d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -70,11 +70,11 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
               INPUT_STYLE
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-high-dark-gray dark:border-medium-dark-gray dark:text-medium-low-gray rounded-md border-medium-low-gray shadow-sm ring-offset-background sm:text-sm" +
               INPUT_STYLE +
-              (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
+              (disabled ? " bg-light-gray dark:bg-almost-dark-gray" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 640482950..3639c8fb2 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-medium-dark-gray fill-almost-medium-blue`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-blue-600 text-lg">Loading...</span>
+      <span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span>
     </div>
   );
 }
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 7713da8e6..ae8b826ac 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -49,10 +49,10 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+              : "truncate block w-full text-medium-gray px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -74,7 +74,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 4c0412994..ea2247bd2 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,10 +51,10 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-medium-gray border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-high-dark-gray dark:text-medium-low-gray dark:border-medium-dark-gray rounded-md border-medium-low-gray shadow-sm sm:text-sm" +
                 INPUT_STYLE
-              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
-                (disabled ? " bg-gray-200" : "")
+              : "truncate block w-full text-medium-gray dark:text-muted px-3 py-2 rounded-md border border-medium-low-gray dark:border-almost-dark-gray shadow-sm sm:text-sm" +
+                (disabled ? " bg-light-gray" : "")
           }
         >
           {myValue !== "" ? myValue : "Type something..."}
@@ -76,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 9481f6760..497cf70f0 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,7 +21,7 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-primary" : "bg-gray-200",
+          enabled ? "bg-primary" : "bg-light-gray",
           "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
@@ -31,8 +31,8 @@ export default function ToggleComponent({
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
             disabled
-              ? "bg-gray-200 dark:bg-gray-600"
-              : "bg-white dark:bg-gray-800"
+              ? "bg-light-gray dark:bg-medium-dark-gray"
+              : "bg-white dark:bg-dark-gray"
           )}
         >
           <span
diff --git a/src/frontend/src/components/ui/rename-label.tsx b/src/frontend/src/components/ui/rename-label.tsx
index 1ee79808b..ea4bd4788 100644
--- a/src/frontend/src/components/ui/rename-label.tsx
+++ b/src/frontend/src/components/ui/rename-label.tsx
@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
+            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-medium-low-gray rounded-md",
             props.className
           )}
           onBlur={() => {
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 331dabefa..ad0b775a9 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -42,6 +42,53 @@
     --round-btn-shadow: #00000063;
 
     --hover-btn-background: #242f47;
+
+    --light-gray: #e5e7eb; /* tailwind gray 200 */
+    --medium-low-gray: #d1d5db; /* tailwind gray 300 */
+    --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
+    --medium-gray: #6b7280; /* tailwind gray 500 */
+    --medium-dark-gray: #4b5563; /* tailwind gray 600 */
+    --almost-dark-gray: #374151; /* tailwind gray 700 */
+    --dark-gray: #1f2937; /* tailwind gray 800 */
+    --high-dark-gray: #111827; /* tailwind gray 900 */
+    --high-light-gray: #f9fafb; /* tailwind gray 50 */
+
+    --medium-red: #ef4444; /* tailwind red 500 */
+    --almost-medium-red: #dc2626; /* tailwind red 600 */
+    --light-red: #fef2f2; /* tailwind red 50 */
+    --dark-red: #7f1d1d; /* tailwind red 900 */
+    --medium-light-red: #f87171; /* tailwind red 400 */
+    --almost-dark-red: #991b1b; /* tailwind red 800 */
+    --medium-dark-red: #b91c1c; /* tailwind red 700 */
+
+    --light-blue: #eff6ff; /* tailwind blue 50 */
+    --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
+    --dark-blue: #1e3a8a; /* tailwind blue 900 */
+    --medium-blue: #60a5fa; /* tailwind blue 400 */
+    --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
+    --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
+    --medium-light-blue: #dbeafe; /* tailwind blue 100 */
+    --almost-medium-blue: #2563eb; /* tailwind blue 600 */
+
+    --light-green: #f0fdf4; /* tailwind green 50 */
+    --dark-green: #14532d; /* tailwind green 900 */
+    --medium-green: #4ade80; /* tailwind green 400 */
+    --medium-dark-green: #166534; /* tailwind green 800 */
+    --almost-medium-green: #22c55e; /* tailwind green 500 */
+
+    --light-slate: #cbd5e1; /* tailwind slate 300 */
+    --medium-slate: #475569; /* tailwind slate 600 */
+    --high-light-slate: #e2e8f0; /* tailwind slate 200 */
+
+    --medium-indigo: #6366f1; /* tailwind indigo 500 */
+    --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
+    --high-indigo: #4338ca; /* tailwind indigo 700 */
+
+    --medium-yellow: #eab308; /* tailwind yellow 500 */
+
+    --medium-emerald: #10b981; /* tailwind emerald 500 */
+
+    --white: #ffffff; /* tailwind white */
   }
 
 	.dark {
@@ -105,7 +152,44 @@
   --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
   --round-btn-shadow: #00000063;
   --hover-btn-background: #242f47;
-
+  --dark-gray: #1f2937; /* tailwind gray 800 */
+  --light-gray: #e5e7eb; /* tailwind gray 200 */
+  --high-dark-gray: #111827; /* tailwind gray 900 */
+  --medium-gray: #6b7280; /* tailwind gray 500 */
+  --medium-low-gray: #d1d5db /* tailwind gray 300 */
+  --medium-dark-gray: #4b5563; /* tailwind gray 600 */
+  --almost-dark-gray: #374151; /* tailwind gray 700 */
+  --almost-medium-gray: #9ca3af; /* tailwind gray 400 */
+  --medium-red: #ef4444; /* tailwind red 500 */
+  --light-red: #fef2f2; /* tailwind red 50 */
+  --dark-red: #7f1d1d; /* tailwind red 900 */
+  --medium-light-red: #f87171; /* tailwind red 400 */
+  --almost-dark-red: #991b1b; /* tailwind red 800 */
+  --medium-dark-red: #b91c1c; /* tailwind red 700 */
+  --almost-medium-red: #dc2626; /* tailwind red 600 */
+  --light-blue: #eff6ff; /* tailwind blue 50 */
+  --dark-blue: #1e3a8a; /* tailwind blue 900 */
+  --medium-blue: #60a5fa; /* tailwind blue 400 */
+  --medium-dark-blue: #1d4ed8; /* tailwind blue 700 */
+  --almost-dark-blue: #3b82f6; /* tailwind blue 500 */
+  --medium-light-blue: #dbeafe; /* tailwind blue 100 */
+  --almost-medium-blue: #2563eb; /* tailwind blue 600 */
+  --almost-light-blue: #dbeafe;  /* tailwind blue 100 */
+  --light-green: #f0fdf4; /* tailwind green 50 */
+  --dark-green: #14532d; /* tailwind green 900 */
+  --medium-green: #4ade80; /* tailwind green 400 */
+  --medium-dark-green: #166534; /* tailwind green 800 */
+  --almost-medium-green: #22c55e; /* tailwind green 500 */
+  --light-slate: #cbd5e1; /* tailwind slate 300 */
+  --medium-slate: #475569; /* tailwind slate 600 */
+  --high-light-slate: #e2e8f0; /* tailwind slate 200 */
+  --medium-indigo: #6366f1; /* tailwind indigo 500 */
+  --medium-yellow: #eab308; /* tailwind yellow 500 */
+  --medium-emerald: #10b981; /* tailwind emerald 500 */
+  --medium-high-indigo: #4f46e5; /* tailwind indigo 600 */
+  --high-indigo: #4338ca; /* tailwind indigo 700 */
+  --high-light-gray: #f9fafb; /* tailwind gray 50 */
+  --white: #ffffff; /* tailwind white */
 }
 
 .dark {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c3b821ac9..03d22ef84 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -89,7 +89,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <CodeBracketSquareIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -109,7 +109,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             </TabsList>
             <div className="float-right">
               <button
-                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-medium-gray dark:text-medium-low-gray"
                 onClick={copyToClipboard}
               >
                 {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1a270f46e..1e2765b39 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,10 +90,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
+              <VariableIcon className="w-5 h-5 pe-1 text-almost-dark-gray stroke-2 dark:text-high-light-slate">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-gray-800 dark:text-white">
+              <span className="text-sm font-semibold text-dark-gray dark:text-white">
                 Parameters
               </span>
             </div>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
+              "w-full rounded-lg bg-white dark:bg-dark-gray border-[1px] border-light-gray",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -112,7 +112,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
                 <Table className="table-fixed bg-muted outline-1">
-                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                  <TableHeader className="border-light-gray text-medium-gray text-xs font-medium h-10">
                     <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
@@ -137,12 +137,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 dark:border-b-muted">
-                          <TableCell className="p-0 text-center text-gray-900 dark:text-gray-300 text-sm">
+                          <TableCell className="p-0 text-center text-high-dark-gray dark:text-medium-low-gray text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
                           </TableCell>
-                          <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px] dark:text-gray-300">
+                          <TableCell className="p-0 text-center text-high-dark-gray text-xs w-[300px] dark:text-medium-low-gray">
                             {data.node.template[n].type === "str" &&
                             !data.node.template[n].options ? (
                               <div className="mx-auto">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index f5f0fb668..19ff5cfdb 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -52,8 +52,8 @@ export default function ModalField({
     >
       {display && (
         <div>
-          <span className="mx-2 dark:text-gray-300">{title}</span>
-          <span className="text-red-600">{required ? " *" : ""}</span>
+          <span className="mx-2 dark:text-medium-low-gray">{title}</span>
+          <span className="text-almost-medium-red">{required ? " *" : ""}</span>
         </div>
       )}
 
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 6ceba62bf..5d6d08040 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,7 +45,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -59,11 +59,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -84,17 +84,17 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         {data.type}
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex w-full h-[445px]">
                       <div
                         className={classNames(
-                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+                          "px-4 sm:p-4 w-full rounded-lg bg-white dark:bg-dark-gray shadow",
                           Object.keys(data.node.template).filter(
                             (t) =>
                               t.charAt(0) !== "_" &&
@@ -143,10 +143,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 03be27cdb..c5e9606f7 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -44,9 +44,9 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
-            : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
+            ? " bg-input text-black dark:bg-almost-dark-gray dark:text-medium-low-gray"
+            : "  bg-white-200 text-black dark:bg-high-dark-gray dark:text-medium-low-gray",
+          "form-input block w-full custom-scroll rounded-md border-medium-low-gray dark:border-medium-dark-gray pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
         placeholder={"Send a message..."}
@@ -55,12 +55,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <LockClosedIcon
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+              className="h-5 w-5 text-medium-gray  dark:hover:text-medium-low-gray animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <PaperAirplaneIcon
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+              className="h-5 w-5 text-medium-gray hover:text-medium-dark-gray dark:hover:text-medium-low-gray"
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 318edc376..269c6b206 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -34,8 +34,8 @@ export default function ChatMessage({
       className={classNames(
         "w-full py-2 pl-2 flex",
         chat.isSend
-          ? "bg-background dark:bg-gray-900 "
-          : "bg-input  dark:bg-gray-800"
+          ? "bg-background dark:bg-high-dark-gray "
+          : "bg-input  dark:bg-dark-gray"
       )}
     >
       <div
@@ -62,12 +62,12 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <UserIcon className="w-6 h-6 -mb-1 text-dark-gray dark:text-light-gray" />
         )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">
-          <div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
+          <div className="w-full relative text-start inline-block text-medium-dark-gray dark:text-medium-low-gray text-sm font-normal">
             {hidden && chat.thought && chat.thought !== "" && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
@@ -79,8 +79,8 @@ export default function ChatMessage({
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
-								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+                className=" text-start inline-block rounded-md text-medium-dark-gray dark:text-light-gray h-full border border-medium-low-gray dark:border-medium-gray
+								bg-muted dark:bg-dark-gray w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -93,7 +93,7 @@ export default function ChatMessage({
                   <ReactMarkdown
                     remarkPlugins={[remarkGfm, remarkMath]}
                     rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
+                    className="markdown prose dark:prose-invert text-medium-dark-gray dark:text-light-gray"
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         if (children.length) {
@@ -152,9 +152,9 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white">
+          <div className="text-start inline-block px-3 text-sm text-medium-dark-gray dark:text-white">
             <span
-              className="text-gray-600 dark:text-gray-200"
+              className="text-medium-dark-gray dark:text-light-gray"
               dangerouslySetInnerHTML={{
                 __html: message.replace(/\n/g, "<br>"),
               }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 2b5d97ae9..d59e3419c 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,10 +37,10 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-muted text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
+            className={`absolute top-0 right-0 bg-muted text-almost-dark-gray rounded-bl-lg px-1 text-sm font-bold dark:bg-almost-dark-gray dark:text-medium-low-gray`}
           >
             <button
-              className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
+              className="text-medium-gray py-1 px-2 dark:bg-almost-dark-gray dark:text-medium-low-gray"
               onClick={handleDownload}
             >
               <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
@@ -54,7 +54,7 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="bg-muted shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+      className="bg-muted shadow rounded w-1/2 text-almost-dark-gray hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-medium-low-gray"
     >
       <div className="flex gap-2 text-current items-center w-full mr-2">
         {" "}
@@ -70,7 +70,7 @@ export default function FileCard({ fileName, content, fileType }) {
         <div className="flex flex-col items-start">
           {" "}
           <div className="truncate text-sm text-current">{fileName}</div>
-          <div className="truncate text-xs  text-gray-500">{fileType}</div>
+          <div className="truncate text-xs  text-medium-gray">{fileType}</div>
         </div>
         <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
       </div>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 7c4a9e5db..85deb685a 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -332,7 +332,7 @@ export default function ChatModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
+          <div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-medium-dark-gray dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -346,24 +346,24 @@ export default function ChatModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all w-[690px]">
+              <Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all w-[690px]">
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-10 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
+                    className="absolute top-2 right-10 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => setModalOpen(false)}
-                    className="absolute top-1.5 right-2 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
+                    className="absolute top-1.5 right-2 hover:text-medium-red text-medium-dark-gray dark:text-medium-low-gray dark:hover:text-medium-red z-30"
                   >
                     <HiX className="w-5 h-5" />
                   </button>
                 </div>
                 <div
                   ref={messagesRef}
-                  className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide"
+                  className="w-full h-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center overflow-scroll scrollbar-hide"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -378,13 +378,13 @@ export default function ChatModal({
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
                         👋{" "}
-                        <span className="text-gray-600 dark:text-gray-300 text-lg">
+                        <span className="text-medium-dark-gray dark:text-medium-low-gray text-lg">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="bg-muted dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
-                        <span className="text-base text-gray-500">
+                      <div className="bg-muted dark:bg-high-dark-gray rounded-md w-2/4 px-6 py-8 border border-light-gray dark:border-almost-dark-gray">
+                        <span className="text-base text-medium-gray">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
                             <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
@@ -396,7 +396,7 @@ export default function ChatModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
+                <div className="w-full bg-white dark:bg-dark-gray border-t dark:border-t-medium-dark-gray flex-col flex items-center justify-between p-3">
                   <div className="relative w-full  mt-1 rounded-md shadow-sm">
                     <ChatInput
                       chatValue={chatValue}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 9f8815f4b..59df6a45f 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <CommandLineIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-medium-low-gray dark:border-medium-dark-gray"
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 199c74256..9e03d1662 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -47,7 +47,7 @@ export default function ExportModal() {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
             <Download
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 365911e12..a60d72416 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -51,7 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
+            <Settings2 className="w-4 h-4 mr-2 dark:text-medium-low-gray" />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index d241e7c04..6ae4114b6 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <DocumentTextIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+              className="h-6 w-6 text-dark-gray pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus-visible:ring-1"
+            className="form-input h-[300px] w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2c408a120..a36197f6f 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -79,7 +79,7 @@ export default function ButtonBox({
     <button disabled={deactivate} onClick={onClick}>
       <div
         className={classNames(
-          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105",
+          "flex flex-col justify-center items-center rounded-lg text-center shadow border border-medium-low-gray dark:border-dark-gray hover:shadow-lg transform hover:scale-105",
           bgColor,
           height,
           width,
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 00f17c959..01b55116b 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -85,7 +85,7 @@ export default function ImportModal() {
                     }}
                   >
                     <ArrowLeftIcon
-                      className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
+                      className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
                       aria-hidden="true"
                     />
                   </button>
@@ -97,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
+              className="h-5 w-5 text-dark-gray ml-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -106,7 +106,7 @@ export default function ImportModal() {
 
         <div
           className={classNames(
-            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
+            "h-full w-full dark:bg-high-dark-gray overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
               : "flex flex-row justify-center items-center"
@@ -116,7 +116,7 @@ export default function ImportModal() {
             <div className="flex h-full w-full justify-evenly items-center">
               <ButtonBox
                 size="big"
-                bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
                 description="Prebuilt Examples"
                 icon={
                   <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@@ -125,12 +125,12 @@ export default function ImportModal() {
                   setShowExamples(true);
                   handleExamples();
                 }}
-                textColor="text-emerald-500 dark:text-emerald-500/75"
+                textColor="text-medium-emerald dark:text-medium-emerald/75"
                 title="Examples"
               ></ButtonBox>
               <ButtonBox
                 size="big"
-                bgColor="bg-blue-500 dark:bg-blue-500/75"
+                bgColor="bg-almost-dark-blue dark:bg-almost-dark-blue/75"
                 description="Import from Local"
                 icon={
                   <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@@ -139,7 +139,7 @@ export default function ImportModal() {
                   uploadFlow();
                   setModalOpen(false);
                 }}
-                textColor="text-blue-500 dark:text-blue-500/75"
+                textColor="text-almost-dark-blue dark:text-almost-dark-blue/75"
                 title="Local File"
               ></ButtonBox>
             </div>
@@ -157,7 +157,7 @@ export default function ImportModal() {
                   {" "}
                   <ButtonBox
                     size="small"
-                    bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                    bgColor="bg-medium-emerald dark:bg-medium-emerald/75"
                     description={example.description ?? "Prebuilt Examples"}
                     icon={
                       <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
@@ -166,7 +166,7 @@ export default function ImportModal() {
                       addFlow(example, false);
                       setModalOpen(false);
                     }}
-                    textColor="text-emerald-500 dark:text-emerald-500/75"
+                    textColor="text-medium-emerald dark:text-medium-emerald/75"
                     title={example.name}
                   ></ButtonBox>
                 </div>
@@ -179,7 +179,7 @@ export default function ImportModal() {
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
-              className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+              className="flex items-center justify-center text-medium-dark-gray dark:text-medium-low-gray"
               rel="noreferrer"
             >
               <svg
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 8a3ce4185..b7a3b8b0a 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -43,7 +43,7 @@ export default function PromptAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-ring dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-ring dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -57,11 +57,11 @@ export default function PromptAreaModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -72,27 +72,27 @@ export default function PromptAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
                       <DocumentTextIcon
-                        className="h-6 w-6 text-blue-600"
+                        className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         Edit Prompt
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-accent overflow-auto dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-dark-gray shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -102,10 +102,10 @@ export default function PromptAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a72f74643..3ce2787e0 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -42,7 +42,7 @@ export default function TextAreaModal({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-medium-gray dark:bg-medium-dark-gray dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -56,11 +56,11 @@ export default function TextAreaModal({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-dark-gray text-left shadow-xl transition-all sm:my-8 w-[700px]">
                 <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-almost-medium-gray hover:text-medium-gray"
                     onClick={() => {
                       setModalOpen(false);
                     }}
@@ -71,27 +71,27 @@ export default function TextAreaModal({
                 </div>
                 <div className="h-full w-full flex flex-col justify-center items-center">
                   <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue dark:bg-high-dark-gray sm:mx-0 sm:h-10 sm:w-10">
                       <ClipboardDocumentListIcon
-                        className="h-6 w-6 text-blue-600"
+                        className="h-6 w-6 text-almost-medium-blue"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-4 text-center sm:ml-4 sm:text-left">
                       <Dialog.Title
                         as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                        className="text-lg font-medium dark:text-white leading-10 text-high-dark-gray"
                       >
                         Edit text
                       </Dialog.Title>
                     </div>
                   </div>
-                  <div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                  <div className="h-full w-full bg-light-gray dark:bg-high-dark-gray p-4 gap-4 flex flex-row justify-center items-center">
                     <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-white dark:bg-dark-gray shadow">
                         <textarea
                           ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          className="form-input h-full w-full rounded-lg border-medium-low-gray dark:border-almost-dark-gray dark:bg-high-dark-gray dark:text-white"
                           value={myValue}
                           onChange={(e) => {
                             setMyValue(e.target.value);
@@ -101,10 +101,10 @@ export default function TextAreaModal({
                       </div>
                     </div>
                   </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                  <div className="bg-light-gray dark:bg-high-dark-gray w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-medium-high-indigo px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-high-indigo focus:outline-none focus:ring-1 focus:ring-medium-indigo focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index db356d854..c646c6834 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -13,7 +13,7 @@ const ConnectionLineComponent = ({
         fill="none"
         stroke="#222"
         strokeWidth={1.5}
-        className="animated dark:stroke-gray-400"
+        className="animated dark:stroke-almost-medium-gray"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
         style={connectionLineStyle}
       />
@@ -23,7 +23,7 @@ const ConnectionLineComponent = ({
         fill="#fff"
         r={3}
         stroke="#222"
-        className="dark:stroke-gray-400 dark:fill-gray-800"
+        className="dark:stroke-almost-medium-gray dark:fill-dark-gray"
         strokeWidth={1.5}
       />
     </g>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 7b80e1cff..9cbd1aa96 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,10 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-muted dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <Disclosure.Button className="select-none bg-muted dark:bg-almost-dark-gray/60 dark:border-y-medium-dark-gray w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-light-gray">
               <div className="flex gap-4">
-                <Icon className="w-6 text-gray-800 dark:text-white/80" />
-                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
+                <Icon className="w-6 text-dark-gray dark:text-white/80" />
+                <span className="flex items-center text-sm text-dark-gray dark:text-white/80 font-medium">
                   {title}
                 </span>
               </div>
@@ -29,7 +29,7 @@ export default function DisclosureComponent({
                   <ChevronRightIcon
                     className={`${
                       open || openDisc ? "rotate-90 transform" : ""
-                    } h-4 w-4 text-gray-800 dark:text-white`}
+                    } h-4 w-4 text-dark-gray dark:text-white`}
                   />
                 </div>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index b62cca5af..034575e11 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -185,8 +185,8 @@ export default function Page({ flow }: { flow: FlowType }) {
             style: { stroke: "inherit" },
             className:
               params.targetHandle.split("|")[0] === "Text"
-                ? "stroke-gray-800 dark:stroke-gray-300"
-                : "stroke-gray-900 dark:stroke-gray-200",
+                ? "stroke-dark-gray dark:stroke-medium-low-gray"
+                : "stroke-high-dark-gray dark:stroke-light-gray",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
           eds
@@ -397,8 +397,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   selectNodesOnDrag={false}
                   className="theme-attribution"
                 >
-                  <Background className="dark:bg-gray-900" />
-                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                  <Background className="dark:bg-high-dark-gray" />
+                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-dark-gray hover:[&>button]:dark:bg-almost-dark-gray [&>button]:dark:text-almost-medium-gray [&>button]:dark:fill-almost-medium-gray [&>button]:dark:border-medium-dark-gray"></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index bce0c6919..a431b1c9c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,44 +66,44 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <FileUp className="w-5 h-5 dark:text-gray-300"></FileUp>
+            <FileUp className="w-5 h-5 dark:text-medium-low-gray"></FileUp>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown className="w-5 h-5  dark:text-gray-300"></FileDown>
+            <FileDown className="w-5 h-5  dark:text-medium-low-gray"></FileDown>
           </button>
         </ShadTooltip>
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-high-light-gray rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 className="w-5 h-5  dark:text-gray-300"></Code2>
+            <Code2 className="w-5 h-5  dark:text-medium-low-gray"></Code2>
           </button>
         </ShadTooltip>
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
           placeholder="Search Nodes"
           className={
             INPUT_STYLE +
-            "w-full border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            "w-full border-1 dark:border-medium-slate dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
           }
           onChange={(e) => {
             handleSearchInput(e.target.value);
@@ -183,11 +183,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-dark-gray items-center border-dashed border-almost-medium-gray dark:border-medium-dark-gray border-l-0 rounded-md rounded-l-none border">
                               <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
                                 {t}
                               </span>
-                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Bars2Icon className="w-4 h-6  text-almost-medium-gray dark:text-medium-dark-gray" />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index f5636fc12..8cdf6c529 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,12 +32,12 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="w-4 h-4 dark:text-gray-300"></Trash2>
+              <Trash2 className="w-4 h-4 dark:text-medium-low-gray"></Trash2>
             </button>
           </ShadTooltip>
 
@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -65,20 +65,20 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="w-4 h-4 dark:text-gray-300"></Copy>
+              <Copy className="w-4 h-4 dark:text-medium-low-gray"></Copy>
             </button>
           </ShadTooltip>
 
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-btn-hover-bg text-almost-dark-gray transition-all duration-500 ease-in-out dark:bg-dark-gray dark:text-medium-low-gray shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-medium-low-gray hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
                 }}
               >
-                <Settings2 className="w-4 h-4 dark:text-gray-300"></Settings2>
+                <Settings2 className="w-4 h-4 dark:text-medium-low-gray"></Settings2>
               </button>
             </ShadTooltip>
           )}
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 55feba232..4443f6299 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -16,6 +16,42 @@ module.exports = {
     },
     extend: {
       colors: {
+        white: "var(--white)",
+        'high-light-gray': "var(--high-light-gray)",
+        'almost-light-blue': "var(--almost-light-blue)",
+        'high-indigo': "var(--high-indigo)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-emerald': "var(--medium-emerald)",
+        'high-light-slate': "var(--high-light-slate)",
+        'medium-yellow': "var(--medium-yellow)",
+        'almost-medium-green': "var(--almost-medium-green)",
+        'almost-medium-blue': "var(--almost-medium-blue)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-slate': "var(--medium-slate)",
+        'light-slate': "var(--light-slate)",
+        'light-green': "var(--light-green)",
+        'dark-green': "var(--dark-green)",
+        'medium-green': "var(--medium-green)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'light-blue': "var(--light-blue)",
+        'dark-blue': "var(--dark-blue)",
+        'medium-blue': "var(--medium-blue)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
+        'almost-medium-red': "var(--almost-medium-red)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'almost-dark-red': "var(--almost-dark-red)",
+        'medium-light-red': "var(--medium-light-red)",
+        'dark-red': "var(--dark-red)",
+        'light-red': "var(--light-red)",
+        'medium-red': "var(--medium-red)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
+        'almost-dark-gray': "var(--almost-dark-gray)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'medium-gray': "var(--medium-gray)",
+        'high-dark-gray': "var(--high-dark-gray)",
+        'light-gray': "var(--light-gray)",
+        'dark-gray': "var(--dark-gray)",
         'btn-shadow': "var(--round-btn-shadow)",
         buildBackground: "var(--build-background)",
         build: "var(--build-trigger)",
@@ -94,6 +130,44 @@ module.exports = {
     },
     extend: {
       colors: {
+        white: "var(--white)",
+        'high-light-gray': "var(--high-light-gray)",
+        'almost-light-blue': "var(--almost-light-blue)",
+        'high-indigo': "var(--high-indigo)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-emerald': "var(--medium-emerald)",
+        'high-light-slate': "var(--high-light-slate)",
+        'medium-yellow': "var(--medium-yellow)",
+        'almost-medium-green': "var(--almost-medium-green)",
+        'almost-medium-blue': "var(--almost-medium-blue)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-slate': "var(--medium-slate)",
+        'light-slate': "var(--light-slate)",
+        'light-green': "var(--light-green)",
+        'dark-green': "var(--dark-green)",
+        'medium-green': "var(--medium-green)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'medium-light-blue': "var(--medium-light-blue)",
+        'almost-dark-blue': "var(--almost-dark-blue)",
+        'light-blue': "var(--light-blue)",
+        'dark-blue': "var(--dark-blue)",
+        'medium-blue': "var(--medium-blue)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
+        'almost-medium-red': "var(--almost-medium-red)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'almost-dark-red': "var(--almost-dark-red)",
+        'medium-light-red': "var(--medium-light-red)",
+        'dark-red': "var(--dark-red)",
+        'light-red': "var(--light-red)",
+        'medium-red': "var(--medium-red)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
+        'almost-dark-gray': "var(--almost-dark-gray)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'medium-gray': "var(--medium-gray)",
+        'high-dark-gray': "var(--high-dark-gray)",
+        'light-gray': "var(--light-gray)",
+        'dark-gray': "var(--dark-gray)",
         'btn-hover-bg': "var(--hover-btn-background)",
         'btn-shadow': "var(--round-btn-shadow)",
         buildBackground: "var(--build-background)",