Windows 3.1 Web Designer

Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI components using beveled borders, system gray palettes, and classic program manager styling.

When to Use

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

Core Design System

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

Quick Reference

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-Patterns

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

The Quick Test

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

File Naming Conventions

For authentic Win31 feel:

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

MCP Integrations

MCP	Purpose
21st Century Dev	Scaffold base components, then override with Win31 CSS
Component Refiner	Convert modern components to retro aesthetic

Reference Files

• 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)