Brutalistsystem

Raw HTML 90s

🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI that looks like a 1996 personal homepage — Times New Roman, blue underlined links, gray backgrounds, table-based layouts, visible borders, and the honest charm of the early web.

90s webtimes new romantable layoutnostalgic

Added February 4, 2026 by unslop.dev

Example output

Personal homepage header

Welcome to My Homepage!

Dave's Web Corner

Welcome to my little corner of the World Wide Web! I'm Dave, and I like programming, Star Trek, and my cat Mr. Whiskers.

Quick Links:
About Me | My Projects | Cool Links | Guestbook | Email Me

You are visitor #12,847 · Last updated: Feb 14, 2026 · Best viewed in Netscape Navigator 4.0

View code

<div style="background: #c0c0c0; padding: 0.5rem;">
  <div style="background: white; border: 2px solid #808080; max-width: 32rem; margin: 0 auto; padding: 0;">
    <div style="background: #000080; padding: 0.375rem 0.75rem;">
      <span style="font-family: 'Times New Roman', serif; font-size: 0.875rem; color: white; font-weight: bold;">Welcome to My Homepage!</span>
    </div>
    <div style="padding: 1rem;">
      <h1 style="font-family: 'Comic Sans MS', 'Times New Roman', serif; font-size: 1.5rem; color: #000080; margin: 0 0 0.25rem 0;">Dave's Web Corner</h1>
      <p style="font-family: 'Times New Roman', serif; font-size: 0.9375rem; color: black; margin: 0 0 0.75rem 0;">Welcome to my little corner of the World Wide Web! I'm Dave, and I like programming, Star Trek, and my cat Mr. Whiskers.</p>
      <div style="border-top: 2px solid #808080; border-bottom: 2px solid #fff; margin: 0.75rem 0;"></div>
      <div style="font-family: 'Times New Roman', serif; font-size: 0.875rem;">
        <b>Quick Links:</b><br>
        <a href="#" style="color: #0000ee;">About Me</a> |
        <a href="#" style="color: #0000ee;">My Projects</a> |
        <a href="#" style="color: #0000ee;">Cool Links</a> |
        <a href="#" style="color: #551a8b;">Guestbook</a> |
        <a href="#" style="color: #0000ee;">Email Me</a>
      </div>
      <div style="border-top: 2px solid #808080; border-bottom: 2px solid #fff; margin: 0.75rem 0;"></div>
      <p style="font-family: 'Times New Roman', serif; font-size: 0.75rem; color: #808080;">You are visitor #12,847 · Last updated: Feb 14, 2026 · Best viewed in Netscape Navigator 4.0</p>
    </div>
  </div>
</div>

90s form with system buttons

Sign Guestbook

Your Name:

Your Message:

View code

<div style="background: #c0c0c0; padding: 1rem;">
  <div style="background: #c0c0c0; border: 2px solid #808080; max-width: 24rem; padding: 0;">
    <div style="background: #000080; padding: 0.25rem 0.5rem; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Tahoma', 'Arial', sans-serif; font-size: 0.75rem; color: white; font-weight: bold;">Sign Guestbook</span>
      <button style="background: #c0c0c0; border: 2px outset #ddd; font-size: 0.6875rem; padding: 0 0.375rem; cursor: pointer; font-family: sans-serif; font-weight: bold;">✕</button>
    </div>
    <div style="padding: 1rem;">
      <div style="margin-bottom: 0.75rem;">
        <label style="font-family: 'Times New Roman', serif; font-size: 0.875rem; color: black; display: block; margin-bottom: 0.25rem;">Your Name:</label>
        <input type="text" value="Anonymous" style="font-family: 'Times New Roman', serif; font-size: 0.875rem; border: 2px inset #999; background: white; padding: 0.25rem 0.375rem; width: 100%; box-sizing: border-box;" />
      </div>
      <div style="margin-bottom: 0.75rem;">
        <label style="font-family: 'Times New Roman', serif; font-size: 0.875rem; color: black; display: block; margin-bottom: 0.25rem;">Your Message:</label>
        <textarea style="font-family: 'Times New Roman', serif; font-size: 0.875rem; border: 2px inset #999; background: white; padding: 0.25rem 0.375rem; width: 100%; height: 4rem; box-sizing: border-box; resize: none;"></textarea>
      </div>
      <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
        <button style="background: #c0c0c0; border: 2px outset #ddd; padding: 0.375rem 1.25rem; font-family: 'Times New Roman', serif; font-size: 0.875rem; cursor: pointer;">Submit</button>
        <button style="background: #c0c0c0; border: 2px outset #ddd; padding: 0.375rem 1.25rem; font-family: 'Times New Roman', serif; font-size: 0.875rem; cursor: pointer;">Cancel</button>
      </div>
    </div>
  </div>
</div>

Link directory table

🔗 Cool Links

Site	Description	Rating
The JavaScript Source	Free JavaScript code and tutorials	★★★★★
HotWired	Web design news and culture	★★★★
WebMonkey	How-to guides for web builders	★★★★★

