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)
1---2name: windows-3-1-web-designer3description: 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.4license: Apache-2.05---6
7# Windows 3.1 Web Designer
8
9Expert 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.
10
11## When to Use
12
13**Use for:**
14- Retro-themed web applications with Windows 3.1 authenticity
15- Converting vaporwave or modern UI to classic Win31 styling
16- Nostalgic landing pages, documentation sites, portfolios
17- Game interfaces with 90s desktop aesthetic
18- Pixel-art adjacent web experiences
19
20**Do NOT use for:**
21- Vaporwave aesthetics → use **vaporwave-glassomorphic-ui-designer**
22- Modern glassmorphism → use **native-app-designer**
23- macOS/iOS styling → use **native-app-designer**
24- Flat/Material design → use **web-design-expert**
25
26## Core Design System
27
28### Color Palette
29
30| Color | Hex | Usage |
31|-------|-----|-------|
32| System Gray | #c0c0c0 | THE primary background |
33| Dark Gray | #808080 | Shadows, pressed states |
34| Navy | #000080 | Title bar background |
35| Teal | #008080 | Links, highlights |
36| White | #ffffff | Beveled highlights, inputs |
37| Black | #000000 | Beveled shadows, borders |
38
39### The Sacred Rule: Beveled Borders
40
41**OUTSET (Raised)** - Buttons, toolbars:
42- Top/Left border: WHITE
43- Bottom/Right border: BLACK
44- Inner shadow: light-gray TL, dark-gray BR
45
46**INSET (Sunken)** - Text fields, content areas:
47- Top/Left border: DARK GRAY
48- Bottom/Right border: WHITE
49- Inner shadow: black TL, light-gray BR
50
51### Typography
52
53- **Primary**: VT323, Courier New (pixel-style)
54- **Headings**: Press Start 2P (chunky pixel)
55- **Code**: IBM Plex Mono, Courier Prime
56
57## Quick Reference
58
59| Element | Background | Border Pattern |
60|---------|------------|----------------|
61| Window | #c0c0c0 | 3px solid black, inset bevel |
62| Titlebar | #000080 | none |
63| Button (up) | #c0c0c0 | inset white TL, black BR |
64| Button (down) | #c0c0c0 | inset black TL, white BR |
65| Input | #ffffff | inset 2px dark-gray |
66| Panel (raised) | #c0c0c0 | outset 2px |
67| Panel (inset) | #ffffff | inset 2px + shadow |
68
69## Anti-Patterns
70
71### Anti-Pattern: Gradients
72**What it looks like**: `linear-gradient(#00d4ff, #ff00ff)`
73**Why wrong**: Win31 has NO gradients—only solid colors
74**Instead**: Solid `var(--win31-teal)` or `var(--win31-navy)`
75
76### Anti-Pattern: Neon Colors
77**What it looks like**: #00d4ff, #ff00ff (bright neons)
78**Why wrong**: This is vaporwave, not Win31
79**Instead**: Muted palette: teal (#008080), navy (#000080)
80
81### Anti-Pattern: Rounded Corners
82**What it looks like**: `border-radius: 8px`
83**Why wrong**: Win31 has sharp 90° corners everywhere
84**Instead**: No border-radius (or 0)
85
86### Anti-Pattern: Blur Effects
87**What it looks like**: `backdrop-filter: blur(10px)`, soft shadows
88**Why wrong**: Win31 has no blur—only hard-edge bevels
89**Instead**: Sharp bevel shadows with no blur
90
91### Anti-Pattern: Dark Backgrounds
92**What it looks like**: #1a1a2e, #16213e dark backgrounds
93**Why wrong**: Win31 is light—system gray everywhere
94**Instead**: #c0c0c0 system gray base
95
96## The Quick Test
97
98If your component has:
99- ❌ Any blur effects → NOT Win31
100- ❌ Any gradient backgrounds → NOT Win31
101- ❌ Any neon colors → NOT Win31
102- ❌ Any rounded corners → NOT Win31
103- ❌ Dark backgrounds → NOT Win31
104
105It should have:
106- ✅ System gray (#c0c0c0) base
107- ✅ Beveled borders (white TL, black BR)
108- ✅ Sharp corners everywhere
109- ✅ Pixel fonts (VT323, Press Start 2P)
110- ✅ Navy blue title bars
111- ✅ Hard-edge box shadows only
112
113## File Naming Conventions
114
115For authentic Win31 feel:
116- All caps: `README.TXT`, `INSTALL.EXE`
117- 8.3 format: `PROGRAM.EXE`, `CONFIG.SYS`
118
119## MCP Integrations
120
121| MCP | Purpose |
122|-----|---------|
123| **21st Century Dev** | Scaffold base components, then override with Win31 CSS |
124| **Component Refiner** | Convert modern components to retro aesthetic |
125
126## Reference Files
127
128- `references/design-system.md` - Complete color palette, typography, beveled border patterns
129- `references/component-patterns.md` - Full CSS for windows, buttons, forms, panels
130- `references/anti-patterns.md` - Vaporwave comparison, decision tree, conversion examples
131
132---
133
134**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.
135
136**Use with**: vaporwave-glassomorphic-ui-designer (different aesthetic) | web-design-expert (modern designs)
curiositech