diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08a3ac9..7267a3d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,68 +1,77 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* ----- CSS Variables ----- */
+:root {
+  --color-accent: #A50A02;
+  --color-background-gray: #F8FAFC;
+  --color-primary: #0F172A;
+  --font-sans: "Helvetica Neue", ui-sans-serif, system-ui;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+/* ----- Reset / normalize ----- */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
+  font-family: var(--font-sans);
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  background-color: var(--color-background-gray);
+  display: block;
   min-width: 320px;
   min-height: 100vh;
+  margin: 0;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+/* ----- Links ----- */
+a {
+  text-decoration: none;
+  font-weight: 500;
+  color: var(--color-accent);
+}
+a:hover {
+  color: #930701; /* slightly darker accent */
 }
 
+/* ----- Buttons ----- */
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
+  background-color: var(--color-accent);
+  color: white;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.5rem;
+  font-family: var(--font-sans);
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
+  border: none;
   cursor: pointer;
-  transition: border-color 0.25s;
+  transition: background-color 0.2s ease;
 }
+
 button:hover {
-  border-color: #646cff;
+  background-color: #930701; /* hover accent */
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  font-family: var(--font-sans);
+  color: var(--color-primary);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
     background-color: #ffffff;
   }
   a:hover {
-    color: #747bff;
+    color: #A50A02;
   }
   button {
-    background-color: #f9f9f9;
+    /* optional light theme button override */
+    background-color: var(--color-accent);
   }
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
new file mode 100644
index 0000000..61c374b
--- /dev/null
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,47 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx,jsx,js}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#0F172A",       // dark navy background / main brand
+        accent: "#A50A02",        // dark red
+        success: "#059669",       // green
+        warning: "#D97706",       // orange
+        error: "#E61304",         // red
+        light_blue: "#DBEAFE",    // light blue accent
+        background_gray: "#F8FAFC",
+        gray: {
+          100: "#F8FAFC",   // very light gray background
+          200: "#E5E7EB",   // light gray background / borders
+          300: "#D1D5DB",   // medium light gray
+          400: "#9CA3AF",   // medium gray
+          500: "#6B7280",   // default gray for text
+          600: "#4B5563",   // dark gray for text / borders
+          700: "#374151",   // darker gray for headings
+        },
+      },
+      fontFamily: {
+        sans: ["Helvetica Neue", "ui-sans-serif", "system-ui"],
+        heading: ["Helvetica Neue", "ui-sans-serif", "system-ui"],
+      },
+      fontSize: {
+        h1: ["2.25rem", { lineHeight: "2.5rem", fontWeight: "700" }], // 36px
+        h2: ["1.875rem", { lineHeight: "2.25rem", fontWeight: "700" }], // 30px
+        body: ["1rem", { lineHeight: "1.5rem", fontWeight: "400" }], // 16px
+        caption: ["0.875rem", { lineHeight: "1.25rem", fontWeight: "400" }], // 14px
+      },
+      spacing: {
+        xs: "0.25rem",   // 4px
+        sm: "0.5rem",    // 8px
+        md: "1rem",      // 16px
+        lg: "1.5rem",    // 24px
+        xl: "2rem",      // 32px
+        "2xl": "4rem",   // 64px
+      },
+    },
+  },
+
+  plugins: [],
+} satisfies Config;