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

Dashboard (activity icon)
Positions (layers icon)
History (clock icon)
Strategies (cpu icon)
Settings (sliders icon)

Floating AI Chat button

Screens

Dashboard — Portfolio hero, status banner, market ticker, alerts, positions preview
Positions & Orders — Segmented control, detailed position cards, order list
Trade History — Audit logs, profile switcher, metrics, trade list
Strategies — Strategy cards with stats, marketplace link
Settings — Account, execution mode, risk config, broker, notifications
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

1.7 KiB Raw Blame History