Initial commit: invest-copilot app

design-systems/financial/README.md

@@ -0,0 +1,47 @@
+# Invest Copilot — Design System
+
+Dark-first, glassmorphic fintech aesthetic. Inspired by Dribbble's top fintech dashboards (Linear, Stripe, trading apps).
+
+## Preview
+
+Open in browser:
+
+```bash
+# Desktop Dashboard
+open design-systems/financial/dashboard.html
+
+# Mobile Dashboard (PWA)
+open design-systems/financial/mobile-dashboard.html
+
+# Stock Detail Page
+open design-systems/financial/stock-detail.html
+```
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `DESIGN.md` | Complete design tokens: colors (OKLch), spacing, typography, components, effects |
+| `dashboard.html` | Desktop dashboard prototype (responsive 1400px max) |
+| `mobile-dashboard.html` | Mobile PWA prototype (375px base, safe areas) |
+| `stock-detail.html` | Stock detail page with stats, ownership, SEC filings |
+
+## Visual Design
+
+- **Theme:** Dark — near-black backgrounds (#0c0b14), deep blue-gray surfaces
+- **Cards:** Translucent with subtle borders, soft shadows
+- **Accents:** Blue-to-purple gradient (#6366f1 → #a855f7)
+- **Charts:** Gradient area fills, gradient lines, glowing endpoint dots
+- **Typography:** Inter (UI) + JetBrains Mono (numbers/tickers)
+- **Semantic color:** Emerald (positive), red (negative), amber (warning)
+- **Spacing:** Generous — breathing room between elements
+- **Effects:** Subtle glows on active elements, smooth 150-200ms transitions
+
+## Mobile-First
+
+All prototypes are mobile-first. The mobile dashboard uses:
+- Bottom navigation bar with glass effect
+- Scrollable content with safe area support
+- Touch-friendly tap targets (40px min)
+- Horizontal scroll for heatmap on small screens
+- PWA meta tags for installability