Code-4-Community · janekamata · Feb 16, 2026 · Feb 16, 2026
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
@@ -76,7 +76,7 @@ const Login = observer(() => {
           </div>
           <div className="h-12 items-center">
             {failure ? (
-              <div className="text-red mt-4 bg-red-lighter h-full rounded-md text-center flex items-center justify-center p-2">
+              <div className="text-red mt-4 bg-red-light h-full rounded-md text-center flex items-center justify-center p-2">
                 Your password is incorrect or this account doesn't exist.
               </div>
             ) : (

diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
@@ -183,7 +183,7 @@ const Register = observer(() => {
             <div
               className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left ${
                 failure.state
-                  ? "text-red bg-red-lighter"
+                  ? "text-red bg-red-light"
                   : "text-grey-600 bg-grey-200"
               }`}
             >

diff --git a/frontend/src/custom/ActionConfirmation.tsx b/frontend/src/custom/ActionConfirmation.tsx
@@ -47,10 +47,10 @@ import { IoIosWarning } from "react-icons/io";
             <div className="flex mb-6">
 
             <div className="w-3 bg-red"/>
-            <div  className="p-3 bg-red-lightest">
+            <div  className="p-3 bg-red-light">
             <div className="flex">
-              <IoIosWarning size={24} className="text-red-dark"/>
-              <p className="font-bold px-1 text-lg text-red-dark"> Warning </p>
+              <IoIosWarning size={24} className="text-red"/>
+              <p className="font-bold px-1 text-lg text-red"> Warning </p>
             </div>
             <p className=" text-left text-lg font-semibold text-red">
               {warningMessage}
@@ -64,7 +64,7 @@ import { IoIosWarning } from "react-icons/io";
           {/* Buttons */}
           <div className="flex w-full justify-between ">
             <button
-              className="rounded-lg hover:bg-gray-200 border-2 border-black bg-red-lightest transition-colors w-32 h-12"
+              className="rounded-lg hover:bg-gray-200 border-2 border-black bg-red-light transition-colors w-32 h-12"
               onClick={onCloseDelete}
             >
               No, cancel

diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx
@@ -4,7 +4,7 @@ import "../styles/button.css";
 export enum ButtonColorOption {
   GREEN = "var(--color-green)",
   GRAY = "var(--color-grey-400)",
-  ORANGE = "var(--color-orange)",
+  BLUE = "var(--color-blue-light)",
 }
 
 /* API for components to setup a button with expected system colors */
@@ -30,9 +30,9 @@ export default function RingButton({ text, color }: RingButtonProps) {
           {text}
         </div>
       )}
-      {ButtonColorOption.ORANGE === color && (
+      {ButtonColorOption.BLUE === color && (
         <div
-          className="bg-orange button-default w-full border-none cursor-default"
+          className="bg-blue-light button-default w-full border-none cursor-default"
         >
           {text}
         </div>

diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -468,7 +468,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                               curGrant.status === "Active"
                                 ? "bg-green"
                                 : curGrant.status === "Potential"
-                                ? "bg-orange"
+                                ? "bg-blue-dark"
                                 : "bg-grey-400"
                             }`}
                           >
@@ -576,7 +576,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                 <div className="flex justify-between items-center w-full mt-6">
                   <>
                     <button
-                      className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors bg-red-light text-white border border-red-dark"
+                      className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors bg-red text-white border border-black"
                       onClick={() => setShowDeleteModal(true)}
                     >
                       Delete

diff --git a/frontend/src/main-page/navbar/styles/AccountInfo.css b/frontend/src/main-page/navbar/styles/AccountInfo.css
@@ -100,23 +100,3 @@ z-index: 1000;
   width: 18px;
   height: 18px;
 }
-
-.logout-btn {
-  padding: 10px 26px;
-  background: var(--color-red-lighter);
-  border: 2px solid var(--color-red-light);
-  border-radius: 10px;
-  color: var(--color-red);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.logout-btn:hover {
-  background: var(--color-primary-700);
-  color: white;
-  border-color: var(--color-primary-800);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
diff --git a/frontend/src/main-page/users/ApprovedUserCard.tsx b/frontend/src/main-page/users/ApprovedUserCard.tsx
@@ -164,7 +164,7 @@ const ApprovedUserCard = ({
               </Button>
               <Button
                 px={4}
-                className="text-sm focus:outline-none block w-full bg-red-lightest border-red text-red"
+                className="text-sm focus:outline-none block w-full bg-red-light border-red text-red"
                 onClick={() => setIsDeleteUserModalOpen(true)}
               >
                 Delete user{"  "}

diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx
@@ -103,7 +103,7 @@ const PendingUserCard = ({
           <FontAwesomeIcon icon={faCheck} className="text-black" />
         </button>
         <button 
-        className="bg-red-lighter w-8 h-8 focus:outline-none rounded"
+        className="bg-red-light w-8 h-8 focus:outline-none rounded"
           onClick={rejectUser}
           disabled={isLoading}>
           <FontAwesomeIcon icon={faX} className="text-black"/>

diff --git a/frontend/src/main-page/users/UserPositionCard.tsx b/frontend/src/main-page/users/UserPositionCard.tsx
@@ -11,7 +11,7 @@ const UserPositionCard = ({ position }: UserPositionCardProps) => {
       case UserStatus.Admin:
         return "bg-green-light border-green-dark text-green-dark";
       case UserStatus.Employee:
-        return "bg-yellow-light border-yellow text-yellow-dark";
+        return "bg-yellow-light border-yellow-dark text-yellow-dark";
       case UserStatus.Inactive:
       default:
         return "bg-grey-400 border-gray text-gray";

diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
@@ -26,23 +26,19 @@
   --font-size-4xl: 2.25rem;
   --font-size-hero: 3.2rem;
 
-  --color-green-dark: #119548;
-  --color-green: #5ab911;
-  --color-green-light: #c6fbd3;
-
-  --color-yellow: #f8cc16;
-  --color-yellow-light: #fff8ca;
-  --color-yellow-dark: #8a710c;
-
-  --color-red: #d33221;
-  --color-red-dark: #771505;
-  --color-red-light: #ff6b6b;
-  --color-red-lighter: #ffa399;
-  --color-red-lightest: #ffdfdf;
-
-  --color-orange: #ffa500;
-  --color-orange-light: #ffceb6;
-  --color-orange-lightest: #fff1eb;
+  --color-green-dark: #007E4C;
+  --color-green: #04A967;
+  --color-green-light: #D0FFEF;
+
+  --color-blue-dark: #006CA1;
+  --color-blue-light: #D0EDFF;
+
+  --color-yellow-dark: #9B6000;
+  --color-yellow-light: #FFF0D3;
+
+  --color-red-dark: #C80000;
+  --color-red-light: #FFD8D8;
+  --color-red-lightest: #FFF0F0;
 
   --color-primary-900: #e16f39;
   --color-primary-800: #e78c61;

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -4,30 +4,30 @@ export default {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx,html}"],
   theme: {
     colors: {
-      orange: {
-        DEFAULT: "#ffa500",
-        light: "#FFCEB6",
-        lightest: "#FFF1EB",
-      },
 
       green: {
-        dark: "#119548",
-        DEFAULT: "#5AB911",
-        light: "#c6fbd3",
+        dark: "#007E4C",
+        DEFAULT: "#04A967",
+        light: "#D0FFEF",
+      },
+
+      blue: {
+        dark: "#006CA1",
+        DEFAULT: "#006CA1",
+        light: "#D0EDFF",
       },
 
       yellow: {
-        dark: "#8A710C",
-        DEFAULT: "#F8CC16",
-        light: "#FFF8CA",
+        dark: "#9B6000",
+        DEFAULT: "#9B6000",
+        light: "#FFF0D3",
       },
 
       red: {
-        dark: "#771505",
-        DEFAULT: "#d33221",
-        light: "#FF6B6B",
-        lighter: "#FFA399",
-        lightest: "#FFDFDF",
+        dark: "#C80000",
+        DEFAULT: "#C80000",
+        light: "#FFD8D8",
+        lightest: "#FFF0F0",
       },
 
       primary: {

diff --git a/middle-layer/types/Status.ts b/middle-layer/types/Status.ts
@@ -43,10 +43,10 @@ export function getColorStatus(status: string) {
     switch (status) {
         case "Active": return "var(--color-green)"; // green
         case "Inactive": return "var(--color-grey-500)" // gray
-        case "Potential": return "var(--color-yellow)" // TODO: no color given for potential yet
+        case "Potential": return "var(--color-blue-dark)" // blue
         // TODO add colors for rejected and pending
         case "Rejected": return "var(--color-red)" // red
-        case "Pending": return "var(--color-orange)" // orange
+        case "Pending": return "var(--color-yellow-dark)" // yellow
         default: return 'gray';
     }
 }