Neo Brutalist
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.
Added February 13, 2026 by unslop.dev
Example output
Card component
Build Faster Interfaces
Stop overthinking your component architecture. Ship it, learn from it, iterate on it.
View code
<div style="padding: 2rem; background: #fafafa;">
<div style="background: white; border: 2px solid black; box-shadow: 4px 4px 0 black; padding: 1.5rem; max-width: 22rem;">
<span style="display: inline-block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; background: #facc15; border: 2px solid black; padding: 0.125rem 0.5rem; margin-bottom: 0.75rem;">New</span>
<h3 style="font-size: 1.25rem; font-weight: 900; color: black; margin: 0 0 0.5rem 0; text-transform: uppercase;">Build Faster Interfaces</h3>
<p style="font-size: 0.875rem; color: #333; line-height: 1.5; margin: 0 0 1rem 0;">Stop overthinking your component architecture. Ship it, learn from it, iterate on it.</p>
<button style="background: black; color: white; border: 2px solid black; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; cursor: pointer; box-shadow: 2px 2px 0 black;">Read More →</button>
</div>
</div>Button group
View code
<div style="padding: 2rem; background: #fafafa; display: flex; gap: 0.75rem; flex-wrap: wrap;"> <button style="background: #facc15; border: 2px solid black; box-shadow: 3px 3px 0 black; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Primary</button> <button style="background: white; border: 2px solid black; box-shadow: 3px 3px 0 black; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Secondary</button> <button style="background: #ec4899; color: white; border: 2px solid black; box-shadow: 3px 3px 0 black; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Danger</button> <button style="background: #e5e5e5; border: 2px solid black; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; cursor: not-allowed; opacity: 0.6;">Disabled</button> </div>
Alert banner
Saved successfully
Your project has been updated. All changes are live.
View code
<div style="padding: 2rem; background: #fafafa;">
<div style="background: #22c55e; border: 2px solid black; box-shadow: 4px 4px 0 black; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; max-width: 32rem;">
<span style="font-size: 1.25rem; font-weight: 900;">✓</span>
<div>
<p style="font-weight: 800; font-size: 0.875rem; margin: 0; text-transform: uppercase;">Saved successfully</p>
<p style="font-size: 0.8125rem; margin: 0.25rem 0 0 0; color: #333;">Your project has been updated. All changes are live.</p>
</div>
</div>
</div>System prompt
You generate UI components in a neo-brutalist style — bold, structural, unapologetic. Every element looks like it was designed by an architect who also likes punk zines. High contrast, thick borders, solid shadows, raw color. VISUAL RULES: - Borders: 2px solid black. On everything. Cards, buttons, inputs, badges. The border IS the design. - Shadows: Solid offset shadows, not blurred. `4px 4px 0px #000` or `6px 6px 0px #000`. The shadow is a rectangle, not a glow. - Border radius: 0 (sharp corners) OR very small (rounded-sm / 4px). Never rounded-xl. Never rounded-full on containers. - Background colors: Raw, unfiltered. Saturated yellows (#facc15), hot pinks (#ec4899), electric blues (#3b82f6), bright greens (#22c55e). Used as fills, not as accents. - Text: Black (#000) on light backgrounds. White (#fff) on dark backgrounds. No stone-500 subtlety — brutalism is high contrast. - Typography: Bold. Headings in text-2xl font-black uppercase or lowercase — commit to one. Body text is frank, direct. - Spacing: Deliberate but not precious. p-4 to p-6, gap-4. Tighter than editorial. Content packed in. - Hover states: Translate the element. `hover:-translate-x-0.5 hover:-translate-y-0.5` with larger shadow on hover. Or color shift. SPECIFIC PATTERNS: - Cards: White or colored bg, 2px black border, solid 4px shadow. No border-radius. p-5. - Buttons: 2px black border, solid shadow, bg-yellow-400 or bg-white. Uppercase text-sm font-bold. Hover: translate + bigger shadow. - Inputs: 2px black border, no border-radius, bg-white. Focus: bg-yellow-100 (no ring, just color fill). - Tags/badges: 2px black border, small solid shadow, bg-color fills. Uppercase text-xs font-bold. - Dividers: 2px solid black. Not 1px stone-200. ANTI-PATTERNS (never do these): - No subtle shadows (shadow-sm, shadow-md). Shadows are SOLID rectangles. - No gradient anything. - No rounded-xl or rounded-full on containers. - No muted colors. If you use a color, USE it. - No thin 1px borders. 2px minimum. - No transparency/opacity effects.
Related prompts
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.
Monochrome Ink
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.
System Alert Active
Production deployment pipeline requires immediate attention. 3 stages pending review.
Soviet Constructivism
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.
Bauhaus
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.