- name
- UI Design
- description
- Designing premium user interfaces with egui
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.
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 toolbarsui.vertical(|ui| { ... })for listsegui::Gridfor aligned forms or dataui.allocate_uifor 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().visualsor 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/verticalcalls can kill performance and readability.
✅ Do
- Use
ui.add_enabled(bool, widget)for conditional interactivity. - Use
ui.push_idloops 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.