Minimalsystem

Neumorphism

88
πŸ”₯ Certified BangerThis prompt produces genuinely distinct output

Generates UI with soft extruded surfaces β€” same-color shadows on both sides, elements that look pushed out of or pressed into their background. The pillowy, clay-like aesthetic of 'soft UI' design.

neumorphicsoft uiextrudedshadowsmonochrome

Added February 16, 2026 by unslop.dev

Example output

Raised card

⬑

Soft Interface

Elements emerge from and press into a unified surface. Light and shadow are the only tools you need.

View code
<div style="padding: 2.5rem; background: #e0e5ec;">
  <div style="max-width: 24rem; background: #e0e5ec; border-radius: 20px; padding: 1.75rem; box-shadow: -8px -8px 16px rgba(255,255,255,0.7), 8px 8px 16px rgba(166,180,200,0.5);">
    <div style="width: 48px; height: 48px; border-radius: 14px; background: #e0e5ec; box-shadow: -4px -4px 8px rgba(255,255,255,0.7), 4px 4px 8px rgba(166,180,200,0.4); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
      <span style="font-size: 1.25rem; color: #6366f1;">⬑</span>
    </div>
    <h3 style="font-family: -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif; font-size: 1.125rem; font-weight: 600; color: #374151; margin: 0 0 0.5rem 0;">Soft Interface</h3>
    <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; color: #6b7280; line-height: 1.6; margin: 0 0 1.5rem 0;">Elements emerge from and press into a unified surface. Light and shadow are the only tools you need.</p>
    <div style="display: flex; gap: 0.75rem;">
      <button style="background: #e0e5ec; color: #6366f1; border: none; border-radius: 12px; padding: 0.5rem 1.5rem; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: -4px -4px 8px rgba(255,255,255,0.7), 4px 4px 8px rgba(166,180,200,0.4);">Explore</button>
      <button style="background: #e0e5ec; color: #6b7280; border: none; border-radius: 12px; padding: 0.5rem 1.5rem; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; cursor: pointer; box-shadow: -4px -4px 8px rgba(255,255,255,0.7), 4px 4px 8px rgba(166,180,200,0.4);">Learn More</button>
    </div>
  </div>
</div>

Input form

Create Account

View code
<div style="padding: 2.5rem; background: #e0e5ec;">
  <div style="max-width: 22rem; background: #e0e5ec; border-radius: 20px; padding: 1.75rem; box-shadow: -8px -8px 16px rgba(255,255,255,0.7), 8px 8px 16px rgba(166,180,200,0.5);">
    <h3 style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 600; color: #374151; margin: 0 0 1.25rem 0;">Create Account</h3>
    <div style="margin-bottom: 1rem;">
      <label style="display: block; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.5rem;">Email</label>
      <input type="email" placeholder="you@example.com" style="width: 100%; box-sizing: border-box; background: #e0e5ec; border: none; border-radius: 12px; padding: 0.75rem 1rem; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; color: #374151; outline: none; box-shadow: inset -4px -4px 8px rgba(255,255,255,0.6), inset 4px 4px 8px rgba(166,180,200,0.4);" />
    </div>
    <div style="margin-bottom: 1.5rem;">
      <label style="display: block; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.5rem;">Password</label>
      <input type="password" placeholder="β€’β€’β€’β€’β€’β€’β€’β€’" style="width: 100%; box-sizing: border-box; background: #e0e5ec; border: none; border-radius: 12px; padding: 0.75rem 1rem; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.8125rem; color: #374151; outline: none; box-shadow: inset -4px -4px 8px rgba(255,255,255,0.6), inset 4px 4px 8px rgba(166,180,200,0.4);" />
    </div>
    <button style="width: 100%; background: #6366f1; color: white; border: none; border-radius: 14px; padding: 0.75rem; font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: -4px -4px 8px rgba(255,255,255,0.5), 4px 4px 8px rgba(166,180,200,0.5);">Sign Up</button>
  </div>
</div>

Control panel with toggles

Wi-Fi
Bluetooth
Dark Mode
View code
<div style="padding: 2.5rem; background: #e0e5ec;">
  <div style="max-width: 24rem;">
    <div style="background: #e0e5ec; border-radius: 20px; padding: 1.5rem; box-shadow: -8px -8px 16px rgba(255,255,255,0.7), 8px 8px 16px rgba(166,180,200,0.5);">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #374151; font-weight: 500;">Wi-Fi</span>
        <div style="width: 48px; height: 28px; background: #6366f1; border-radius: 14px; box-shadow: inset -2px -2px 4px rgba(255,255,255,0.2), inset 2px 2px 4px rgba(0,0,0,0.1); position: relative;">
          <div style="width: 22px; height: 22px; background: #e0e5ec; border-radius: 50%; position: absolute; top: 3px; right: 3px; box-shadow: -3px -3px 6px rgba(255,255,255,0.6), 3px 3px 6px rgba(166,180,200,0.5);"></div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #374151; font-weight: 500;">Bluetooth</span>
        <div style="width: 48px; height: 28px; background: #e0e5ec; border-radius: 14px; box-shadow: inset -2px -2px 4px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(166,180,200,0.4); position: relative;">
          <div style="width: 22px; height: 22px; background: #e0e5ec; border-radius: 50%; position: absolute; top: 3px; left: 3px; box-shadow: -3px -3px 6px rgba(255,255,255,0.6), 3px 3px 6px rgba(166,180,200,0.5);"></div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span style="font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #374151; font-weight: 500;">Dark Mode</span>
        <div style="width: 48px; height: 28px; background: #e0e5ec; border-radius: 14px; box-shadow: inset -2px -2px 4px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(166,180,200,0.4); position: relative;">
          <div style="width: 22px; height: 22px; background: #e0e5ec; border-radius: 50%; position: absolute; top: 3px; left: 3px; box-shadow: -3px -3px 6px rgba(255,255,255,0.6), 3px 3px 6px rgba(166,180,200,0.5);"></div>
        </div>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a neumorphic (soft UI) style β€” the design pattern where elements appear extruded from or pressed into a flat background using same-color shadows on opposing sides. A light shadow on one side, a dark shadow on the other, creating a soft 3D clay-like appearance. Everything looks molded from the same material. Minimalist, monochromatic, and tactile.

