175 lines
5.4 KiB
Markdown
175 lines
5.4 KiB
Markdown
# Invest Copilot — Design System
|
|
|
|
> Dark-first, glassmorphic fintech aesthetic. Inspired by Linear, Stripe, Dribbble fintech.
|
|
> Mobile-first responsive. OKLch color space.
|
|
|
|
---
|
|
|
|
## Design Tokens
|
|
|
|
### Colors (OKLch)
|
|
|
|
```css
|
|
:root {
|
|
/* Background */
|
|
--bg-deep: oklch(0.08 0.02 260); /* near-black, slight blue tint */
|
|
--bg-surface: oklch(0.12 0.03 260); /* card bg */
|
|
--bg-raised: oklch(0.16 0.03 260); /* elevated card */
|
|
--bg-overlay: oklch(0.10 0.02 260 / 0.85); /* glass overlay */
|
|
|
|
/* Borders & dividers */
|
|
--border-subtle: oklch(0.22 0.02 260); /* very faint border */
|
|
--border-default: oklch(0.30 0.03 260); /* visible border */
|
|
|
|
/* Text */
|
|
--text-primary: oklch(0.96 0.005 260); /* white-ish */
|
|
--text-secondary: oklch(0.65 0.02 260); /* gray */
|
|
--text-tertiary: oklch(0.45 0.02 260); /* dim gray */
|
|
--text-placeholder: oklch(0.35 0.02 260); /* placeholder text */
|
|
|
|
/* Accents — gradient pair */
|
|
--accent-start: oklch(0.65 0.20 262); /* vibrant blue */
|
|
--accent-end: oklch(0.60 0.25 290); /* vibrant purple */
|
|
--accent-glow: oklch(0.65 0.20 262 / 0.25); /* blue glow */
|
|
|
|
/* Semantic — green (positive) */
|
|
--positive: oklch(0.70 0.18 155); /* emerald */
|
|
--positive-dim: oklch(0.70 0.18 155 / 0.12);
|
|
|
|
/* Semantic — red (negative) */
|
|
--negative: oklch(0.60 0.22 25); /* red */
|
|
--negative-dim: oklch(0.60 0.22 25 / 0.12);
|
|
|
|
/* Semantic — amber (warning) */
|
|
--warning: oklch(0.72 0.18 70); /* amber */
|
|
--warning-dim: oklch(0.72 0.18 70 / 0.12);
|
|
|
|
/* Semantic — teal (info) */
|
|
--info: oklch(0.65 0.15 190); /* teal */
|
|
--info-dim: oklch(0.65 0.15 190 / 0.12);
|
|
}
|
|
```
|
|
|
|
### Spacing (4px base)
|
|
|
|
```
|
|
--space-1: 0.25rem (4px)
|
|
--space-2: 0.5rem (8px)
|
|
--space-3: 0.75rem (12px)
|
|
--space-4: 1rem (16px)
|
|
--space-5: 1.25rem (20px)
|
|
--space-6: 1.5rem (24px)
|
|
--space-8: 2rem (32px)
|
|
--space-10: 2.5rem (40px)
|
|
--space-12: 3rem (48px)
|
|
--space-16: 4rem (64px)
|
|
```
|
|
|
|
### Typography
|
|
|
|
| Level | Weight | Size | Family | Use |
|
|
|-------|--------|------|--------|-----|
|
|
| Display | 700 | 2.5rem (40px) | Inter | Page titles |
|
|
| H1 | 700 | 2rem (32px) | Inter | Section headers |
|
|
| H2 | 600 | 1.25rem (20px) | Inter | Sub-headers |
|
|
| H3 | 600 | 1.125rem (18px) | Inter | Card titles |
|
|
| Body | 400/500 | 1rem (16px) | Inter | Body text |
|
|
| Body-sm | 400/500 | 0.875rem (14px) | Inter | Secondary text |
|
|
| Caption | 500 | 0.75rem (12px) | Inter | Labels, timestamps |
|
|
| Mono | 500 | 1rem (16px) | JetBrains Mono | Numbers, tickers |
|
|
| Mono-sm | 500 | 0.875rem (14px) | JetBrains Mono | Small numbers |
|
|
| Mono-xs | 500 | 0.6875rem (11px) | JetBrains Mono | Micro numbers |
|
|
|
|
### Shadows & Effects
|
|
|
|
```css
|
|
--shadow-card: 0 1px 3px oklch(0 0 0 / 0.3), 0 0 1px oklch(0 0 0 / 0.5);
|
|
--shadow-raised: 0 4px 12px oklch(0 0 0 / 0.4), 0 0 1px oklch(0 0 0 / 0.5);
|
|
--shadow-glow-accent: 0 0 30px oklch(0.65 0.20 262 / 0.15);
|
|
--shadow-glow-positive: 0 0 20px oklch(0.70 0.18 155 / 0.1);
|
|
--blur-sm: blur(4px);
|
|
--blur-md: blur(8px);
|
|
--blur-lg: blur(16px);
|
|
--glass-bg: bg with backdrop-filter: blur(12px) + semi-transparent bg;
|
|
--gradient-accent: linear-gradient(135deg, var(--accent-start), var(--accent-end));
|
|
```
|
|
|
|
### Border Radius
|
|
|
|
```
|
|
--radius-sm: 0.5rem (8px) /* small elements, pills */
|
|
--radius-md: 0.75rem (12px) /* cards, buttons */
|
|
--radius-lg: 1rem (16px) /* large cards, modals */
|
|
--radius-xl: 1.25rem (20px) /* hero sections */
|
|
--radius-full: 9999px /* pills, badges */
|
|
```
|
|
|
|
### Breakpoints
|
|
|
|
```
|
|
sm: 375px (mobile base)
|
|
md: 768px (tablet)
|
|
lg: 1024px (desktop)
|
|
xl: 1280px (large desktop)
|
|
```
|
|
|
|
---
|
|
|
|
## Component Specifications
|
|
|
|
### Glass Card
|
|
- bg: `--bg-surface` (oklch 0.12)
|
|
- border: `1px solid --border-subtle`
|
|
- border-radius: `--radius-lg` (12px)
|
|
- shadow: `--shadow-card`
|
|
- padding: `--space-6`
|
|
- hover: lift slightly (translateY -2px), shadow increases
|
|
|
|
### Primary Button
|
|
- bg: `--gradient-accent`
|
|
- text: white, 500 weight
|
|
- border-radius: `--radius-md`
|
|
- padding: `--space-3` `--space-6`
|
|
- hover: brightness 1.1, shadow `--shadow-glow-accent`
|
|
- active: scale 0.98
|
|
|
|
### Stat Card (small card with icon)
|
|
- bg: `--bg-raised`
|
|
- border: `1px solid --border-subtle`
|
|
- border-radius: `--radius-md`
|
|
- icon: 36x36, bg with accent tint (opacity 0.15)
|
|
- padding: `--space-4`
|
|
|
|
### Chart
|
|
- Gradient area fill under line
|
|
- Line: 2px stroke, gradient color
|
|
- Dot on last point: 6px circle with glow
|
|
- Grid lines: `--border-subtle`, dashed
|
|
- Labels: `--text-tertiary`, mono font
|
|
|
|
### Nav Pill (tab selector)
|
|
- bg: `--bg-raised`
|
|
- border: `1px solid --border-subtle`
|
|
- border-radius: `--radius-full` (pill shape)
|
|
- active item: bg with `--accent-start`, text white
|
|
|
|
### Badge/Pill
|
|
- border-radius: `--radius-full`
|
|
- padding: `2px 10px`
|
|
- font-size: `--caption`
|
|
- bg: semantic tint (positive-dim, negative-dim, etc.)
|
|
- text: semantic color
|
|
|
|
---
|
|
|
|
## Visual Design Principles
|
|
|
|
1. **Dark first** — all surfaces are dark, accents provide color
|
|
2. **Glassmorphism** — translucent cards with blur, subtle borders
|
|
3. **Gradient accents** — blue-to-purple gradients for primary actions and chart fills
|
|
4. **Spacious** — generous padding, breathing room between elements
|
|
5. **Data hierarchy** — numbers in monospace, large and prominent; labels smaller and dim
|
|
6. **Semantic color** — green for positive, red for negative, blue/purple for brand
|
|
7. **Glow effects** — subtle colored glows around key elements (charts, active states)
|
|
8. **Smooth transitions** — 150-200ms ease-out for all interactive states
|