invest-copilot/design-systems/financial/DESIGN.md

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)

: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

--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