stock-ai-agent/frontend/DESIGN_SYSTEM.md

Tradus Premium Fintech Design System

Overview

Complete redesign of the Tradus AI trading platform with a premium, institutional-grade aesthetic inspired by Bloomberg Terminal and modern FinTech applications.

Design Philosophy

Core Principles:

1. Institutional Luxury - Professional, trustworthy, sophisticated
2. Visual Hierarchy - Clear information architecture with premium accents
3. Smooth Interactions - Fluid animations and micro-interactions
4. Data-Focused - Numbers and metrics take center stage

Color System

Primary Palette

Background:
- Primary: #0A0E27 (Deep Space)
- Secondary: #111827 (Dark Blue-Gray)
- Tertiary: #1A1F3A (Navy)
- Elevated: #1E2438 (Card backgrounds)

Accent Colors:
- Primary: #00F0FF (Vibrant Cyan)
- Secondary: #667EEA (Purple-Blue)
- Tertiary: #764BA2 (Deep Purple)

Semantic Colors:
- Success: #00E676 (Green)
- Warning: #FFB300 (Amber)
- Danger: #FF4444 (Red)
- Info: #2196F3 (Blue)

Gradients

--gradient-primary: linear-gradient(135deg, #667EEA 0%, #764BA2 100%)
--gradient-accent: linear-gradient(135deg, #00F0FF 0%, #00C9FF 100%)
--gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%)
--gradient-success: linear-gradient(135deg, #00C851 0%, #00E676 100%)
--gradient-danger: linear-gradient(135deg, #FF4444 0%, #FF6B6B 100%)

Typography

Font Stack

• Headings: DM Serif Display (elegant, serif)
• Body: DM Sans (modern, clean)
• Monospace: JetBrains Mono (for numbers, code)

Type Scale

--font-xs: 11px
--font-sm: 13px
--font-base: 14px
--font-md: 16px
--font-lg: 18px
--font-xl: 24px
--font-2xl: 32px
--font-3xl: 40px

Components

Cards

• Gradient top border on hover
• Subtle shadows
• Border color transitions
• Transform animations

Buttons

• Primary: Gradient background with glow
• Secondary: Transparent with accent border
• Accent: Cyan gradient for CTAs
• Danger: Red border for destructive actions

Badges

• Grade A: Gold gradient with shadow
• Grade B: Silver gradient
• Grade C: Bronze gradient
• Status badges: Semantic colors with borders

Tables

• Dark backgrounds with subtle borders
• Hover states with background changes
• Monospace font for numbers
• Color-coded positive/negative values

Stats Cards

• Large gradient text for values
• Clear label hierarchy
• Accent bar on left side
• Smooth value transitions

Animations

Core Animations

fadeIn: 0.5s ease
slideUp: 0.6s ease
pulse: 2s infinite
spin: 0.8s linear infinite
shimmer: 2s infinite (for progress bars)

Interaction Feedback

• Hover: Scale(1.05), translate(-2px), shadow increase
• Active: Scale(0.98)
• Focus: Accent border, box-shadow ring

Page-Specific Guidelines

Index.html (Chat Interface)

• Welcome screen with gradient title
• Message cards with accent borders
• Streaming indicators with dots animation
• Input field with glow on focus

Trading.html (Trading Dashboard)

• Stat cards with gradient values
• Table with monospace numbers
• Grade badges with gold/silver/bronze
• Charts with accent colors

Real-Trading.html (Live Trading)

• Warning banners with colored borders
• Status indicators with pulse animation
• Account cards with elevated backgrounds
• Toggle switches with gradient

Signals.html (Signal Center)

• Signal cards with hover effects
• Confidence bars with gradient fills
• Price grids with clear hierarchy
• Grade statistics with badge sets

Admin.html (Management Panel)

• Sidebar with active state highlighting
• User tables with status badges
• Search bars with focus states
• Pagination controls

Login.html (Authentication)

• Centered card layout
• Input fields with focus glow
• Button with gradient and hover effects
• Error messages with danger styling

Responsive Design

Breakpoints

Mobile: max-width 768px
Small Mobile: max-width 480px

Mobile Adaptations

• Reduced font sizes
• Simplified layouts
• Stacked components
• Full-width cards

Accessibility

Focus States

• Visible focus rings
• High contrast borders
• Keyboard navigation support

Color Contrast

• WCAG AA compliant
• Text on background ratios
• Accent color legibility

Performance

Optimization Techniques

• CSS animations over JavaScript
• Transform for smooth rendering
• Will-change for complex animations
• Efficient gradient usage

Loading States

• Skeleton screens
• Spinner animations
• Progressive enhancement

Usage Examples

Card Component

<div class="card">
  <div class="stat-label">Account Balance</div>
  <div class="stat-value">$10,000.00</div>
</div>

Button Variants

<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-danger">Danger</button>

Badge Types

<span class="badge badge-grade-A">A</span>
<span class="badge badge-success">Active</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-danger">Closed</span>

Best Practices

1. Consistency: Use design tokens, not arbitrary values
2. Hierarchy: Follow the spacing scale
3. Feedback: Always provide hover/active states
4. Performance: Prefer CSS animations
5. Accessibility: Test with keyboard navigation
6. Responsive: Design mobile-first
7. Polish: Add subtle shadows and transitions

Implementation Notes

• All colors use CSS custom properties for easy theming
• Animations are defined at the root level
• Components follow BEM-like naming
• Responsive styles use mobile-first approach
• Print styles included for reports

Future Enhancements

1. Dark mode toggle
2. Custom theme builder
3. Animation preferences
4. Chart color schemes
5. Advanced micro-interactions
6. Skeleton loading states

---

Created: 2026-03-28 Designer: Claude Code Agent Version: 1.0