Skip to main content

🎨 Windows 3 1 Web Designer

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

Tags​

retro windows 90s beveled nostalgia

🤝 Pairs Great With​

References​

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​

ColorHexUsage
System Gray#c0c0c0THE primary background
Dark Gray#808080Shadows, pressed states
Navy#000080Title bar background
Teal#008080Links, highlights
White#ffffffBeveled highlights, inputs
Black#000000Beveled 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​

ElementBackgroundBorder Pattern
Window#c0c0c03px solid black, inset bevel
Titlebar#000080none
Button (up)#c0c0c0inset white TL, black BR
Button (down)#c0c0c0inset black TL, white BR
Input#ffffffinset 2px dark-gray
Panel (raised)#c0c0c0outset 2px
Panel (inset)#ffffffinset 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​

MCPPurpose
21st Century DevScaffold base components, then override with Win31 CSS
Component RefinerConvert 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)