Japanese Zen
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.
Added February 9, 2026 by unslop.dev
Example output
Content card
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.
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
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
Recent projects
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
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
Case Study
Redesigning the checkout flow
How we reduced cart abandonment by 23% with three small changes to the payment step.
Soft Minimal
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.
The Language of Pattern
Each tile tells a story. In repetition, individual forms become something greater โ a visual rhythm that transforms walls into canvases.
348
Patterns
12
Artisans
5th
Century
Ceramic Tile
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.
Dieter Rams
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.