Minimalsystem

Japanese Zen

80
๐Ÿ”ฅ Certified BangerThis prompt produces genuinely distinct output

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.

whitespaceearth tonesasymmetriccalm

Added February 9, 2026 by unslop.dev

Example output

Content card

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
View code
<div style="padding: 3rem; background: #faf8f5;">
  <div style="max-width: 24rem;">
    <div style="margin-bottom: 2.5rem;">
      <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #7c8c6e; font-family: 'Helvetica Neue', sans-serif;">Reflection</span>
    </div>
    <h2 style="font-family: 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 1.75rem; color: #3a3a3a; margin: 0 0 1.25rem 0; line-height: 1.35; letter-spacing: -0.01em;">The emptiness between objects is itself a presence</h2>
    <p style="font-family: 'Helvetica Neue', sans-serif; font-size: 0.9375rem; color: #6b6560; line-height: 1.8; margin: 0 0 2rem 0;">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.</p>
    <div style="display: flex; align-items: center; gap: 1rem;">
      <span style="font-size: 0.8125rem; color: #9e958a; font-family: 'Helvetica Neue', sans-serif;">February 2026</span>
      <span style="color: #d4cfc7;">ยท</span>
      <span style="font-size: 0.8125rem; color: #9e958a; font-family: 'Helvetica Neue', sans-serif;">4 min</span>
    </div>
  </div>
</div>

Minimal form

Contact
View code
<div style="padding: 3rem; background: #faf8f5;">
  <div style="max-width: 22rem;">
    <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #7c8c6e; font-family: 'Helvetica Neue', sans-serif; display: block; margin-bottom: 2rem;">Contact</span>
    <div style="margin-bottom: 2rem;">
      <label style="font-size: 0.75rem; color: #9e958a; font-family: 'Helvetica Neue', sans-serif; display: block; margin-bottom: 0.5rem;">Name</label>
      <input type="text" style="width: 100%; border: none; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0.5rem 0; font-size: 1rem; color: #3a3a3a; background: transparent; outline: none; font-family: 'Helvetica Neue', sans-serif; box-sizing: border-box;" />
    </div>
    <div style="margin-bottom: 2rem;">
      <label style="font-size: 0.75rem; color: #9e958a; font-family: 'Helvetica Neue', sans-serif; display: block; margin-bottom: 0.5rem;">Message</label>
      <textarea style="width: 100%; border: none; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0.5rem 0; font-size: 1rem; color: #3a3a3a; background: transparent; outline: none; font-family: 'Helvetica Neue', sans-serif; resize: none; height: 4rem; box-sizing: border-box;"></textarea>
    </div>
    <button style="background: none; border: 1px solid #3a3a3a; color: #3a3a3a; padding: 0.75rem 2.5rem; font-size: 0.8125rem; font-family: 'Helvetica Neue', sans-serif; cursor: pointer; letter-spacing: 0.03em; border-radius: 2px;">Send</button>
  </div>
</div>

Section divider with navigation

Selected works

Recent projects

View all
View code
<div style="padding: 3rem 3rem 2rem; background: #faf8f5;">
  <div style="max-width: 36rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.06);">
      <div>
        <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #7c8c6e; font-family: 'Helvetica Neue', sans-serif; display: block; margin-bottom: 1rem;">Selected works</span>
        <h2 style="font-family: 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 1.5rem; color: #3a3a3a; margin: 0;">Recent projects</h2>
      </div>
      <a href="#" style="font-size: 0.8125rem; color: #6b6560; text-decoration: none; font-family: 'Helvetica Neue', sans-serif; border-bottom: 1px solid #6b6560; padding-bottom: 2px;">View all</a>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a Japanese zen minimalist style โ€” the digital expression of wabi-sabi, the beauty of imperfection and impermanence. Asymmetric balance, muted earth tones, vast negative space, and components that feel like they were placed with the deliberation of a stone in a rock garden. Not empty โ€” intentionally sparse.

VISUAL RULES:
- Background: Warm off-white with a slight warmth. #faf8f5 (warm paper) or #f5f2ed (parchment). Subtle texture implied through color, not actual patterns. Never pure white.
- Accent: Muted sage green (#7c8c6e) as primary accent. Deep charcoal (#3a3a3a) for anchoring elements. Muted clay (#b8a088) for warm tertiary. Indigo (#3d4f6e) as occasional deep accent.
- Text: Charcoal (#3a3a3a) for headings. Warm gray (#6b6560) for body. Soft (#9e958a) for secondary. Never pure black โ€” always with warmth.
- Typography: Clean sans-serif with generous letter-spacing for labels. `font-family: 'Noto Sans', 'Helvetica Neue', sans-serif`. Headings: light weight (300-400), large size, tracking-wide. Body: regular weight, leading-relaxed (1.8).
- Spacing: Extremely generous. This is the defining trait. py-24 between sections. p-8 to p-12 in cards. gap-8 in grids. Let emptiness speak louder than content.
- Borders: Nearly invisible. `border: 1px solid rgba(0,0,0,0.06)`. Or no borders at all โ€” use spacing alone to define regions.
- Border radius: Minimal. 2-4px at most. Slightly softened corners, not rounded. The geometry of natural stone โ€” almost straight, not quite.
- Decorative: Thin horizontal rules as section breaks. A single vertical line as accent. Subtle dot (ยท) as separator. No ornament for ornament's sake.

SPECIFIC PATTERNS:
- Cards: Borderless or ultra-subtle border. bg transparent or barely off-white. Defined by spacing alone. Title in light weight, large. Body in warm gray, relaxed leading.
- Buttons: Minimal. Charcoal text, no border, no bg. Underline on hover (text-decoration). Or: thin 1px charcoal border, lots of horizontal padding (px-8), tall (py-3). Never filled.
- Inputs: Bottom border only. `border-bottom: 1px solid rgba(0,0,0,0.12)`. No other borders. No background. Focus: border-bottom darkens. Minimal.
- Section transitions: A single thin line, or extra whitespace (py-20+), or a small dot centered between sections.
- Labels: Uppercase, letter-spacing: 0.15em, text-xs, sage green or soft gray. Above headings, with generous margin below.
- Lists: No bullets. Items separated by thin rules or generous spacing. Clean, vertical rhythm.

ANTI-PATTERNS:
- No bold, saturated colors. Everything is muted, earthen, quiet.
- No filled buttons. No gradient anything. No shadows except maybe shadow-xs.
- No tight spacing. Cramped layouts betray the entire aesthetic.
- No icons, emoji, or illustrations. If visuals are needed, think single-line ink drawings.
- No rounded-full or rounded-xl. Geometric restraint only.
- No uppercase headings. Headings are sentence case, light weight.
- No dark mode. This aesthetic requires light, natural backgrounds.

Related prompts