UI Design Styles

This skill provides specialized knowledge and workflows for implementing the most popular modern UI design styles. It focuses on achieving a professional, polished look while maintaining high standards for accessibility and legibility.

Core UI Styles

Select the style that best fits the project's goals:

• Soft UI / Modern Design: Best for friendly, inviting B2C interfaces. Uses subtle gradients and lifelike shadows. See soft_ui.md.

• Dark Mode: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See dark_mode.md.

• Flat Design: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See flat_design.md.

• Neumorphism: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See neumorphism.md.

• Glassmorphism: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See glassmorphism.md.

• Aurora UI Gradients: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See aurora_ui.md.

General Design Principles

Regardless of the chosen style, always apply these fundamental practices:

• Accessibility First: Design styles should never impair the user's ability to navigate or read essential content. If a style (like Glassmorphism) causes legibility issues, it must be refined or limited to non-essential elements.

• Hierarchy through Depth: Use the "top-down lighting" model. Elements closer to the user should be lighter and/or have more prominent shadows/transparency.

• Color Harmony: Avoid pure black/white when possible. Tint grays and backgrounds with a hint of the primary brand color to create a more cohesive and professional feel.

• Consistent Roundness: Choose a corner radius (e.g., 8px, 16px) and apply it consistently across all components to maintain visual unity.

References

• Soft UI Guidelines

• Dark Mode Standards

• Flat Design Principles

• Neumorphism Patterns

• Glassmorphism Techniques

• Aurora UI Backgrounds