Invest Copilot — Design System
Dark-first, glassmorphic fintech aesthetic. Inspired by Dribbble's top fintech dashboards (Linear, Stripe, trading apps).
Preview
Open in browser:
# 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