egui_sauge

A fresh, natural design system for egui — sage palette, warm neutrals, WCAG AA contrast, and a ready-to-use component library aimed at IT applications.

use eframe::egui;
use egui_sauge::{Palette, Density, Locale, apply_theme_with, install_fonts, set_locale};
use egui_sauge::components::{Button, Card, Section};

fn main() -> eframe::Result<()> {
    eframe::run_native(
        "My app",
        eframe::NativeOptions::default(),
        Box::new(|cc| {
            install_fonts(&cc.egui_ctx);
            apply_theme_with(&cc.egui_ctx, &Palette::light(), Density::Comfortable);
            set_locale(&cc.egui_ctx, Locale::En); // or Locale::Fr
            Ok(Box::new(MyApp::default()) as Box<dyn eframe::App>)
        }),
    )
}

What's in the box

Theme

• 20-role semantic palette (light + dark, both WCAG AA validated).
• 4-pt spacing scale, 5-step radius scale, 4-level elevation with real shadows.
• Density preset (Comfortable / Compact).
• Locale (En / Fr) for the strings the design system itself emits.
• ~80 named icons backed by Phosphor, plus Icon::Glyph and Icon::Custom escape hatches.

Components (egui_sauge::components)

See GUIDE.md for the UX/UI playbook — page composition, when to use each navigation pattern, modal vs side panel, button order, typography hierarchy, accessibility checklist, IT-app patterns.

Live demos

cargo run --example showcase    # every component, all densities + locales
cargo run --example workbench   # IDE-style layout: activity rails, file
                                # tree, editor tabs, terminal, status bar

Adding to your project

The crate is not yet on crates.io. Pick the option that fits your workflow:

# Option 1 — local path (during development)
egui_sauge = { path = "../egui_sauge" }

# Option 2 — git
egui_sauge = { git = "https://github.com/macnjil4/egui_sauge", tag = "v2.0.0" }

# Option 3 — crates.io (once published)
egui_sauge = "2.0"

# In all cases, your egui must match egui_sauge's pinned version:
egui   = "0.34"
eframe = "0.34"

Compatibility

Fonts

install_fonts installs the typographic scale and registers the Phosphor icon font. UI text uses egui's bundled fonts.

If you want a custom UI typeface (Inter, JetBrains Mono, your brand font…), embed it at the application level before calling install_fonts:

use std::sync::Arc;
use egui::{FontData, FontDefinitions, FontFamily};

let mut fonts = FontDefinitions::default();
fonts.font_data.insert(
    "Inter".into(),
    Arc::new(FontData::from_static(include_bytes!("../assets/Inter-Regular.ttf"))),
);
fonts
    .families
    .entry(FontFamily::Proportional)
    .or_default()
    .insert(0, "Inter".into());

egui_phosphor::add_to_fonts(&mut fonts, egui_phosphor::Variant::Regular);
ctx.set_fonts(fonts);
egui_sauge::install_fonts(ctx); // sets the type scale

Inter and JetBrains Mono are both SIL OFL 1.1 and redistributable — drop the TTFs in your own assets directory.

i18n

egui_sauge does not ship a full i18n runtime — only the ~6 strings it owns (default ConfirmDialog buttons, StatusDot labels) are translated, currently En (default) and Fr. For your application's strings, plug in any i18n crate you like (fluent, rust-i18n, …). See GUIDE.md § Internationalisation.

Status

Stable. Following semver — breaking changes will land in 2.0.

License

Apache-2.0