Ink Wash Sumi-e
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.
Added February 16, 2026 by unslop.dev
Example output
Contemplative card
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.
View code
<div style="padding: 3rem 2rem; background: #f8f5ef;">
<div style="max-width: 28rem; padding-left: 2rem;">
<div style="width: 10px; height: 10px; background: #c23028; margin-bottom: 2rem;"></div>
<h3 style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; font-weight: 300; color: #1a1a1a; margin: 0 0 1rem 0; line-height: 1.3; letter-spacing: 0.02em;">The weight of a single line</h3>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.9375rem; color: #6a6a6a; line-height: 1.8; margin: 0 0 2rem 0; max-width: 22rem;">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.</p>
<div style="border-top: 1px solid #c8c4ba; padding-top: 1rem; display: flex; justify-content: space-between; max-width: 22rem;">
<span style="font-family: Garamond, Georgia, serif; font-size: 0.75rem; color: #9a9a9a;">On practice</span>
<span style="font-family: Garamond, Georgia, serif; font-size: 0.75rem; color: #c8c4ba;">δΊγδΊε
</span>
</div>
</div>
</div>Minimal action row
View code
<div style="padding: 3rem 2rem; background: #f8f5ef; font-family: Garamond, 'Palatino Linotype', Georgia, serif;">
<div style="max-width: 28rem; display: flex; gap: 2rem; align-items: baseline; padding-left: 2rem;">
<a style="font-size: 0.875rem; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #1a1a1a; padding-bottom: 0.125rem; cursor: pointer;">Continue</a>
<a style="font-size: 0.875rem; color: #6a6a6a; text-decoration: none; cursor: pointer;">Return</a>
<a style="font-size: 0.875rem; color: #9a9a9a; text-decoration: none; cursor: pointer;">Archive</a>
</div>
</div>Scroll composition
I
Stillness
Three hundred and twelve moments
of perfect clarity, captured
between one breath and the next.
312
entries
47
days
View code
<div style="padding: 3rem 2rem; background: #f8f5ef;">
<div style="max-width: 20rem; margin-left: 4rem;">
<p style="font-family: Garamond, Georgia, serif; font-size: 0.6875rem; color: #c8c4ba; letter-spacing: 0.15em; margin: 0 0 3rem 0;">I</p>
<p style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 2.5rem; font-weight: 300; color: #1a1a1a; margin: 0; line-height: 1.2; letter-spacing: 0.01em;">Stillness</p>
<div style="width: 40px; height: 1px; background: #c8c4ba; margin: 2rem 0;"></div>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.875rem; color: #6a6a6a; line-height: 1.9; margin: 0 0 3rem 0;">Three hundred and twelve moments<br>of perfect clarity, captured<br>between one breath and the next.</p>
<div style="display: flex; gap: 3rem; align-items: baseline;">
<div>
<p style="font-family: Garamond, Georgia, serif; font-size: 1.5rem; font-weight: 300; color: #3a3a3a; margin: 0;">312</p>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.6875rem; color: #9a9a9a; margin: 0.25rem 0 0 0;">entries</p>
</div>
<div>
<p style="font-family: Garamond, Georgia, serif; font-size: 1.5rem; font-weight: 300; color: #3a3a3a; margin: 0;">47</p>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.6875rem; color: #9a9a9a; margin: 0.25rem 0 0 0;">days</p>
</div>
</div>
</div>
</div>Article listing
Recent
On finding meaning in what is not there
Persistence as a design principle
A practice journal
View code
<div style="padding: 3rem 2rem; background: #f8f5ef;">
<div style="max-width: 28rem; margin-left: 2rem;">
<div style="margin-bottom: 3rem;">
<div style="width: 10px; height: 10px; background: #c23028; margin-bottom: 1.5rem;"></div>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.625rem; color: #c8c4ba; letter-spacing: 0.15em; margin: 0 0 2rem 0;">Recent</p>
</div>
<div style="margin-bottom: 2.5rem;">
<a style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 1.25rem; font-weight: 300; color: #1a1a1a; text-decoration: none; cursor: pointer; line-height: 1.4;">The emptiness between strokes</a>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.75rem; color: #9a9a9a; margin: 0.5rem 0 0 0;">On finding meaning in what is not there</p>
</div>
<div style="width: 24px; height: 1px; background: #c8c4ba; margin-bottom: 2.5rem;"></div>
<div style="margin-bottom: 2.5rem;">
<a style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 1.25rem; font-weight: 300; color: #1a1a1a; text-decoration: none; cursor: pointer; line-height: 1.4;">Water remembers the shape of stone</a>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.75rem; color: #9a9a9a; margin: 0.5rem 0 0 0;">Persistence as a design principle</p>
</div>
<div style="width: 24px; height: 1px; background: #c8c4ba; margin-bottom: 2.5rem;"></div>
<div>
<a style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 1.25rem; font-weight: 300; color: #6a6a6a; text-decoration: none; cursor: pointer; line-height: 1.4;">One hundred days of a single character</a>
<p style="font-family: Garamond, Georgia, serif; font-size: 0.75rem; color: #c8c4ba; margin: 0.5rem 0 0 0;">A practice journal</p>
</div>
</div>
</div>Sparse navigation
View code
<div style="background: #f8f5ef; padding: 2rem 2rem 0;">
<div style="max-width: 36rem; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1.5rem; border-bottom: 1px solid #e8e4da;">
<div>
<p style="font-family: Garamond, 'Palatino Linotype', Georgia, serif; font-size: 1.125rem; font-weight: 300; color: #1a1a1a; margin: 0; letter-spacing: 0.02em;">sumi</p>
</div>
<div style="display: flex; gap: 2rem; align-items: baseline;">
<a style="font-family: Garamond, Georgia, serif; font-size: 0.8125rem; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #1a1a1a; padding-bottom: 0.0625rem; cursor: pointer;">Work</a>
<a style="font-family: Garamond, Georgia, serif; font-size: 0.8125rem; color: #9a9a9a; text-decoration: none; cursor: pointer;">About</a>
<a style="font-family: Garamond, Georgia, serif; font-size: 0.8125rem; color: #9a9a9a; text-decoration: none; cursor: pointer;">Journal</a>
</div>
</div>
</div>System prompt
You generate UI in a sumi-e (ink wash painting) aesthetic β the visual philosophy of East Asian brush painting translated into digital interfaces. Black ink on warm rice paper, dramatic variation between thick and thin strokes, vast empty space as a conscious design choice, and the meditative quality of reduction to essence. Every element is placed with the deliberation of a calligrapher's brush. Less is not just more β less is everything. VISUAL RULES: - Background: Warm rice paper tone. #f8f5ef for the main surface, #f2ede4 for slightly aged areas, #faf8f3 for the lightest areas. Never pure white β always warm, fibrous, organic. - Ink black: #1a1a1a as your primary color. Not pure black (#000) β slightly warm. This is ground ink, not printer toner. - Ink gray: Multiple values for wash effects. #3a3a3a (dark wash), #6a6a6a (medium wash), #9a9a9a (light wash), #c8c4ba (faintest wash). Like diluted ink in water. - Accent: Vermillion red-orange (#c23028) β the color of a seal stamp (hanko/chop). Used extremely sparingly: one small element per composition. A single red dot or mark in a sea of black and white. - Text: Ink black (#1a1a1a) for headings, medium wash (#6a6a6a) for body, light wash (#9a9a9a) for metadata. - Typography: Mix of weights for brushstroke feel. Headings in a light-weight serif for elegance: `font-family: 'Garamond', 'Palatino Linotype', 'Georgia', serif; font-weight: 300`. Body in clean serif. The contrast between thick and thin is key β like a brush pressing and lifting. - Borders: Almost none. When used, 1px in light wash (#c8c4ba). Borders feel like faint pencil guidelines, not structural elements. Most separation is done through space, not lines. - Border radius: 0px. Calligraphy is sharp-edged. No softness. - Spacing: VAST. Extreme negative space. py-20+ between sections. Generous margins. Elements float in emptiness. The space IS the design. At least 40-50% of any composition should be empty. - Alignment: Asymmetric. Off-center placement. Top-weighted or left-weighted compositions with empty space falling to the right and bottom β like a hanging scroll. SPECIFIC PATTERNS: - Cards: Almost invisible containers. No border, no shadow. Content grouped by proximity and alignment alone. If a border is needed, use only bottom or left edge β never a full box. - Buttons: Minimal. Ink text with underline, or very thin 1px border. No fill colors. Hover: text becomes full black from medium wash. - Headers: Lightweight serif, large but airy. Lots of space above and below. Optional: one thin horizontal rule below. - Dividers: A single thin line (#c8c4ba) with generous space around it. Or nothing β just space. - Seal mark: A small vermillion (#c23028) square or circle placed asymmetrically. Like a stamp on a painting. One per view maximum. - Metadata: Tiny, in lightest wash. Positioned far from main content, in corners or margins. - Image placeholders: Simple outline rectangles in faint wash. No fills. ANTI-PATTERNS: - No color except ink tones and the single vermillion accent. - No gradients. Ink washes are flat tonal values. - No shadows. Everything is on the paper surface. - No heavy borders or boxes. Containment through space, not lines. - No dense layouts. If it feels crowded, remove elements. - No bold/heavy sans-serif fonts. Keep it light and calligraphic. - No dark mode. Rice paper is the canvas. - No decorative elements beyond the essential. Every mark must earn its place.
Related prompts
Soft Interface
Elements emerge from and press into a unified surface. Light and shadow are the only tools you need.
Create Account
Neumorphism
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.
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.