1 files changed, 45 insertions, 0 deletions
diff --git a/docs/design_system.md b/docs/design_system.md
new file mode 100644
index 0000000..5c20f41
--- /dev/null
+++ b/docs/design_system.md
@@ -0,0 +1,45 @@
+# Design System: Glassmorphism Overhaul
+
+## Core Philosophy
+*   **Light & Airy:** Use a pastel mesh gradient background to provide depth.
+*   **Glass Surfaces:** Content resides on semi-transparent, blurred layers (`backdrop-filter`).
+*   **Soft Borders:** 1px white borders with low opacity to define edges without harsh lines.
+*   **Floating Depth:** Use shadows to lift elements off the background.
+
+## Color Palette
+*   **Background:** Linear Gradient (Top-Left to Bottom-Right)
+    *   From: `indigo-100` (#e0e7ff)
+    *   Via: `purple-100` (#f3e8ff)
+    *   To: `pink-100` (#fce7f3)
+*   **Surface (Glass):**
+    *   Background: `rgba(255, 255, 255, 0.7)`
+    *   Border: `rgba(255, 255, 255, 0.5)`
+*   **Text:**
+    *   Primary: `gray-900`
+    *   Secondary: `gray-600`
+    *   Accent: `indigo-600`
+
+## Components
+
+### Base
+*   **Body:** `bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen`
+
+### Cards (`.card`)
+*   **Style:**
+    *   `bg-white/70` (70% opacity white)
+    *   `backdrop-blur-lg` (Large blur)
+    *   `border border-white/50`
+    *   `shadow-xl`
+    *   `rounded-2xl` (More rounded than before)
+
+### Navigation (`.tab-button`)
+*   **Active State:**
+    *   Instead of a bottom border, use a "pill" background.
+    *   `bg-white/50`
+    *   `shadow-sm`
+    *   `text-indigo-700`
+    *   `rounded-lg`
+
+### Typography
+*   **Font:** Inter (Existing)
+*   **Headings:** Dark Gray (`gray-900`), slightly tighter tracking.