curiositech/windows-3-1-web-designer

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)