windows-3-1-web-designer

Use for:

• Retro-themed web applications with Windows 3.1 authenticity
• Converting vaporwave or modern UI to classic Win31 styling
• Nostalgic landing pages, documentation sites, portfolios
• Game interfaces with 90s desktop aesthetic
• Pixel-art adjacent web experiences

Do NOT use for:

• Vaporwave aesthetics → use vaporwave-glassomorphic-ui-designer
• Modern glassmorphism → use native-app-designer
• macOS/iOS styling → use native-app-designer
• Flat/Material design → use web-design-expert

Color Palette

| Color | Hex | Usage |

|-------|-----|-------|

| System Gray | #c0c0c0 | THE primary background |

| Dark Gray | #808080 | Shadows, pressed states |

| Navy | #000080 | Title bar background |

| Teal | #008080 | Links, highlights |

| White | #ffffff | Beveled highlights, inputs |

| Black | #000000 | Beveled shadows, borders |

The Sacred Rule: Beveled Borders

OUTSET (Raised) - Buttons, toolbars:

• Top/Left border: WHITE
• Bottom/Right border: BLACK
• Inner shadow: light-gray TL, dark-gray BR

INSET (Sunken) - Text fields, content areas:

• Top/Left border: DARK GRAY
• Bottom/Right border: WHITE
• Inner shadow: black TL, light-gray BR

Typography

• Primary: VT323, Courier New (pixel-style)
• Headings: Press Start 2P (chunky pixel)
• Code: IBM Plex Mono, Courier Prime

| Element | Background | Border Pattern |

|---------|------------|----------------|

| Window | #c0c0c0 | 3px solid black, inset bevel |

| Titlebar | #000080 | none |

| Button (up) | #c0c0c0 | inset white TL, black BR |

| Button (down) | #c0c0c0 | inset black TL, white BR |

| Input | #ffffff | inset 2px dark-gray |

| Panel (raised) | #c0c0c0 | outset 2px |

| Panel (inset) | #ffffff | inset 2px + shadow |

Anti-Pattern: Gradients

What it looks like: linear-gradient(#00d4ff, #ff00ff)

Why wrong: Win31 has NO gradients—only solid colors

Instead: Solid var(--win31-teal) or var(--win31-navy)

Anti-Pattern: Neon Colors

What it looks like: #00d4ff, #ff00ff (bright neons)

Why wrong: This is vaporwave, not Win31

Instead: Muted palette: teal (#008080), navy (#000080)

Anti-Pattern: Rounded Corners

What it looks like: border-radius: 8px

Why wrong: Win31 has sharp 90° corners everywhere

Instead: No border-radius (or 0)

Anti-Pattern: Blur Effects

What it looks like: backdrop-filter: blur(10px), soft shadows

Why wrong: Win31 has no blur—only hard-edge bevels

Instead: Sharp bevel shadows with no blur

Anti-Pattern: Dark Backgrounds

What it looks like: #1a1a2e, #16213e dark backgrounds

Why wrong: Win31 is light—system gray everywhere

Instead: #c0c0c0 system gray base

If your component has:

• ❌ Any blur effects → NOT Win31
• ❌ Any gradient backgrounds → NOT Win31
• ❌ Any neon colors → NOT Win31
• ❌ Any rounded corners → NOT Win31
• ❌ Dark backgrounds → NOT Win31

It should have:

• ✅ System gray (#c0c0c0) base
• ✅ Beveled borders (white TL, black BR)
• ✅ Sharp corners everywhere
• ✅ Pixel fonts (VT323, Press Start 2P)
• ✅ Navy blue title bars
• ✅ Hard-edge box shadows only

For authentic Win31 feel:

• All caps: README.TXT, INSTALL.EXE
• 8.3 format: PROGRAM.EXE, CONFIG.SYS

| MCP | Purpose |

|-----|---------|

| 21st Century Dev | Scaffold base components, then override with Win31 CSS |

| Component Refiner | Convert modern components to retro aesthetic |

• references/design-system.md - Complete color palette, typography, beveled border patterns
• references/component-patterns.md - Full CSS for windows, buttons, forms, panels
• references/anti-patterns.md - Vaporwave comparison, decision tree, conversion examples

---

Core insight: Win31 aesthetic is about DEPTH through bevels, not GLOW through neons. System gray is your canvas—beveled borders create the illusion of 3D.

Use with: vaporwave-glassomorphic-ui-designer (different aesthetic) | web-design-expert (modern designs)