diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-20 15:27:15 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-20 15:27:15 -1000 |
| commit | 3bb0ca2e58168b28c5e49763acd25f531fb8a78d (patch) | |
| tree | 0dceef57fee23d704131671c4cac276e464b865d /docs/design_system.md | |
| parent | d799d4d04cc18654de5864a458668ff073e26284 (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.md | 45 |
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. |
