erichowens / windows-3-1-web-designer

Skill Content

---
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 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)