neumorphism

Name: neumorphism
Availability: InStock
Author: Bergside

Define neumorphism design-system guidance for accessible UI components with WCAG 2.2 AA constraints.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #design tokens #wcag #ui components #interaction states #neumorphism

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill neumorphism-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: neumorphism
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/neumorphism
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill neumorphism-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create neumorphism UI that looks soft and embedded while staying accessible, consistent, and implementation-ready.

Core Features & Use Cases

Token-first foundations: Establishes a monochromatic palette, typography scale, and compact spacing rhythm so neumorphic surfaces remain coherent across components.
Implementation-ready component guidance: Defines required visual states (default, hover, focus-visible, active, disabled, loading, error as relevant) and rules for interaction behavior across pointer, keyboard, and touch.
Accessibility and QA guardrails: Enforces WCAG 2.2 AA principles, semantic-first HTML/ARIA guidance, visible focus, and testable acceptance criteria to prevent low-contrast and ambiguity issues.

Quick Start

Ask your AI agent to generate neumorphism component guidelines and default tokens for buttons, inputs, and cards that follow WCAG 2.2 AA with explicit focus-visible and disabled/loading/error states.

Frequently Asked Questions about neumorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make neumorphism UI accessible and meet WCAG 2.2 AA standards?▼

To make neumorphism UI accessible, you must enforce WCAG 2.2 AA constraints by using semantic HTML, visible focus states, and testable acceptance criteria to prevent low-contrast and ambiguity issues common with soft shadows.

What design tokens do I need to build a neumorphism design system?▼

Building a neumorphism design system requires token-first foundations for a monochromatic palette, typography scale, and compact spacing rhythm to ensure soft extruded surfaces remain visually coherent across all UI components.

How do I define interaction states for neumorphic buttons and inputs?▼

Defining interaction states for neumorphic buttons and inputs requires specifying visual rules for default, hover, focus-visible, active, disabled, loading, and error states across pointer, keyboard, and touch behaviors.

Can I use neumorphism for complex UI components like modals and cards?▼

You can use neumorphism for modals and cards by applying design-system guidance that maps inner and outer shadows to component families, ensuring consistent surfaces and interaction behaviors across product interfaces.

When should I avoid using soft extruded monochromatic UI in product interfaces?▼

You should avoid soft extruded monochromatic UI when you cannot guarantee strict keyboard-first accessibility, visible focus indicators, and sufficient color contrast, as neumorphism frequently causes low-contrast and ambiguity issues without enforced guardrails.