Retrosystem

Windows 95 Classic

90
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with the iconic look of Windows 95/98 — silver-gray panels, beveled 3D buttons, system font, title bars with close buttons, and the utilitarian charm of peak desktop computing nostalgia.

windows95beveledclassic osdesktop

Added February 16, 2026 by unslop.dev

Example output

Application window

📁 My Documents
File Edit View Help
📄
readme.txt
📁
Projects
🖼️
photo.bmp
3 object(s)
View code
<div style="padding: 2rem; background: #008080;">
  <div style="max-width: 28rem; background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #000; border-right: 2px solid #000; padding: 2px;">
    <div style="background: linear-gradient(90deg, #000080 0%, #1084d0 100%); padding: 3px 4px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px;">
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; font-weight: 700; color: white;">📁 My Documents</span>
      <div style="display: flex; gap: 2px;">
        <button style="background: #c0c0c0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #808080; border-right: 1px solid #808080; width: 16px; height: 14px; font-size: 8px; padding: 0; cursor: pointer; font-family: 'Marlett', sans-serif; line-height: 1;">_</button>
        <button style="background: #c0c0c0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #808080; border-right: 1px solid #808080; width: 16px; height: 14px; font-size: 8px; padding: 0; cursor: pointer; line-height: 1;">□</button>
        <button style="background: #c0c0c0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #808080; border-right: 1px solid #808080; width: 16px; height: 14px; font-size: 9px; padding: 0; cursor: pointer; line-height: 1;">×</button>
      </div>
    </div>
    <div style="display: flex; gap: 0; padding: 1px 0; border-bottom: 1px solid #808080; margin-bottom: 2px;">
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; padding: 2px 6px; cursor: pointer;"><u>F</u>ile</span>
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; padding: 2px 6px; cursor: pointer;"><u>E</u>dit</span>
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; padding: 2px 6px; cursor: pointer;"><u>V</u>iew</span>
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; padding: 2px 6px; cursor: pointer;"><u>H</u>elp</span>
    </div>
    <div style="background: white; border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff; padding: 8px; min-height: 80px; margin: 0 2px;">
      <div style="display: flex; gap: 16px; flex-wrap: wrap;">
        <div style="text-align: center; width: 64px; cursor: pointer;">
          <div style="font-size: 24px; margin-bottom: 2px;">📄</div>
          <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000;">readme.txt</span>
        </div>
        <div style="text-align: center; width: 64px; cursor: pointer;">
          <div style="font-size: 24px; margin-bottom: 2px;">📁</div>
          <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000;">Projects</span>
        </div>
        <div style="text-align: center; width: 64px; cursor: pointer;">
          <div style="font-size: 24px; margin-bottom: 2px;">🖼️</div>
          <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000;">photo.bmp</span>
        </div>
      </div>
    </div>
    <div style="margin: 2px; padding: 2px 4px; border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff;">
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000;">3 object(s)</span>
    </div>
  </div>
</div>

Dialog box with buttons

⚠️ Confirm
⚠️

Are you sure you want to delete the selected file(s)? This action cannot be undone.

View code
<div style="padding: 2rem; background: #008080;">
  <div style="max-width: 22rem; background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #000; border-right: 2px solid #000; padding: 2px;">
    <div style="background: linear-gradient(90deg, #000080 0%, #1084d0 100%); padding: 3px 4px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px;">
      <span style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; font-weight: 700; color: white;">⚠️ Confirm</span>
      <button style="background: #c0c0c0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #808080; border-right: 1px solid #808080; width: 16px; height: 14px; font-size: 9px; padding: 0; cursor: pointer; line-height: 1;">×</button>
    </div>
    <div style="padding: 12px 16px;">
      <div style="display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;">
        <span style="font-size: 24px; flex-shrink: 0;">⚠️</span>
        <p style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; line-height: 1.5; margin: 4px 0 0 0;">Are you sure you want to delete the selected file(s)? This action cannot be undone.</p>
      </div>
      <div style="display: flex; justify-content: center; gap: 6px;">
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 20px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer; min-width: 75px;"><u>Y</u>es</button>
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 20px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer; min-width: 75px;"><u>N</u>o</button>
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 20px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer; min-width: 75px;">Cancel</button>
      </div>
    </div>
  </div>
</div>

Form with checkboxes and input

