Skill: UI Design

When to use this skill

•Creating new UI views or components
•Modifying existing layouts
•Improving UX/UI aesthetics
•Ensuring consistency with the design system

Design Philosophy

"Premium Dark Mode" is the core aesthetic. The UI should look professional, financial, and sleek.

•Backgrounds: Deep, rich dark blues/blacks (not just plain #000000).
•Accents: Neon blue (#42A5F5) for action, Green/Red for financial data.
•Hierarchy: Use visual weight, spacing, and font size to guide the eye.
•Feedback: Interactive elements must respond to hover/click.

Color Palette (Reference)

Role	Color	Hex	usage
Window Bg	Dark Blue/Black	`#0A0C10`	Main application background
Panel Bg	Dark Blue/Black	`#0A0C10`	Sidebars, panels
Card Bg	Slightly lighter	`#12161D`	Surface for content containers
Button Bg	Lighter input	`#1C212A`	Standard interactive elements
Hover	Highlight	`#282E3A`	Hover state
Primary	Vibrant Blue	`#42A5F5`	Active states, primary actions
Text	High Contrast	`#F0F0F0`	Primary text
Subtext	Muted	`#B4B4B4`	Labels, secondary info
Border	Subtle	`#282C34`	Separators, outlines

Component Guidelines

1. Structure

All UI components should exist in src/interfaces/ submodules.

rust

pub fn render_my_component(ui: &mut egui::Ui, data: &MyData) {
    ui.group(|ui| {
        ui.heading("Title");
        // ... content
    });
}

2. Layouts

Use egui layout helpers effectively:

•ui.horizontal(|ui| { ... }) for toolbars
•ui.vertical(|ui| { ... }) for lists
•egui::Grid for aligned forms or data
•ui.allocate_ui for custom sizing

3. "Card" Pattern

To create distinct sections, use a coherent card style:

rust

// Helper for consistent card styling (implement if not exists or use frame)
egui::Frame::none()
    .fill(egui::Color32::from_rgb(18, 22, 29))
    .rounding(4.0)
    .stroke(egui::Stroke::new(1.0, egui::Color32::from_rgb(40, 44, 52)))
    .inner_margin(12.0)
    .show(ui, |ui| {
        ui.heading("Card Title");
        ui.label("Card content...");
    });

Best Practices (egui)

❌ Don't

•Hardcode colors everywhere: Use the ctx.style().visuals or defined constants where possible (though custom colors are allowed for the specific theming).
•Block the UI thread: No long computations in update(). Use channels to generic agents.
•Over-nest layouts: Too many nested ui.horizontal/vertical calls can kill performance and readability.

✅ Do

•Use ui.add_enabled(bool, widget) for conditional interactivity.
•Use ui.push_id loops to avoid ID clashes.
•Separate logic from rendering: The render function should typically take a reference to data, not the whole application state if possible.

Checklist for UI Changes

• Does it respect the Dark Mode palette?
• Are texts readable (contrast)?
• Is the layout responsive (resizing window)?
• Do buttons/inputs have hover states?
• Are icons using the correct emoji font fallback?
• Is padding/margin consistent (standard: 8.0, 12.0, 24.0)?

Updates

When updating the theme, modify UserAgent::update in src/interfaces/ui.rs.