Brutalistsystem
Monochrome Ink
This prompt produces genuinely distinct output
Generates UI in pure black and white — no gray, no color, no compromise. Ink-weight borders, woodcut-inspired contrast, and the stark beauty of a letterpress print. Maximum impact, zero chromatic noise.
black whitehigh contrastprint inspiredborders
Added February 7, 2026 by unslop.dev
Example output
Article card with inverted header
Essay No. 14
The Tyranny of Color in Digital Design
We have confused chromatic variety with visual richness. The most powerful interfaces use the fewest colors. Here is the case for none at all.
R. Müller
2026.02.07
View code
<div style="padding: 2rem; background: white;">
<div style="border: 2px solid black; max-width: 22rem;">
<div style="background: black; padding: 0.625rem 1rem;">
<span style="color: white; font-family: 'Courier New', monospace; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;">Essay No. 14</span>
</div>
<div style="padding: 1.25rem;">
<h3 style="font-family: 'Helvetica', sans-serif; font-size: 1.25rem; font-weight: 900; color: black; margin: 0 0 0.75rem 0; line-height: 1.2;">The Tyranny of Color in Digital Design</h3>
<p style="font-family: 'Helvetica', sans-serif; font-size: 0.875rem; color: black; line-height: 1.6; margin: 0 0 1rem 0;">We have confused chromatic variety with visual richness. The most powerful interfaces use the fewest colors. Here is the case for none at all.</p>
<div style="border-top: 2px solid black; padding-top: 0.75rem; display: flex; justify-content: space-between;">
<span style="font-family: 'Courier New', monospace; font-size: 0.75rem; color: black; font-weight: 700;">R. Müller</span>
<span style="font-family: 'Courier New', monospace; font-size: 0.75rem; color: black;">2026.02.07</span>
</div>
</div>
</div>
</div>Button and badge set
Active
Draft
Archived
View code
<div style="padding: 2rem; background: white; display: flex; flex-direction: column; gap: 1rem;">
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
<button style="background: black; color: white; border: 2px solid black; padding: 0.625rem 1.5rem; font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; cursor: pointer;">Submit</button>
<button style="background: white; color: black; border: 2px solid black; padding: 0.625rem 1.5rem; font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; cursor: pointer;">Cancel</button>
<button style="background: white; color: black; border: 2px solid black; padding: 0.625rem 1.5rem; font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; cursor: not-allowed; border-style: dashed;">Disabled</button>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<span style="background: black; color: white; padding: 0.1875rem 0.625rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;">Active</span>
<span style="background: white; color: black; border: 2px solid black; padding: 0.1875rem 0.625rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;">Draft</span>
<span style="background: white; color: black; border: 2px solid black; padding: 0.1875rem 0.625rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; border-style: dashed;">Archived</span>
</div>
</div>Data list
Project Status
Homepage Redesign
LIVE
Mobile App v2
WIP
Brand Guidelines
PLAN
View code
<div style="padding: 2rem; background: white;">
<div style="max-width: 28rem; border: 2px solid black;">
<div style="background: black; padding: 0.5rem 1rem;">
<span style="color: white; font-family: 'Courier New', monospace; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">Project Status</span>
</div>
<div style="border-bottom: 2px solid black; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; color: black;">Homepage Redesign</span>
<span style="background: black; color: white; padding: 0.125rem 0.5rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700;">LIVE</span>
</div>
<div style="border-bottom: 2px solid black; padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; color: black;">Mobile App v2</span>
<span style="border: 2px solid black; padding: 0.125rem 0.5rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700;">WIP</span>
</div>
<div style="padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica', sans-serif; font-size: 0.875rem; font-weight: 700; color: black;">Brand Guidelines</span>
<span style="border: 2px solid black; border-style: dashed; padding: 0.125rem 0.5rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: 700;">PLAN</span>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a monochrome ink style — absolute black and absolute white, nothing in between. Imagine every interface was printed on a letterpress with a single ink plate. No grays, no colors, no gradients. Just the stark, beautiful contrast of ink on paper. Every element is either filled black or outlined. This is reduction taken to its logical extreme. VISUAL RULES: - Colors: Black (#000000) and white (#ffffff) ONLY. No grays. No #333, no #666, no #999. If something needs to be lighter, use white with a black border. If it needs to be darker, fill it black with white text. - Background: White. Cards/panels: white with black borders, OR black with white text. Binary only. - Borders: 2px solid black. On everything. This is the primary structural element. Borders define space, hierarchy, and relationships. - Typography: `font-family: 'IBM Plex Mono', 'Courier New', monospace` or `font-family: 'IBM Plex Sans', 'Helvetica', sans-serif`. Headings in heavy weight (700-900). Body in regular (400). One font family per component. - Text: Black on white backgrounds. White on black backgrounds. No other combination. - Shadows: None. Shadows require gray. This aesthetic has no gray. - Border radius: 0. Sharp corners everywhere. The crispness of a die-cut edge. - Spacing: Tight and deliberate. p-4 to p-5. Borders create the visual breathing room, not whitespace. - Decorative: Use typographic rules, thick dividers, and solid fills as section markers. Black rectangles, lines, and dots as graphic elements. SPECIFIC PATTERNS: - Cards: White bg, 2px black border, p-5. OR: black bg, white text, 2px black border. Mixed within the same layout for contrast. - Buttons: Black bg, white text, no border-radius. OR: white bg, 2px black border, black text. Hover: invert (black→white, white→black). - Inputs: 2px black border, white bg, no radius. Focus: fill background black, text white (invert). - Tags/badges: Black bg with white text OR white bg with 2px black border. Small, rectangular. - Dividers: 2px solid black full-width. Or 4px for major sections. Double-line dividers with 3px gap for emphasis. - Section headers: Large, heavy-weight text. May use a solid black rectangle behind white text as a label. ANTI-PATTERNS: - Absolutely no color. Not even "very dark blue" or "off-white." Pure #000 and #fff only. - No gray. Not even for disabled states. Use hatching patterns or reduced border thickness instead. - No shadows of any kind. - No gradients. - No rounded corners. - No opacity/transparency effects.
Related prompts
New
Build Faster Interfaces
Stop overthinking your component architecture. Ship it, learn from it, iterate on it.
Brutalist
Neo Brutalist
system
Generates UI with bold 2-3px black borders, solid drop shadows, raw background colors, and visible structure — design that announces itself. No subtlety, maximum clarity.
System Alert Active
Production deployment pipeline requires immediate attention. 3 stages pending review.
Brutalist
Soviet Constructivism
system
Generates UI with bold red-and-black propaganda poster energy — diagonal compositions, geometric shapes, strong typography, and revolutionary graphic design. Rodchenko meets React.
Meister
josef albers
Preliminary course instructor. Color theory. Interaction of color as perception.
Brutalist
Bauhaus
system
Generates UI in the Bauhaus school tradition — primary geometric forms (circle, triangle, square), primary colors mapped to shapes, asymmetric grid compositions, and the fusion of art and industrial function.