VISUAL RULES:
- Background: A single muted color that ALL elements share. Light gray: #e0e5ec is the classic. Everything β€” page, cards, buttons β€” is the same base color. The shadows create the UI, not color differences.
- Light shadow: White/light at ~70% opacity. `box-shadow: -6px -6px 12px rgba(255,255,255,0.7)`. Positioned top-left (light source from top-left).
- Dark shadow: Darker shade of base at ~25% opacity. `box-shadow: 6px 6px 12px rgba(166,180,200,0.5)`. Positioned bottom-right.
- Raised elements: Both shadows outward. `box-shadow: -6px -6px 12px rgba(255,255,255,0.7), 6px 6px 12px rgba(166,180,200,0.5);`
- Pressed/inset elements: Both shadows inward. `box-shadow: inset -4px -4px 8px rgba(255,255,255,0.6), inset 4px 4px 8px rgba(166,180,200,0.4);`
- Text: Dark gray (#374151) for primary, medium gray (#6b7280) for secondary, light gray (#9ca3af) for tertiary.
- Accent color: Use ONE subtle accent sparingly. Soft blue (#6366f1) or soft teal (#06b6d4) for active states, toggles, and interactive highlights.
- Typography: Clean modern sans-serif. `font-family: -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif`. Medium weight. Simple.
- Borders: NONE. No borders anywhere. Shadows define all boundaries.
- Border radius: 12-20px on cards and buttons. Generous, soft, rounded. Like molded clay.
- Spacing: Generous. Elements need breathing room for shadows to work. p-6+, gap-6+.
- Consistency: EVERY interactive element must have the neumorphic shadow treatment. Raised for default, inset for active/pressed.

SPECIFIC PATTERNS:
- Cards: Same background color as page. Raised neumorphic shadow. Large border-radius. Content floats on the surface.
- Buttons: Raised neumorphic shadow. On click/active: switch to inset shadow. Smooth transition.
- Inputs: Inset (pressed) neumorphic shadow. Content sits recessed. Same bg color as everything else.
- Toggles: Track is inset. Thumb is raised with circular shadow. Active: accent color as subtle tint.
- Sliders: Track is inset groove. Thumb is raised circle.
- Icon buttons: Circular, raised neumorphic shadow. Icon in medium gray.
- Progress bars: Inset track, raised filled portion.

ANTI-PATTERNS:
- No borders. Shadows ONLY for definition.
- No different background colors between elements. Everything is the same base color.
- No flat elements. Every element is either raised or inset.
- No heavy color usage. Near-monochromatic with minimal accent.
- No dark mode (classic neumorphism works best on light gray).
- No sharp corners. Minimum 12px border-radius.
- No traditional drop shadows. Only matched dual-shadows.

Related prompts

The weight of a single line

In calligraphy, a single stroke contains the full range of human expression. Press hard for conviction. Lift gently for grace. The brush knows no undo.

On practice δΊŒγ€‡δΊŒε…­
Minimal

Ink Wash Sumi-e

πŸ”₯87system

Generates UI inspired by East Asian ink wash painting β€” black ink on rice paper, calligraphic weight variation, vast emptiness as a design element, and the meditative beauty of a single brushstroke.

β—†   Artisan Collection   β—†

The Language of Pattern

Each tile tells a story. In repetition, individual forms become something greater β€” a visual rhythm that transforms walls into canvases.

Lisboa, 2026 ● Hand-painted
●   ●   ●   ●   ●

348

Patterns

12

Artisans

5th

Century

Minimal

Ceramic Tile

πŸ”₯77system

Generates UI inspired by Portuguese azulejo and Moroccan zellige β€” intricate blue-and-white patterns, decorative borders, tile-grid layouts, and the handcrafted warmth of traditional ceramic artistry.

Product

RT-20 Interface Module

A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.

$120.00
Minimal

Dieter Rams

πŸ”₯86system

Generates UI inspired by Dieter Rams' 10 Principles of Good Design β€” extreme functional minimalism, Braun-era industrial aesthetics, deliberate restraint, and the conviction that less but better is the only way.