[Redesign] UI Design - Dark Theme with Trading Identity (Subtle B&W Nod) #61
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Detailed Implementation Guide for UI Design
IMPORTANT: Brand Direction
Subtle nod to personal branding - B&W on landing, green in the app.
This approach:
SUMMARY
Redesign the Randebu UI with a clean AI chat aesthetic combined with trading identity, with subtle nod to personal B&W branding.
DESIGN SYSTEM
Color Palette
Landing Page (B&W - Personal Branding)
Color | Hex | Usage
Background | #0D0D0D | Main background (near black)
Surface | #1A1A1A | Cards, panels
Border | #333333 | Subtle borders
Text Primary | #FFFFFF | Main text
Text Secondary | #888888 | Muted text
Accent | #FFFFFF | White for buttons, highlights
App Interface (Green - Trading Identity)
Color | Hex | Usage
Background | #0D1117 | Main background
Surface | #161B22 | Cards, panels
Border | #30363D | Subtle borders
Text Primary | #E6EDF3 | Main text
Text Secondary | #8B949E | Muted text
Profit/Buy | #3FB950 | Accent (primary)
Loss/Sell | #F85149 | Red for losses
AI Accent | #58A6FF | Links, AI responses
Style
PAGE STRUCTURE
+-------------------------------------------------------------+
| Randebu Built on AVE Cloud [Login] [Try] |
| |
| RANDERU |
| |
| Create Trading Bots with AI |
| Describe your strategy in plain English. |
| We'll build the bot for you. |
| |
| [ Try Now - Free ] |
| |
+-------------------------------------------------------------+
Landing Page Styling:
+-------------------------------------------------------------+
| Randebu [Bot: PEPE Bot] [User Menu] |
+------------+--------------------------------+--------------+
| | | |
| [+ New] | Here's your strategy... | Bot Details |
| | | |
| Bot 1 | -------------------- | Name: PEPE |
| Bot 2 | | |
| | Sure, run backtest | Buy: 10% |
| | | Stop: 3% |
| | -------------------- | |
| | | |
+------------+--------------------------------+--------------+
| [Type a message...] [Send] |
+-------------------------------------------------------------+
App Styling:
Landing Page Logo (B&W)
/-/
| |
/| |
| | - Pure white
/-/
App Logo (Green Accent)
/-/
| |
/| |
| | - Green (#3FB950)
/-/
Or: Logo stays B&W, green appears in UI around it.
Custom candlestick loader - green theme:
NON-LOGGED USER EXPERIENCE
MOBILE HANDLING
IMPLEMENTATION NOTES
CSS Variables
/* Landing page - B&W */
:root {
--bg-primary: #0D0D0D;
--bg-surface: #1A1A1A;
--border: #333333;
--text-primary: #FFFFFF;
--text-secondary: #888888;
--accent: #FFFFFF;
--accent-hover: #CCCCCC;
}
/* App - Green theme */
[data-theme='app'] {
--bg-primary: #0D1117;
--bg-surface: #161B22;
--border: #30363D;
--text-primary: #E6EDF3;
--text-secondary: #8B949E;
--accent: #3FB950;
--accent-hover: #2EA043;
--profit: #3FB950;
--loss: #F85149;
}
Theme Switching
WHAT TO CHECK / VERIFY
Landing Page
Check | How
B&W colors | No green except subtle transition
Logo is white | Check logo color
Buttons are white | White bg, black text
Try Now works | Click - goes to /chat
AVE stats show | Below hero section
App Interface
Check | How
Green theme | Green accents throughout
Bot panel shows | Right pane with green border
Chat bubbles | AI = blue, user = gray
Loading animation | Candlesticks animate
Theme Transition
Check | How
No flash | Theme loads without flicker
Smooth | CSS transitions feel natural
Consistent | Same green across all pages
HOW TO TEST
Visual Tests
// Test landing theme
expect(screen.getByTestId('landing')).toHaveStyle({ backgroundColor: '#0D0D0D' });
// Test app theme
expect(screen.getByTestId('app')).toHaveStyle({ backgroundColor: '#0D1117' });
// Test accent colors
expect(screen.getByRole('button', { name: 'Try Now' })).toHaveStyle({
backgroundColor: '#FFFFFF',
color: '#0D0D0D'
});
Navigation Tests
test('landing to app transition', async () => {
// On landing
expect(document.documentElement).toHaveAttribute('data-theme', 'landing');
// Click Try Now
await userEvent.click(screen.getByRole('button', { name: 'Try Now' }));
// Now in app
expect(document.documentElement).toHaveAttribute('data-theme', 'app');
});
FILES TO MODIFY
Action | File
UPDATE | index.css or globals.css (add theme variables)
CREATE | components/ThemeWrapper.tsx
CREATE | pages/LandingPage.tsx (B&W theme)
UPDATE | pages/ChatPage.tsx (green theme)
UPDATE | pages/HomePage.tsx (green theme)
CREATE | components/CandlestickLoader.tsx
UPDATE | Logo components (support B&W and green variants)
DEPENDENCIES
PRIORITY: HIGH
ACCEPTANCE CRITERIA
Landing Page (B&W)
App Interface (Green)
Theme Transition
Consistency
NOTES FOR DEVELOPER
[Redesign] UI Design - Dark Theme with Trading Identityto [Redesign] UI Design - Dark Theme with Trading Identity (Subtle B&W Nod)