# 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