ui-design

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)

Component Guidelines

1. Structure

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

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:

// 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.