Neumorphism / Soft UI Design Style
CommunityCreate soft, tactile UIs with elegant depth.
AuthorGeneralJerel
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Neumorphism combines flat design with subtle 3D depth by using dual shadows on monochromatic backgrounds to create tactile, premium surfaces while staying minimalist.
Core Features & Use Cases
- Dual Shadow Technique (The Core): apply a light shadow on the top-left and a dark shadow on the bottom-right to simulate raised or inset elements on a uniform base.
- Monochromatic Palette & Pressed States: base neutral color with subtle tonal shifts, plus pressed states that reverse shadows for a tactile feedback.
- Accessible Design Considerations: address contrast and focus indicators to ensure readability and keyboard accessibility.
- Real-World Use Case: dashboards, settings panels, and interactive cards where soft aesthetics meet clear affordances.
Quick Start
Design a neumorphic button with dual shadows on a monochromatic background and provide hover and active states.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Neumorphism / Soft UI Design Style Download link: https://github.com/GeneralJerel/awesome-style-refs/archive/main.zip#neumorphism-soft-ui-design-style Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.