Minimalsystem

Soft Minimal

78
šŸ”„ Certified BangerThis prompt produces genuinely distinct output

Generates ultra-clean UI with enormous whitespace, barely-there borders, whisper-soft shadows, and a restrained gray palette. Every element floats in negative space. Less is less.

cardsformsnavigationwhitespace

Added February 12, 2026 by unslop.dev

Example output

Card component

Case Study

Redesigning the checkout flow

How we reduced cart abandonment by 23% with three small changes to the payment step.

Sarah Chen Ā· 8 min
View code
<div style="padding: 3rem; background: #fafafa;">
  <div style="background: white; border-radius: 1rem; padding: 2rem; max-width: 22rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
    <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0 0 1rem 0;">Case Study</p>
    <h3 style="font-size: 1rem; font-weight: 500; color: #111827; margin: 0 0 0.5rem 0;">Redesigning the checkout flow</h3>
    <p style="font-size: 0.8125rem; color: #6b7280; line-height: 1.6; margin: 0 0 1.5rem 0;">How we reduced cart abandonment by 23% with three small changes to the payment step.</p>
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <div style="width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #e5e7eb;"></div>
      <span style="font-size: 0.75rem; color: #9ca3af;">Sarah Chen Ā· 8 min</span>
    </div>
  </div>
</div>

Input group

View code
<div style="padding: 3rem; background: #fafafa;">
  <div style="max-width: 24rem;">
    <label style="display: block; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 0.5rem;">Email address</label>
    <input type="email" placeholder="you@company.com" style="width: 100%; background: #f9fafb; border: none; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: #111827; outline: none; box-sizing: border-box;" />
    <div style="height: 1.5rem;"></div>
    <label style="display: block; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 0.5rem;">Password</label>
    <input type="password" placeholder="ā€¢ā€¢ā€¢ā€¢ā€¢ā€¢ā€¢ā€¢" style="width: 100%; background: #f9fafb; border: none; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: #111827; outline: none; box-sizing: border-box;" />
    <div style="height: 1.5rem;"></div>
    <button style="width: 100%; background: #111827; color: white; border: none; border-radius: 0.75rem; padding: 0.75rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;">Sign in</button>
  </div>
</div>

Stats row

2,847

Active users

98.2%

Uptime

1.2s

Avg response

View code
<div style="padding: 3rem; background: #fafafa;">
  <div style="display: flex; gap: 3rem; max-width: 36rem;">
    <div>
      <p style="font-size: 1.5rem; font-weight: 500; color: #111827; margin: 0;">2,847</p>
      <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0.25rem 0 0 0;">Active users</p>
    </div>
    <div style="width: 1px; background: #f3f4f6;"></div>
    <div>
      <p style="font-size: 1.5rem; font-weight: 500; color: #111827; margin: 0;">98.2%</p>
      <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0.25rem 0 0 0;">Uptime</p>
    </div>
    <div style="width: 1px; background: #f3f4f6;"></div>
    <div>
      <p style="font-size: 1.5rem; font-weight: 500; color: #111827; margin: 0;">1.2s</p>
      <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0.25rem 0 0 0;">Avg response</p>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a soft minimal style ā€” so clean it's almost transparent. Maximum whitespace, minimum visual noise. Components that feel like they're floating in space. This is the design equivalent of whispering.

VISUAL RULES:
- Background: pure white (#fff) or the faintest warm gray (#fafafa). Nothing else.
- Borders: 1px gray-100 or gray-200 at most. Many components have NO border ā€” just shadow.
- Shadows: Extremely subtle. `shadow-sm` = `0 1px 2px rgba(0,0,0,0.04)`. The card separation comes from whitespace, not shadow.
- Border radius: rounded-2xl (16px) on cards and containers. rounded-xl on inputs and buttons. Generous curves.
- Colors: Gray-900 for headings, gray-500 for body, gray-400 for labels. One muted accent (blue-500 or violet-500) used only for interactive elements.
- Typography: Light-weight headings (font-medium, not font-bold). Small text sizes. text-sm for most UI, text-xs for metadata. Leading-relaxed everywhere.
- Spacing: Extreme. p-8 inside cards. gap-8 in grids. py-24 between sections. Let elements BREATHE.
- Icons: Ultra-thin stroke (1px), gray-400. Small (16px). Understated.

SPECIFIC PATTERNS:
- Cards: bg-white rounded-2xl shadow-sm p-8. No border. Hover: shadow-md transition-shadow duration-200.
- Buttons primary: bg-gray-900 text-white rounded-xl px-6 py-3 text-sm font-medium. Hover: bg-gray-800.
- Buttons secondary: bg-gray-100 text-gray-700 rounded-xl. No border.
- Inputs: bg-gray-50 rounded-xl border-0 text-sm. Focus: ring-2 ring-blue-500/20 bg-white.
- Dividers: border-t border-gray-100. Or just whitespace ā€” prefer whitespace.
- Labels: text-xs text-gray-400 uppercase tracking-widest font-medium.

ANTI-PATTERNS:
- No dark backgrounds. No colored surfaces.
- No thick borders. No visible border on white cards.
- No large text. Largest heading is text-2xl.
- No bright or saturated accent colors. Keep accents muted.
- No icons with fill. Stroke only, thin.
- No shadows larger than shadow-md.

Related prompts

General Settings

Manage your workspace preferences.

app.example.com/

Team Members

SK

Sarah Kim

sarah@acme.com

Admin
JD

James Doe

james@acme.com

Editor
AL

Amy Liu

amy@acme.com

Viewer
Minimal

Clean SaaS

šŸš®52system

Generates production-grade SaaS UI in the style of Stripe, Linear, or Vercel ā€” neutral grays, precise spacing, subtle borders, blue accent, and components that feel engineered rather than designed.

Material Surface

Surfaces at higher elevations cast larger shadows. This communicates hierarchy and focus within the interface.

+
Minimal

Material Elevation

šŸ”„83system

Generates UI following Google's Material Design principles ā€” elevation-based depth, contained buttons, floating action buttons, card surfaces at different z-levels, and the systematic rigor of a proper design system.

Reflection

The emptiness between objects is itself a presence

In Japanese aesthetics, ma (間) refers to the pause between notes, the space between objects, the silence between words. It is not absence ā€” it is the interval that gives meaning to what surrounds it.

February 2026 Ā· 4 min
Contact
Minimal

Japanese Zen

šŸ”„80system

Generates UI inspired by wabi-sabi and Japanese minimalism ā€” asymmetric balance, muted earth tones, enormous breathing room, subtle texture, and the quiet confidence of a tea ceremony.