Know a cool site? Email me and I'll add it!

View code

<div style="background: white; padding: 1rem;">
  <div style="max-width: 32rem;">
    <h2 style="font-family: 'Times New Roman', serif; font-size: 1.25rem; color: black; margin: 0 0 0.25rem 0;">🔗 Cool Links</h2>
    <div style="border-top: 2px solid #808080; border-bottom: 2px solid #fff; margin-bottom: 0.75rem;"></div>
    <table style="width: 100%; border-collapse: collapse; font-family: 'Times New Roman', serif; font-size: 0.875rem;">
      <tr style="background: #c0c0c0;">
        <td style="border: 1px solid #808080; padding: 0.25rem 0.5rem; font-weight: bold;">Site</td>
        <td style="border: 1px solid #808080; padding: 0.25rem 0.5rem; font-weight: bold;">Description</td>
        <td style="border: 1px solid #808080; padding: 0.25rem 0.5rem; font-weight: bold;">Rating</td>
      </tr>
      <tr>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;"><a href="#" style="color: #0000ee;">The JavaScript Source</a></td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">Free JavaScript code and tutorials</td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">★★★★★</td>
      </tr>
      <tr style="background: #f0f0f0;">
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;"><a href="#" style="color: #0000ee;">HotWired</a></td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">Web design news and culture</td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">★★★★</td>
      </tr>
      <tr>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;"><a href="#" style="color: #551a8b;">WebMonkey</a></td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">How-to guides for web builders</td>
        <td style="border: 1px solid #ccc; padding: 0.25rem 0.5rem;">★★★★★</td>
      </tr>
    </table>
    <p style="font-family: 'Times New Roman', serif; font-size: 0.75rem; color: #808080; margin: 0.5rem 0 0;">Know a cool site? <a href="#" style="color: #0000ee;">Email me</a> and I'll add it!</p>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate UI in a raw 90s HTML style — the honest, undesigned aesthetic of the early web. Times New Roman, blue underlined links, gray backgrounds, table-based layouts, and elements that look like they were built with HTML 3.2 and a copy of "Teach Yourself HTML in 24 Hours." Not ugly — pure. The web before CSS frameworks told us what pretty looks like.

VISUAL RULES:
- Background: System gray (#c0c0c0) for the main page, OR white (#ffffff) for content areas. The gray of Windows 95 dialog boxes. Cards/tables: white bg with thin borders.
- Text: Pure black (#000000). No stone-600 nuance. Black text on white or gray backgrounds. That's it.
- Links: Blue (#0000ee) and underlined. Always. Visited links: purple (#551a8b). Hover: underline stays. This is the law of the 90s web.
- Typography: `font-family: 'Times New Roman', Times, serif`. THE default font of the early web. Headings are just bold and larger (`<h1>` through `<h3>` default styling). Font sizes: 12-16px for body. May use `font-family: 'Comic Sans MS', cursive` for one playful heading (period-accurate).
- Borders: Visible, structural. `border: 2px solid #808080` or `border: 1px solid #999`. Inset/outset borders for 3D button effects: `border-style: outset` on buttons, `border-style: inset` on inputs.
- Table layouts: Content organized in `<table>`-like grid patterns. Visible cell borders. Cellpadding feel (p-2 in each cell). Data tables with gray header rows.
- Horizontal rules: Thick, 3D beveled `<hr>`-style: `border: none; border-top: 2px solid #808080; border-bottom: 2px solid #fff`. The classic embossed HR.
- Spacing: Minimal. Default browser-like. p-1 to p-2. No generous whitespace — the 90s web was compact.
- Counter/badges: "You are visitor #12,847" style counters. Hit counters. "Last updated" timestamps.

SPECIFIC PATTERNS:
- Buttons: System-style. `background: #c0c0c0; border: 2px outset #ddd`. Text in Times New Roman or sans-serif. Active state: `border-style: inset`. Classic 3D button effect.
- Inputs: `border: 2px inset #999; background: white`. No border-radius. System styling.
- Navigation: Simple bulleted list of blue underlined links. Or horizontal row: `Home | About | Links | Guestbook`.
- Images: Would be placeholder boxes with alt text visible. `[IMAGE: Under Construction]`.
- Section headers: `<h2>` with `<hr>` below. Bold, Times New Roman, larger size. No styling.
- Lists: Default bulleted or numbered. No custom styling. Browser defaults.
- "Under construction" elements: Yellow/black warning stripe GIF equivalent. 🚧 Construction notices.

ANTI-PATTERNS:
- No modern CSS patterns. No flexbox "feel" — use table/block layouts.
- No rounded corners. This is pre-border-radius.
- No custom fonts (except system defaults).
- No shadow effects (except border outset/inset for 3D buttons).
- No gradient backgrounds.
- No responsive design. Fixed widths. Center with `margin: 0 auto`.
- No transition effects. No hover color changes (except default link behavior).

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.

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

🔥76system

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

🔥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.