47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# Crypto Trading Bot Companion App — Design Specification
|
|
|
|
Build a React Native (Expo) mobile companion app for a crypto trading bot platform.
|
|
UX/UI showcase with hardcoded mock data — zero backend or API integration.
|
|
Premium fintech product: fluid animations, deliberate spacing, typographic hierarchy, micro-interactions.
|
|
|
|
## Design System
|
|
|
|
### Colors
|
|
- Background primary: #0a0b0d, card: #14151a, elevated: #1a1b22
|
|
- Accent green: #00ff88, red: #ff3366, blue: #3498db, orange: #e67e22, amber: #facc15
|
|
- Text primary: #ffffff, secondary: #929292, muted: #666666
|
|
- Borders: rgba(255,255,255,0.05) to rgba(255,255,255,0.1)
|
|
|
|
### Typography
|
|
- Primary: Inter (400-900), Mono: JetBrains Mono (prices, percentages, P&L)
|
|
- Scale: 10px micro labels → 36px page titles
|
|
|
|
### Spacing
|
|
- Card padding: 20-24px, border-radius: 20/16/12/8px, section gap: 24px, screen padding: 20px
|
|
|
|
## Navigation (5 Tabs)
|
|
1. Dashboard (activity icon)
|
|
2. Positions (layers icon)
|
|
3. History (clock icon)
|
|
4. Strategies (cpu icon)
|
|
5. Settings (sliders icon)
|
|
+ Floating AI Chat button
|
|
|
|
## Screens
|
|
1. Dashboard — Portfolio hero, status banner, market ticker, alerts, positions preview
|
|
2. Positions & Orders — Segmented control, detailed position cards, order list
|
|
3. Trade History — Audit logs, profile switcher, metrics, trade list
|
|
4. Strategies — Strategy cards with stats, marketplace link
|
|
5. Settings — Account, execution mode, risk config, broker, notifications
|
|
6. AI Chat Modal — Full conversation UI with suggestion chips
|
|
|
|
## Key Features
|
|
- All mock data hardcoded
|
|
- Staggered card entrance animations
|
|
- Count-up number animations
|
|
- Pulsing status dots
|
|
- Custom tab bar with glow effects
|
|
- Skeleton loading states
|
|
- Pull to refresh
|
|
- Haptic feedback on interactions
|