User Preferences
View code
<div style="padding: 2rem; background: #c0c0c0;">
  <div style="max-width: 24rem; border: 2px solid; border-color: #808080 #fff #fff #808080; padding: 8px;">
    <div style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; margin: -16px 0 8px 8px; background: #c0c0c0; display: inline-block; padding: 0 4px;">User Preferences</div>
    <div style="padding: 4px 8px;">
      <div style="margin-bottom: 8px;">
        <label style="font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; display: block; margin-bottom: 4px;"><u>N</u>ame:</label>
        <input type="text" value="John Doe" style="width: 100%; box-sizing: border-box; background: #fff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff; padding: 2px 4px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; outline: none;" />
      </div>
      <div style="margin-bottom: 8px;">
        <label style="display: flex; align-items: center; gap: 6px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; cursor: pointer;">
          <span style="width: 13px; height: 13px; display: inline-block; background: #fff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff; text-align: center; line-height: 11px; font-size: 11px;">✓</span>
          <u>S</u>how notifications
        </label>
      </div>
      <div style="margin-bottom: 8px;">
        <label style="display: flex; align-items: center; gap: 6px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; color: #000; cursor: pointer;">
          <span style="width: 13px; height: 13px; display: inline-block; background: #fff; border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff; text-align: center; line-height: 11px; font-size: 11px;"></span>
          <u>E</u>nable sounds
        </label>
      </div>
      <div style="display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px;">
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 16px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer;">OK</button>
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 16px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer;">Cancel</button>
        <button style="background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080; padding: 2px 16px; font-family: 'MS Sans Serif', Tahoma, sans-serif; font-size: 11px; cursor: pointer;"><u>A</u>pply</button>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in the Windows 95/98 classic style — the iconic visual language of Microsoft's peak desktop operating system. Silver-gray panels, beveled 3D edges, inset fields, system bitmap fonts, colored title bars, and the utilitarian beauty of an OS where every pixel had purpose. Recreate the exact look of Win95 chrome with CSS.

VISUAL RULES:
- Background: The classic silver-gray. #c0c0c0 for the default surface. This is THE color of Windows 95.
- 3D beveled edges: The signature effect. Raised elements use: `border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #808080; border-right: 2px solid #808080;`. This creates the 3D raised look.
- Inset/sunken fields: Inverse bevels for input fields and status bars. `border-top: 2px solid #808080; border-left: 2px solid #808080; border-bottom: 2px solid #fff; border-right: 2px solid #fff;`.
- Title bar: Classic navy blue gradient. `background: linear-gradient(90deg, #000080 0%, #1084d0 100%)`. White bold text. Close/minimize/maximize buttons on right.
- Text: Black (#000000) on gray surfaces. White (#ffffff) on blue title bars.
- Typography: System bitmap-style font. `font-family: 'MS Sans Serif', 'Microsoft Sans Serif', 'Segoe UI', Tahoma, sans-serif`. Size 11-12px. Never large display text. Everything is functional.
- Buttons: Raised 3D bevel. Gray (#c0c0c0) fill. Active/pressed: invert the bevel to look pushed in. One character underlined for keyboard shortcut.
- Border radius: 0px. Absolutely zero. Windows 95 has no rounded corners.
- Shadows: None (no CSS box-shadow). Depth is created entirely through the beveled border trick.
- Icons: Simplified 16x16 style references. Small, pixel-aligned, functional.

SPECIFIC PATTERNS:
- Windows: Title bar (blue gradient) + menu bar + content area + status bar. All beveled.
- Buttons: Gray raised bevel, black text, 1px dotted outline on focus. Pressed: inverted bevel.
- Text inputs: White background, sunken/inset bevel. Monospace or system font inside.
- Dropdown: Same as input with small arrow button on right side.
- Menus: White background, black text, blue highlight on hover/selected.
- Status bar: Sunken panels at bottom of windows. Small text.
- Group boxes: Thin etched border (top-left #808080, bottom-right #fff) with text label breaking the top edge.
- Checkboxes/radio: Small inset squares/circles with check marks.

ANTI-PATTERNS:
- No rounded corners anywhere. Zero border-radius.
- No CSS box-shadow. Use border colors for all depth effects.
- No gradients except on the title bar.
- No large font sizes. Keep everything 11-13px.
- No modern sans-serif fonts. Use system-style fonts.
- No transparency or blur effects.
- No color outside the Win95 palette (gray, blue, white, black, and standard 16 colors).

Related prompts

Now Playing
Live

Side B — Evening Mix

Recorded Feb 14, 2026 · C-90

27:14
Retro

Cassette Tape

🔥79system

Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.

* Lecture 12 — Data Structures

A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.

→ see also: AVL trees, Red-Black trees
Retro

Chalk Blackboard

🔥78system

Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.

My Notebook

The most beautiful interfaces are those that feel like they exist in the real world. Texture, light, and shadow create trust through familiarity.

Retro

Skeuomorphism

🔥91system

Generates UI with rich real-world textures — leather stitching, brushed metal, wood grain, linen backgrounds, and glossy glass buttons. iOS 6 energy. Every pixel pretends to be a physical material.