247 lines
5.8 KiB
Markdown
247 lines
5.8 KiB
Markdown
# 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
|
|
```css
|
|
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
|
|
```css
|
|
--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
|
|
```css
|
|
--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
|
|
```css
|
|
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
|
|
```css
|
|
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
|
|
```html
|
|
<div class="card">
|
|
<div class="stat-label">Account Balance</div>
|
|
<div class="stat-value">$10,000.00</div>
|
|
</div>
|
|
```
|
|
|
|
### Button Variants
|
|
```html
|
|
<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
|
|
```html
|
|
<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
|