# Neumorphism

> Soft UI — embossed and debossed depth, monochrome palettes, subtle shadow play, and tactile minimalism.

- Skill: `jdsadminllc/neumorphism` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/neumorphism`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/neumorphism/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/neumorphism

---

# Neumorphism
## Mission
Create interfaces that feel touchable — elements rise from and sink into their background through dual shadows, soft corners, and restrained monochrome palettes.
## Brand
### 🎨 Colors
- `#E0E5EC` — Primary (soft cool gray)
- `#A3B1C6` — Secondary (muted steel)
- `#9BA7B4` — Accent (slate blue-gray)
- `#E0E5EC` — Background (soft gray, same as primary)
- `#4A5568` — Text (dark slate)
- `#8795A1` — Muted text (mid gray)
### 🔤 Typography
- Heading: **Quicksand** (Google Fonts) — rounded, soft geometric sans
- Body: **Nunito Sans** (Google Fonts) — friendly, rounded sans-serif
- Scale: xs 0.75rem | sm 0.875rem | base 1rem | lg 1.125rem | xl 1.25rem | 2xl 1.5rem | 3xl 2rem
### 📐 Spacing
- Grid: centered single-column, max-width 720px
- Section padding: 4rem vertical, generous horizontal padding (3rem min)
- Card gaps: 2.5rem — shadows need breathing room to read as depth
### 🧩 Components
- Buttons: same background color as parent surface, raised — box-shadow: 6px 6px 12px dark-shadow, -6px -6px 12px light-shadow. Pressed state inverts shadows for debossed effect.
- Cards: raised from background via dual shadows, 16px border-radius, 2rem padding, subtle inner highlight at top edge
- Nav: debossed (inset) top bar, links appear carved into the surface, active link is raised
- Hero: centered content on raised soft platform, headline with subtle text-shadow highlight, airy spacing around
- Footer: debossed section, small text, subtle light-shadow top edge
### ♿ Accessibility
- Minimum contrast 4.5:1 for text — ensure text color works against soft gray backgrounds
- Focus states: raised button effect with contrasting ring (use a colored accent for focus only)
- Shadow-only affordance is insufficient — pair with labels, icons, or cursor changes
- Respect `prefers-reduced-motion` — disable shadow-transition animations
- Minimum body font size 16px (1rem)
### ✍️ Writing Tone
- Soft, approachable, gentle. Warm and human. Never aggressive or urgent.
- Labels in lowercase. CTAs are gentle invitations ("learn more", "try it"). No ALL CAPS.
## Do / Don't
### ✅ Do
- Use dual box-shadows on every elevated element — dark shadow bottom-right, light shadow top-left
- Match element background to parent background for the seamless raised/carved illusion
- Keep border-radius between 12-20px for soft, pillowy edges
- Use a single hue family — monochrome is essential for the effect to read
- Invert shadows for pressed/active states to simulate physical depression
### ❌ Don't
- Use colored backgrounds on elevated elements — they must match the surface behind them
- Add borders — shadows alone define edges
- Apply the effect to small or closely-spaced elements — shadows need room
- Mix bright or saturated colors — stick to soft, muted tones
- Use flat design patterns alongside neumorphic ones — pick one depth language
## Quality Gates
- [ ] All elevated elements use exactly 2 box-shadows (dark + light)
- [ ] Element backgrounds match their parent's background color
- [ ] Pressed/active states invert shadow direction (inset or reversed)
- [ ] Border-radius is between 12-20px on all components
- [ ] No borders used anywhere — shadows are the sole edge definition
- [ ] Color palette stays within a single hue family (monochrome)