neumorphism

Provide neumorphism UI design guidelines with WCAG 2.2 AA accessibility rules.

Updated Jun 23, 2026
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill neumorphism-guideops
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: neumorphism
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/neumorphism
Command: npx skills add https://github.com/guideops/agentic-shared --skill neumorphism-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides guidance and rules for designing neumorphism UI elements, which help in creating tactile and embedded-looking interfaces.

Core Features & Use Cases

  • Style Foundations: Offers detailed information about visual style, typography scale, color palette, and spacing scale specific to neumorphism.
  • Accessibility: Ensures WCAG 2.2 AA compliance, keyboard-first interactions, visible focus states, semantic HTML, and screen-reader tested labels.
  • Writing Tone: Provides a concise, confident, helpful, clear, and friendly guide for designers and engineers.

Quick Start

Implement the neumorphism design guidelines in your project to achieve a consistent and accessible neumorphism UI.

Frequently Asked Questions about neumorphism

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

FAQPage Schema
How do I design neumorphism UI elements that meet WCAG 2.2 AA accessibility standards?

To design accessible neumorphism UI elements, apply specific contrast, keyboard-first interactions, and visible focus state rules. This ensures your tactile interface meets WCAG 2.2 AA compliance while maintaining semantic HTML and screen-reader tested labels.

What typography and color rules should I use for a neumorphism design system?

A neumorphism design system requires a specific typography scale, color palette, and spacing scale to achieve a minimal, clean, high-contrast visual style. Following these defined rules ensures consistent tactile and embedded-looking interfaces.

How does neumorphism handle keyboard-first interactions and visible focus states?

Neumorphism handles keyboard-first accessibility by enforcing visible focus states and semantic HTML across UI components. This approach guarantees that embedded-looking interfaces remain fully navigable via keyboard and compatible with screen readers.

Can I use neumorphism design guidelines for a high-contrast, minimal visual style?

Yes, neumorphism design guidelines specifically support creating a minimal, clean, high-contrast, and playful matrix visual style. These rules provide the exact typography and spacing scales needed to achieve this specific aesthetic.

What are the limitations of neumorphism for UI design accessibility?

Neumorphism UI design limitations center on maintaining sufficient contrast for embedded-looking interfaces. To overcome these constraints, you must strictly follow WCAG 2.2 AA rules, ensuring visible focus states and screen-reader tested labels are implemented.

Do I need a predefined spacing scale to build consistent neumorphism interfaces?

Yes, you need a predefined spacing scale to build consistent neumorphism interfaces. Utilizing a specific spacing scale alongside matching typography and color guidelines ensures your tactile UI elements remain visually structured and accessible.