Neumorphism design skill for AI agents

Overview

Neumorphism is a soft-shadow, extruded design system skill file that instructs AI coding assistants to generate interfaces where elements appear to push out of or press into their background surface — like buttons molded from the same material as the page itself. Combined with Space Mono's quirky fixed-width character and a deep teal primary accent, this skill produces UIs that feel tactile, physical, and quietly futuristic.

Neumorphism (a portmanteau of "new" and "skeuomorphism") creates depth through carefully paired light and dark shadows on a uniform surface color, making elements look like they're embossed or debossed from the background. When you give this skill file to an AI assistant, every card, button, and input carries that signature soft-extruded quality — the interface feels like a single sheet of material that has been gently shaped.

This skill is ideal for developer tools, AI product communities, creative dashboards, personal portfolios, indie hacker platforms, and any product where a distinctive, tactile aesthetic reinforces the brand.

Design Tokens

Color Palette

Neumorphism pairs a deep teal primary with a light gray surface that serves as the unified material from which all elements are sculpted:

The surface color (#E7E5E4) is the most important token in the system. In neumorphism, the background and the elements are visually the same material — shadows create the illusion of depth. The warm stone tone was chosen because it produces natural-looking light and dark shadow pairs (white highlight shadows and darker gray cast shadows) without appearing cold or clinical.

The Neumorphic Effect

The signature visual treatment defines how every elevated and recessed element behaves:

• Extruded (raised) elements — buttons, cards, and interactive controls use a light shadow on the top-left and a dark shadow on the bottom-right, creating the illusion that the element is pushing out of the surface toward the user
• Inset (pressed) elements — active button states, text input fields, and toggles in their "on" state use inverted shadows (dark top-left, light bottom-right), creating the illusion that the element is pressed into the surface
• Consistent light source — all shadows assume a single top-left light source. Mixing shadow directions breaks the physical illusion and is explicitly prohibited
• Shadow values — the skill file defines concrete shadow offsets (typically 4–8px), blur radii (8–16px), and opacity values for both light and dark shadows, ensuring AI output is consistent and production-ready
• Same-material rule — neumorphic elements must use the same background color as the surface they sit on. The depth comes entirely from shadows, not from color differentiation between element and background

Typography

Neumorphism uses Space Mono as both the primary and display font — a fixed-width typeface that adds a tech-forward personality:

• Primary and display font: Space Mono — its quirky geometric letterforms and fixed-width spacing create a distinctive retro-futuristic character. Against the soft neumorphic surfaces, the monospace type adds an unexpected playful contrast — soft physical shapes meeting rigid digital type
• Monospace font: JetBrains Mono — used for code blocks and technical content where developer-oriented ligatures and optimizations matter

The typography uses a desktop-first expressive scale — sizes calibrated for wide viewports where the neumorphic shadow effects have room to render clearly. The monospace font creates an implicit character grid that complements the geometric precision of neumorphic shadow calculations.

Spacing

Neumorphism uses a compact density mode — tight spacing that keeps the interface efficient while respecting the shadow space that neumorphic elements require:

• Shadow offsets (4–8px) extend beyond the element's box, so adjacent elements need enough gap to prevent shadow overlap
• The compact density creates a purposeful tension between the soft, pillowy visual effect and the efficient, information-dense layout
• Despite compact spacing, all interactive elements maintain accessible hit areas
• The system prevents elements from being so close that their shadows merge, which would destroy the individual extrusion illusion

Component Coverage

Neumorphism includes guidance for over 40 component families, each adapted for the extruded/inset shadow treatment:

• Inputs and forms — extruded buttons that press inset on click, inset text inputs, selects, soft-shadow checkboxes and radios, switches with physically toggling knobs, textareas, date/time pickers, file uploaders
• Data display — extruded cards, neumorphic tables, data lists, data grids, charts on raised panels, stats/metrics blocks, soft-edged badges, circular avatars with shadow rings
• Navigation — breadcrumbs, pagination, steppers, neumorphic sidebars, top bars, tabs with raised/pressed states, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators with inset tracks, skeleton loaders that match the surface material
• Page-level patterns — search with inset input fields, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with explicit shadow transitions between states. The key interaction pattern: extruded elements transition to inset on press/active, creating a satisfying physical button-press metaphor. Empty, loading, and error states are mandatory for every component. Responsive behavior is built in by default.

Accessibility

Neumorphism enforces WCAG 2.2 AA compliance, with specific attention to the unique accessibility challenges of shadow-based depth:

• Element boundaries — neumorphic elements have no visible borders by default (depth comes from shadows alone). The skill file mandates sufficient shadow contrast so that elements remain distinguishable from their background for users with low vision or reduced contrast sensitivity
• Keyboard-first interactions with visible focus states — focus indicators use the teal primary color as a solid ring or outline, providing clear contrast against the neutral surface
• Semantic HTML before ARIA — native interactive elements first, ARIA only when semantic markup falls short
• Screen-reader tested labels — every interactive element must have a verified programmatic label
• No decorative motion without purpose — shadow transitions serve as functional state feedback, not ambient decoration
• Accessible hit areas — despite compact density, all interactive targets meet minimum size requirements

Neumorphism is one of the most accessibility-challenged visual styles because it relies on subtle shadow differences to define element boundaries. The skill file addresses this directly: minimum shadow contrast ratios are specified, fallback border treatments are defined for high-contrast modes, and every shadow value is verified to produce sufficient visual separation. When the soft-shadow aesthetic conflicts with element discoverability, accessibility always wins.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull neumorphism

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build dashboards, settings pages, or community platforms, and the output will follow the Neumorphism system's extruded shadow treatment, teal accents, and monospace typography.

Claude (Anthropic)

Use Neumorphism directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce soft-shadow, extruded interfaces with proper neumorphic shadow values, press-in interactions, and the Space Mono personality

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and shadow rules as prompt context

Design Philosophy

Neumorphism is built on the idea that digital interfaces can feel physical without being skeuomorphic. The skill file follows three principles:

1. One material, shaped by light — the entire interface is a single surface. Elements don't sit on top of the background — they emerge from it. This creates a cohesion that card-based or bordered designs cannot achieve
2. Shadows are the design language — where other systems use borders, color fills, and elevation tokens to define hierarchy, neumorphism uses shadow direction, intensity, and inversion. The skill file treats shadow values with the same precision that other systems apply to color tokens
3. Tactile digital — the extruded/inset interaction model makes buttons feel like physical switches and inputs feel like carved channels. Combined with Space Mono's quirky character, the result is an interface that feels like a beautifully machined device — precise, tactile, and satisfying to use