theme

src/components/BaseComponents/ColoredButton.vue

 <template>
   <button
-    class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
   >
     {{ text }}
   </button>

src/components/BaseComponents/NavBar.vue

 <template>
   <nav
-    class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+    class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
   >
     <div class="logo">
       <img

tailwind.config.js

@@ -2,7 +2,31 @@ module.exports = {
   darkMode: "class",
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    colors: {
+      white: "#fff",
+      black: "#000",
+      gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#6b7280",
+        600: "#4b5563",
+        700: "#374151",
+        800: "#1f2937",
+        900: "#111827",
+      },
+      primary: {
+        light: "#306EC1",
+        medium: "#004aad",
+        dark: "#003884",
+      },
+      contrast: {
+        light: "#653273",
+        dark: "#731050",
+      },
+    },
   },
   plugins: [],
 };