skills.rest
led8
led8COMMUNITY
Explore all skills by this author →
GitHub

neumorphism-web-design

Design soft neumorphic web interfaces with CSS patterns for raised and inset components.

Updated Aug 27, 2026
Search Tags:#accessibility#design system#css#components#visual design#ui design#neumorphism
One-click install
npx skills add https://github.com/led8/.codex --skill neumorphism-web-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neumorphism-web-design
Source: https://github.com/led8/.codex/tree/main/skills/neumorphism-web-design
Command: npx skills add https://github.com/led8/.codex --skill neumorphism-web-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Neumorphism Web Design helps teams apply a soft, same-surface visual language without sacrificing usability by providing clear rules, accessibility guardrails, and practical CSS patterns for raised and inset components.

Core Features & Use Cases

  • Practical style rules: guidance on surface tokens, paired highlights/shadows, radii, spacing, and when to prefer raised vs inset treatments.
  • Component patterns & recipes: button, card, input, toggle, icon chip, navigation, and dashboard patterns with CSS recipes and primary CTA recommendations.
  • Accessibility guardrails: contrast, focus visibility, and interaction clarity checklists to prevent decorative controls and maintain keyboard usability.
  • Use Case: design a calm finance dashboard with raised KPI cards, inset inputs for quick filters, and a clearly accessible primary action.

Quick Start

Design a calm neumorphic dashboard with raised cards, inset inputs, visible focus rings, and an accent-backed primary CTA following the neumorphism-web-design guidance.

Frequently Asked Questions about neumorphism-web-design

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

FAQPage Schema
How do I design neumorphic UI components without failing accessibility checks?▼

Neumorphic UI design maintains accessible soft interfaces by enforcing contrast checks, visible focus rings, and interaction clarity rules, preventing decorative same-surface controls from hiding affordances and keyboard usability.

What CSS patterns should I use for raised and inset neumorphism elements?▼

Neumorphic CSS patterns use paired highlight and shadow tokens with consistent radii and spacing to build raised and inset elements like buttons, cards, and toggles, creating a consistent tactile visual design.

Can I use neumorphism for complex dashboards and finance widgets?▼

Neumorphism suits calm dashboards and finance widgets by pairing raised KPI cards with inset inputs and an accent-backed primary CTA, providing a soft visual language best suited for interfaces with limited primary actions.

When should I avoid using neumorphism in web design?▼

Neumorphism should be avoided for interfaces requiring dense data presentation or numerous primary actions, as the soft same-surface aesthetic can obscure affordances and reduce interaction clarity without strict accessibility guardrails.

How do I create a design system with neumorphic surface tokens?▼

A neumorphic design system uses surface tokens to define paired highlights, shadows, consistent radii, and spacing, ensuring raised and inset component treatments remain visually consistent across settings screens and onboarding flows.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
wredziowredzio

accessibility

Identify and remediate WCAG 2.1 AA accessibility issues in web pages.

Community
Advanced
JoeyMckenzieJoeyMckenzie
27

industrial-brutalist-ui

Design brutalist data-dense interfaces with rigid grids and CSS post-processing effects.

Community
Advanced