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)