| license | Apache-2.0 |
| name | windows-3-1-web-designer |
| description | Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Activate on 'windows 3.1', 'retro ui', 'beveled borders', 'win31', 'program manager', '90s aesthetic'. NOT for vaporwave (neon gradients), glassmorphism, macOS/iOS styling, flat design, or material design. |
| allowed-tools | Read,Write,Edit,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_refiner |
| category | Design & Creative |
| tags | ["retro","windows","90s","beveled","nostalgia"] |
| pairs-with | [{"skill":"web-design-expert","reason":"Apply retro aesthetic to modern web"},{"skill":"native-app-designer","reason":"Retro desktop app styling"}] |
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 patternsreferences/component-patterns.md - Full CSS for windows, buttons, forms, panelsreferences/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)
