jdsadminllc 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)