# UI Design Styles

> Comprehensive guidance for applying modern UI design styles, including Soft UI, Dark Mode, Flat Design, Neumorphism, Glassmorphism, and Aurora UI Gradients. Use when a user asks to: (1) Apply a specific UI style to a project, (2) Create a modern, visually appealing UI prototype, (3) Improve accessibility while following design trends, or (4) Understand the technical implementation of specific UI effects like frosted glass or soft shadows.

- Skill: `diegosouzapw/ui-design-styles` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/ui-design-styles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/ui-design-styles/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/ui-design-styles

---


# 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](references/soft_ui.md).
- **Dark Mode**: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See [dark_mode.md](references/dark_mode.md).
- **Flat Design**: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See [flat_design.md](references/flat_design.md).
- **Neumorphism**: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See [neumorphism.md](references/neumorphism.md).
- **Glassmorphism**: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See [glassmorphism.md](references/glassmorphism.md).
- **Aurora UI Gradients**: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See [aurora_ui.md](references/aurora_ui.md).

## General Design Principles

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

1. **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.
2. **Hierarchy through Depth**: Use the "top-down lighting" model. Elements closer to the user should be lighter and/or have more prominent shadows/transparency.
3. **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.
4. **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](references/soft_ui.md)
- [Dark Mode Standards](references/dark_mode.md)
- [Flat Design Principles](references/flat_design.md)
- [Neumorphism Patterns](references/neumorphism.md)
- [Glassmorphism Techniques](references/glassmorphism.md)
- [Aurora UI Backgrounds](references/aurora_ui.md)