Brutalistsystem
Grunge / Distressed
This prompt produces genuinely distinct output
Generates UI with 90s grunge aesthetics — torn edges, distressed textures, dirty overlays, gritty typography, zine-style layouts, and the raw punk energy of something that was photocopied too many times.
grungedistressed90szinepunk
Added February 16, 2026 by unslop.dev
Example output
Zine-style event flyer
BASEMENT SHOW
fri march 14 / doors @ 9pm / $5
DEAD CHANNELS
STATIC RITUAL
RUST PROPHET
247 industrial blvd, unit B
all ages / BYOB / no cops
########################################
View code
<div style="padding: 2rem; background: #1a1a1a;">
<div style="max-width: 24rem; background: #e8e0d4; border: 3px solid #1a1a1a; padding: 0; transform: rotate(-0.5deg); position: relative;">
<div style="background: #1a1a1a; padding: 0.5rem 1rem; transform: rotate(0.5deg); margin: -2px;">
<p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2rem; color: #e8e0d4; margin: 0; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;">BASEMENT SHOW</p>
</div>
<div style="padding: 1.25rem;">
<p style="font-family: 'Courier New', Courier, monospace; font-size: 0.75rem; color: #3d2b1f; margin: 0 0 0.75rem 0; text-transform: uppercase; letter-spacing: 0.1em;">fri march 14 / doors @ 9pm / $5</p>
<div style="border-top: 2px solid #3d2b1f; border-bottom: 2px solid #3d2b1f; padding: 0.5rem 0; margin-bottom: 0.75rem;">
<p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.125rem; color: #8b2500; margin: 0; text-transform: uppercase;">DEAD CHANNELS</p>
<p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.125rem; color: #1a1a1a; margin: 0; text-transform: uppercase;">STATIC RITUAL</p>
<p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.125rem; color: #4a2040; margin: 0; text-transform: uppercase;">RUST PROPHET</p>
</div>
<p style="font-family: 'Courier New', Courier, monospace; font-size: 0.6875rem; color: #5c5c3d; margin: 0; line-height: 1.6;">247 industrial blvd, unit B<br>all ages / BYOB / no cops<br>########################################</p>
</div>
</div>
</div>Distressed button set
View code
<div style="padding: 2rem; background: #e8e0d4; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"> <button style="background: #1a1a1a; color: #e8e0d4; border: 2px solid #1a1a1a; padding: 0.5rem 1.5rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transform: rotate(-1deg);">SUBMIT</button> <button style="background: #8b2500; color: #e8e0d4; border: 2px solid #3d2b1f; padding: 0.5rem 1.5rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transform: rotate(0.5deg);">DESTROY</button> <button style="background: transparent; color: #3d2b1f; border: 2px solid #3d2b1f; padding: 0.5rem 1.5rem; font-family: 'Courier New', monospace; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;">[CANCEL]</button> <button style="background: transparent; color: #999; border: 2px dashed #999; padding: 0.5rem 1.5rem; font-family: 'Courier New', monospace; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: not-allowed; text-decoration: line-through;">NOTHING</button> </div>
Classified listing
---------- classifieds ----------
FOR SALE: Fender Jaguar '66 reissue. Sunburst. Some wear. Plays like a dream. $800 OBO. Serious only.
call mike — 555-0147 — leave msg
WANTED: Drummer for noise rock project. Must own kit. Influences: Lightning Bolt, Melt-Banana, Boredoms.
staticritual@riseup.net
SPACE: Practice room available. Soundproofed (mostly). $200/mo split 3 ways. Near the rail yard.
txt: 555-0239
View code
<div style="padding: 2rem; background: #e8e0d4;">
<div style="max-width: 28rem; font-family: 'Courier New', Courier, monospace;">
<p style="font-size: 0.625rem; color: #5c5c3d; margin: 0 0 0.5rem 0; letter-spacing: 0.15em; text-transform: uppercase;">---------- classifieds ----------</p>
<div style="border-bottom: 1px dashed #3d2b1f; padding-bottom: 0.75rem; margin-bottom: 0.75rem;">
<p style="font-size: 0.8125rem; color: #1a1a1a; margin: 0; line-height: 1.5;"><span style="font-family: Impact, sans-serif; font-size: 0.875rem; color: #8b2500;">FOR SALE:</span> Fender Jaguar '66 reissue. Sunburst. Some wear. Plays like a dream. $800 OBO. Serious only.</p>
<p style="font-size: 0.6875rem; color: #5c5c3d; margin: 0.25rem 0 0 0;">call mike — 555-0147 — leave msg</p>
</div>
<div style="border-bottom: 1px dashed #3d2b1f; padding-bottom: 0.75rem; margin-bottom: 0.75rem;">
<p style="font-size: 0.8125rem; color: #1a1a1a; margin: 0; line-height: 1.5;"><span style="font-family: Impact, sans-serif; font-size: 0.875rem; color: #4a2040;">WANTED:</span> Drummer for noise rock project. Must own kit. Influences: Lightning Bolt, Melt-Banana, Boredoms.</p>
<p style="font-size: 0.6875rem; color: #5c5c3d; margin: 0.25rem 0 0 0;">staticritual@riseup.net</p>
</div>
<div>
<p style="font-size: 0.8125rem; color: #1a1a1a; margin: 0; line-height: 1.5;"><span style="font-family: Impact, sans-serif; font-size: 0.875rem; color: #c4960c;">SPACE:</span> Practice room available. Soundproofed (mostly). $200/mo split 3 ways. Near the rail yard.</p>
<p style="font-size: 0.6875rem; color: #5c5c3d; margin: 0.25rem 0 0 0;">txt: 555-0239</p>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in the grunge/distressed aesthetic — the raw visual language of 90s alternative culture, punk zines, and DIY design. Dirty textures, torn-paper effects, typewriter fonts mixed with hand-scrawled type, off-kilter layouts, and the intentional imperfection of something that's been photocopied, crumpled, stapled, and wheat-pasted on a wall. Anti-polish is the polish. VISUAL RULES: - Color palette: Dirty and muted. Off-white/newsprint (#e8e0d4), raw umber (#3d2b1f), faded black (#1a1a1a), dried blood red (#8b2500), mustard (#c4960c), dirty olive (#5c5c3d), bruised purple (#4a2040). - Background: Stained newsprint (#e8e0d4) or dark grunge (#1a1a1a). Feels worn, used, marked up. Use subtle CSS noise textures via repeating-linear-gradient patterns. - Text: Raw black (#1a1a1a) on light backgrounds. Dirty cream (#e8e0d4) on dark. Text should feel like it's been stamped, not typeset. - Typography: Mix of typewriter and heavy display. `font-family: 'Courier New', 'Courier', monospace` for body — the typewriter feel. `font-family: 'Impact', 'Arial Black', sans-serif` for loud headings. Mixing fonts deliberately — different weights, sizes, even orientations. - Borders: Rough, uneven-feeling. 2-3px solid with dark colors. Some elements get no border — they bleed into the background. - Border radius: 0px for most things. Very occasionally a rough circle. Nothing smooth. Nothing polished. - Spacing: Deliberately uneven. Some elements crowd together, others have vast empty space. Asymmetric margins. Off-grid placement. - Texture: CSS-generated noise using tiny repeating-linear-gradients. Stipple effects. Hatching lines as backgrounds. - Effects: Elements at slight angles (transform: rotate(-1deg to 2deg)). Mixed text sizes in same line. CAPS mixed with lowercase. SPECIFIC PATTERNS: - Cards: Off-white or brown, rough borders, slightly rotated. Content looks taped or stapled on. - Buttons: Rectangular, dark fill, ALL CAPS text, slightly rotated. Hover: color inversion. Raw and unpolished. - Headers: Huge, Impact-style, sometimes ALL CAPS, sometimes mixed. Overlapping other elements. Text as texture. - Lists: Typed bullet points (- or *), monospace, uneven indentation. Zine listing energy. - Dividers: Rough horizontal rules. Or: a row of typed characters (-------- or xxxxxxxx or ########). - Labels: Typewriter style, small, uppercase. Look like they've been stamped on. - Images areas: Represented as high-contrast blocks with rough edges. ANTI-PATTERNS: - No clean, aligned layouts. Imperfection is intentional. - No smooth gradients or subtle shadows. Grit, not polish. - No rounded corners. Raw edges only. - No bright, saturated colors. Everything is muted and dirty. - No clean sans-serif typography. Typewriter or display only. - No whitespace-forward minimalism. Fill the space or leave it deliberately rough.
Related prompts
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.
HOME / WRITING / ESSAYS
ON THE VIRTUE OF CONSTRAINT
=============================
Published: 2026-02-16
Author: unslop.dev
Tags: [DESIGN] [TYPOGRAPHY] [MINIMALISM]
When you strip away color, imagery, and typographic
hierarchy, what remains is the thought itself. Every
word must earn its place. Every line break is a
conscious decision about rhythm and meaning.
The monospaced grid becomes a canvas where alignment
IS the design. Indentation IS the hierarchy. And the
reader focuses entirely on what you have to say.
---
[← PREVIOUS]
[NEXT →]
ACTIVE PROJECTS
===============
01. unslop.dev .............. [ACTIVE] 48 prompts
02. ink-engine .............. [ACTIVE] v2.3.1
03. mono-cms ................ [PAUSED] needs review
04. type-grinder ............ [ACTIVE] 12 commits/wk
05. raw-feed ................ [ARCHIVED] read-only
---
total: 5 | active: 3 | paused: 1 | archived: 1
[NEW PROJECT]
[EXPORT]
[FILTER]
Brutalist
Brutalist Mono
system
Generates UI with obsessive monospaced precision — single font, single weight, single size. Hierarchy through indentation, brackets, and whitespace alone. The purest form of typographic brutalism.
Composition
Balance through asymmetry. Harmony through primary contrast. The grid is the universal language.
1917
Brutalist
De Stijl / Mondrian
system
Generates UI based on the De Stijl art movement — primary colors only (red, blue, yellow), thick black grid lines, asymmetric rectangular composition, and the radical geometry of Piet Mondrian's paintings as a layout system.