Minimalsystem

Ink Wash Sumi-e

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

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.

inkcalligraphiczenmonochromebrushstroke

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.

On practice δΊŒγ€‡δΊŒε…­
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

The emptiness between strokes

On finding meaning in what is not there

Water remembers the shape of stone

Persistence as a design principle

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

Copy this into your AI 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