summaryrefslogtreecommitdiff
path: root/docs/design_system.md
diff options
context:
space:
mode:
authorPeter Stone <thepeterstone@gmail.com>2026-01-20 15:27:15 -1000
committerPeter Stone <thepeterstone@gmail.com>2026-01-20 15:27:15 -1000
commit3bb0ca2e58168b28c5e49763acd25f531fb8a78d (patch)
tree0dceef57fee23d704131671c4cac276e464b865d /docs/design_system.md
parentd799d4d04cc18654de5864a458668ff073e26284 (diff)
Add project documentation
Include design system guidelines, Phase 3 roadmap, code quality review, proposed README, and authentication ADR. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'docs/design_system.md')
-rw-r--r--docs/design_system.md45
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.