windows-3-1-web-designer

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: windows-3-1-web-designer
description: Modern web applications with authentic Windows 3.1 aesthetic. Solid navy title bars, Program Manager navigation, beveled borders, single window controls. Extrapolates Win31 to AI chatbots (Cue
  Card paradigm), mobile UIs (pocket computing). Activate on 'windows 3.1', 'win31', 'program manager', 'retro desktop', '90s aesthetic', 'beveled'. NOT for Windows 95 (use windows-95-web-designer - has
  gradients, Start menu), vaporwave/synthwave, macOS, flat design.
allowed-tools: Read,Write,Edit,Glob,Grep
metadata:
  category: Design & Creative
  tags:
  - windows
  - web
  - designer
  pairs-with:
  - skill: win31-pixel-art-designer
    reason: Windows 3.1 web designs use pixel art icons and graphics from the same era
  - skill: win31-audio-design
    reason: Windows 3.1 web apps use era-appropriate UI sound effects
  - skill: windows-95-web-designer
    reason: Both create retro Microsoft OS-themed web apps with shared beveled border and system font patterns
---

# Windows 3.1 Web Designer

Creates modern 2026 web applications with authentic Windows 3.1 aesthetic. Not recreating 1992—**extrapolating Win31 to modern contexts**: AI assistants as Cue Card systems, mobile as pocket organizers, responsive as tiled MDI windows.

## When to Use

**Use for:**
- Web apps with Win31 authenticity (documentation sites, retro dashboards)
- AI chatbot interfaces (Cue Card-style assistants, wizard dialogs)
- Mobile-responsive Win31 UIs (pocket computing paradigm)
- Program Manager navigation patterns
- Tiled/cascading window layouts
- MDI (Multiple Document Interface) applications
- Hotdog Stand mode easter eggs

**Do NOT use for:**
- Windows 95 aesthetic → use **windows-95-web-designer** (gradients, Start menu, taskbar)
- Vaporwave/synthwave → use **vaporwave-glassomorphic-ui-designer** (neons, gradients)
- macOS/iOS styling → use **native-app-designer**
- Flat/Material design → use **web-design-expert**

## Win31 vs Win95: Critical Differences

| Feature | Windows 3.1 | Windows 95 |
|---------|-------------|------------|
| Title bar | **Solid navy** (#000080) | Gradient (dark→light blue) |
| Window controls | **Single menu button** | Three buttons (−, □, ×) |
| Navigation | **Program Manager** | Start Menu + Taskbar |
| Fonts | **Bitmap/VT323** | MS Sans Serif, Tahoma |
| Icons | **32×32 flat** | 32×32 with drop shadow |
| Depth | **Bevels only** | Bevels + subtle gradients |
| AI style | **Cue Cards, Wizards** | Clippy character |

---

## Core Design System

### Color Palette

| Color | Hex | CSS Variable | Usage |
|-------|-----|--------------|-------|
| System Gray | #c0c0c0 | `--win31-gray` | THE primary background |
| Dark Gray | #808080 | `--win31-dark-gray` | Shadows, pressed states |
| Light Gray | #dfdfdf | `--win31-light-gray` | Highlights |
| Navy | #000080 | `--win31-navy` | Title bar (SOLID, no gradient) |
| Teal | #008080 | `--win31-teal` | Desktop, links, highlights |
| White | #ffffff | `--win31-white` | Beveled highlights, inputs |
| Black | #000000 | `--win31-black` | Beveled shadows, borders |

### The Win31 Title Bar (SOLID)

**THE signature Win31 element** - solid navy, no gradient:

```css
.win31-titlebar {
  background: #000080; /* SOLID - never a gradient! */
  color: white;
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win31-titlebar-inactive {
  background: #808080; /* Solid dark gray when inactive */
}
```

### Window Control Button (Single)

Win31 has ONE control button (not Win95's three):

```css
.win31-control-btn {
  width: 18px;
  height: 14px;
  background: var(--win31-gray);
  border: none;
  font-size: 8px;
  font-family: var(--font-pixel);

  /* 3D bevel - outset */
  box-shadow:
    inset -1px -1px 0 var(--win31-black),
    inset 1px 1px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    inset 2px 2