Clean Interface Design

Most "AI-looking" UI fails the same way: too many colors, too many type sizes, inconsistent radii, no clear primary action, and no breathing room. Fix those and almost anything looks intentional.

Full depth (specs, contrast math, tokens, real examples) is available via the SaglitzDesign MCP (npx saglitzdesign-mcp) — docs clean-app-design, color-systems, typography, spacing-layout, visual-craft-standards; tools create_design_system (one call → the whole foundation), generate_layout_system, generate_design_tokens, audit_accessibility, and audit_design_system to measure whether the restraint below actually held.

The rules that do most of the work

1. One accent color + its soft tints. Pick a single brand/accent hue. Use it for the primary action and key highlights only (~10% of the surface). Everything else is a neutral ramp. Scarcity is what makes the accent pop.
2. Whitespace is a feature. Give elements room to breathe; when unsure, add more space, not more UI. Grouping is communicated by space — gap within a group must be smaller than gap between groups.
3. One corner radius system. Pick a radius and apply it consistently to cards, inputs, buttons, and icon containers. Don't mix 4px cards with 16px buttons. Pill buttons pair with pill inputs.
4. Two or three type sizes, not five. A tight scale (e.g. 14 / 16 / 24) with weight and color for hierarchy reads far cleaner than five sizes. Express hierarchy with size + weight + color (3 opacity levels), not more fonts.
5. One clean font. A single quality family is enough. Good geometric/neutral options: system fonts (SF/Segoe/Roboto), Inter, Geist, Open Runde (free, rounded-geometric). Two families max — a distinctive display + a workhorse body.
6. One icon family, one weight. Use a single cohesive set at a single stroke/weight. Good free sets: Solar (incl. duotone), Lucide, Phosphor, Heroicons. Never mix icon families.
7. Borders OR shadows — pick one. Choose one system to separate surfaces (borders read better in dark mode; soft shadows on light). Don't stack a border and a shadow and a fill on the same card.
8. One primary action per view. Exactly one filled/high-emphasis button per screen or section. Everything else is secondary (tonal/outline) or tertiary (text). Two filled buttons side by side destroy hierarchy.

Color & contrast