Brutalistsystem

Brutalist Mono

76
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

monospacetext onlyindentationasciipure type

Added February 16, 2026 by unslop.dev

Example output

Content block

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 →]
View code
<div style="padding: 1rem; background: #fff; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.7; color: #111;">
  <div style="max-width: 36rem;">
    <div>HOME / WRITING / ESSAYS</div>
    <br>
    <div>ON THE VIRTUE OF CONSTRAINT</div>
    <div>=============================</div>
    <br>
    <div>Published: 2026-02-16</div>
    <div>Author: unslop.dev</div>
    <div>Tags: [DESIGN] [TYPOGRAPHY] [MINIMALISM]</div>
    <br>
    <div>When you strip away color, imagery, and typographic</div>
    <div>hierarchy, what remains is the thought itself. Every</div>
    <div>word must earn its place. Every line break is a</div>
    <div>conscious decision about rhythm and meaning.</div>
    <br>
    <div>The monospaced grid becomes a canvas where alignment</div>
    <div>IS the design. Indentation IS the hierarchy. And the</div>
    <div>reader focuses entirely on what you have to say.</div>
    <br>
    <div>---</div>
    <br>
    <div style="display: flex; gap: 1.5rem;">
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[← PREVIOUS]</span>
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[NEXT →]</span>
    </div>
  </div>
</div>

Data listing

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]
View code
<div style="padding: 1rem; background: #fff; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.7; color: #111;">
  <div style="max-width: 40rem;">
    <div>ACTIVE PROJECTS</div>
    <div>===============</div>
    <br>
    <div>  01. unslop.dev .............. [ACTIVE] 48 prompts</div>
    <div>  02. ink-engine .............. [ACTIVE] v2.3.1</div>
    <div>  03. mono-cms ................ [PAUSED] needs review</div>
    <div>  04. type-grinder ............ [ACTIVE] 12 commits/wk</div>
    <div>  05. raw-feed ................ [ARCHIVED] read-only</div>
    <br>
    <div>---</div>
    <div>total: 5 | active: 3 | paused: 1 | archived: 1</div>
    <br>
    <div style="display: flex; gap: 1rem;">
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[NEW PROJECT]</span>
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[EXPORT]</span>
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[FILTER]</span>
    </div>
  </div>
</div>

Form input

NEW ENTRY
---------

TITLE

CATEGORY

BODY

---
[SUBMIT] [PREVIEW] [CANCEL]
View code
<div style="padding: 1rem; background: #fff; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; line-height: 1.7; color: #111;">
  <div style="max-width: 28rem;">
    <div>NEW ENTRY</div>
    <div>---------</div>
    <br>
    <div>
      <div>TITLE</div>
      <input type="text" placeholder="Enter title" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 0; padding: 0.25rem 0.375rem; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; outline: none; margin-top: 0.125rem;" />
    </div>
    <br>
    <div>
      <div>CATEGORY</div>
      <input type="text" placeholder="[DESIGN] [CODE] [WRITING]" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 0; padding: 0.25rem 0.375rem; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; outline: none; margin-top: 0.125rem;" />
    </div>
    <br>
    <div>
      <div>BODY</div>
      <textarea rows="4" placeholder="Write here..." style="width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 0; padding: 0.25rem 0.375rem; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; outline: none; resize: vertical; margin-top: 0.125rem;"></textarea>
    </div>
    <br>
    <div>---</div>
    <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[SUBMIT]</span>
      <span style="color: #0000ee; text-decoration: underline; cursor: pointer;">[PREVIEW]</span>
      <span style="color: #111; cursor: pointer;">[CANCEL]</span>
    </div>
  </div>
</div>

Navigation header

MONO.SYSTEMS
View code
<div style="padding: 0.5rem 1rem; background: #fff; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; color: #111; border-bottom: 1px solid #ddd;">
  <div style="max-width: 48rem; display: flex; justify-content: space-between; align-items: center;">
    <span>MONO.SYSTEMS</span>
    <div style="display: flex; gap: 0;">
      <a style="color: #0000ee; text-decoration: underline; cursor: pointer;">HOME</a>
      <span style="color: #999;"> / </span>
      <a style="color: #0000ee; text-decoration: underline; cursor: pointer;">PROJECTS</a>
      <span style="color: #999;"> / </span>
      <a style="color: #0000ee; text-decoration: underline; cursor: pointer;">ABOUT</a>
      <span style="color: #999;"> / </span>
      <a style="color: #551a8b; text-decoration: underline; cursor: pointer;">LOG IN</a>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a brutalist monospace style — an extreme typographic discipline where a single monospaced font does ALL the work. No icons, no color fills, no imagery. Hierarchy comes from indentation, brackets, ALL CAPS, and whitespace. Like reading well-formatted source code, or the output of a beautifully written CLI tool. Pure information, zero decoration.

VISUAL RULES:
- One font: `font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace`. Every single element uses this font. No exceptions.
- One size range: 12-14px for everything. NO size variation for hierarchy. A heading is the same size as body text. You create hierarchy through CAPS, indentation, and spacing.
- Color: Black (#111) on white (#fff). Links in blue (#0000ee) with underline. Visited in purple (#551a8b). Nothing else. Classic web.
- Background: White (#ffffff). No surface variations, no gray panels, no colored sections.
- Spacing: Line-height 1.6-1.8. Paragraphs separated by blank lines. Sections separated by horizontal rules (a row of dashes: ————————————).
- Hierarchy: UPPERCASE for headings. [BRACKETS] for labels/categories. Indentation (2-4 spaces) for nested content. --- for dividers. * for bullets.
- Borders: 1px solid #ddd where needed. Tables get full cell borders. Nothing thick.
- Border radius: 0px. Everything is sharp.
- Alignment: Left-aligned everything. Never centered. Code is left-aligned.
- Interactive elements: Underlined text for links. [BUTTON] text in brackets for actions. Focus states use outline only.

SPECIFIC PATTERNS:
- Cards: No visual card. Just a block of text preceded by a --- divider and a [SECTION] label.
- Buttons: Not really buttons. Text wrapped in [BRACKETS] with underline/pointer. e.g. `[SUBMIT]` `[CANCEL]` `[→ NEXT]`
- Headings: Same size as body, but UPPERCASE. Preceded by an empty line and optionally followed by a line of = or - characters.
- Lists: Prefix with `*` or `-` or numbered `01.` `02.` with consistent indentation.
- Tables: Monospaced text tables with | and - characters for borders.
- Forms: Label on one line, input below it, both same font/size. Simple underline or thin border for input.
- Navigation: Horizontal list of text links separated by ` / ` or ` | `.

ANTI-PATTERNS:
- No icons of any kind. Not even Unicode symbols beyond basic ASCII.
- No font-size variation. Everything is the same size.
- No bold (except UPPERCASE for emphasis). No italic.
- No colors besides black, white, blue links, and purple visited.
- No images, illustrations, or decorative elements.
- No rounded corners. No shadows. No gradients.
- No padding larger than 1rem. Keep it tight.

Related prompts

Meister

josef albers

Preliminary course instructor. Color theory. Interaction of color as perception.

Brutalist

Bauhaus

🔥87system

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.

Composition

Balance through asymmetry. Harmony through primary contrast. The grid is the universal language.

1917
Brutalist

De Stijl / Mondrian

🔥85system

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.

BASEMENT SHOW

fri march 14 / doors @ 9pm / $5

DEAD CHANNELS

STATIC RITUAL

RUST PROPHET

247 industrial blvd, unit B
all ages / BYOB / no cops
########################################

Brutalist

Grunge / Distressed

🔥81system

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.