48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
|
# 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
|