windows-3-1-web-designer

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:

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

.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 2px 0 var(--win31-light-gray);
}

.win31-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-black),
    inset -1px -1px 0 var(--win31-white);
}

The Sacred Rule: Beveled Borders

OUTSET (Raised) - Buttons, toolbars:

• Top/Left border: WHITE
• Bottom/Right border: BLACK
• Inner: light-gray TL, dark-gray BR

INSET (Sunken) - Text fields, content areas:

• Top/Left border: DARK GRAY
• Bottom/Right border: WHITE
• Inner: black TL, light-gray BR

Typography

Use	Font	Fallback	Size
UI Labels	VT323	Courier New	12px
Title bars	VT323 Bold	Courier New Bold	11px
Headings	Press Start 2P	VT323	14px
Code	IBM Plex Mono	Courier Prime	12px

Web font stack:

:root {
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;
}

---

Modern Extrapolations

AI Chatbots: The Cue Card Paradigm

Win31 would present AI as a modal wizard system, not an animated character:

┌─ AI Assistant ──────────────────────[─]─┐
│                                          │
│  ┌────────────────────────────────────┐  │
│  │  What would you like help with?    │  │
│  │                                    │  │
│  │  ○ Writing a document              │  │
│  │  ○ Working with files              │  │
│  │  ○ Setting up your system          │  │
│  │  ○ Learning Windows basics         │  │
│  └────────────────────────────────────┘  │
│                                          │
│         [  OK  ]  [ Cancel ]  [ Help ]   │
└──────────────────────────────────────────┘

Key patterns:

• No animated characters (pre-Clippy)
• One question at a time (modal)
• Radio button/numbered choices
• Step-by-step wizard indicators
• Cue Cards floating alongside app

Mobile: The Pocket Computing Paradigm

Win31 on mobile extrapolates to pocket organizer with Program Manager:

┌────────────────────────────┐
│ ■ Program Manager ─ 10:45  │  ← Title bar with time
├────────────────────────────┤
│ ╔════════════════════════╗ │
│ ║ Main                  ║ │
│ ╠════════════════════════╣ │
│ ║  ┌───┐   ┌───┐        ║ │
│ ║  │📁│   │📝│        ║ │  ← Program group
│ ║  │Mgr│   │Wrt│        ║ │
│ ║  └───┘   └───┘        ║ │
│ ╚════════════════════════╝ │
├────────────────────────────┤
│ [ Window ]  [ Help ]       │  ← Menu bar bottom
└────────────────────────────┘

Key patterns:

• Program Manager is navigation (not Start menu)
• One window at a time (modal stack)
• Dialog stack pattern (overlays cascade)
• Menu bar at bottom for touch
• Swipe left = close window

Responsive: MDI as Breakpoints

Win31 used Multiple Document Interface. Apply this:

Breakpoint	Win31 Metaphor	Layout
Mobile (<640px)	Pocket computing	Single window, modal dialogs
Tablet (640-1024px)	Laptop	Cascading windows
Desktop (>1024px)	Full desktop	Tiled MDI windows

Theming: Hotdog Stand and Beyond

Windows 3.1 had limited but memorable themes:

/* Hotdog Stand (the infamous red/yellow) */
[data-theme="hotdog-stand"] {
  --win31-gray: #ff0000;
  --win31-dark-gray: #800000;
  --win31-light-gray: #ff8080;
  --win31-navy: #ffff00;
  --win31-title-text: #ff0000;
}

/* Monochrome (high contrast) */
[data-theme="monochrome"] {
  --win31-gray: #ffffff;
  --win31-dark-gray: #000000;
  --win31-light-gray: #ffffff;
  --win31-navy: #000000;
  --win31-teal: #000000;
}

---

Component Patterns

Program Manager Window

.win31-program-manager {
  position: fixed;
  inset: 0;
  background: var(--win31-teal);
  display: flex;
  flex-direction: column;
}

.win31-program-group {
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray);
  margin: 8px;
  min-width: 200px;
}

.win31-program-group-titlebar {
  background: var(--win31-navy);
  color: var(--win31-white);
  padding: 2px 6px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: bold;
}

.win31-program-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 8px;
  padding: 12px;
}

Dialog Box

.win31-dialog {
  min-width: 300px;
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    4px 4px 0 var(--win31-black);
}

.win31-dialog-content {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.win31-dialog-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.win31-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 16px;
}

Menu Bar

.win31-menubar {
  background: var(--win31-gray);
  border-bottom: 2px solid var(--win31-dark-gray);
  padding: 2px;
  display: flex;
  gap: 0;
}

.win31-menu-item {
  padding: 4px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  cursor: pointer;
}

.win31-menu-item:hover,
.win31-menu-item--active {
  background: var(--win31-navy);
  color: var(--win31-white);
}

.win31-menu-dropdown {
  position: absolute;
  background: var(--win31-gray);
  border: 2px solid;
  border-color: var(--win31-white) var(--win31-black)
               var(--win31-black) var(--win31-white);
  min-width: 150px;
  z-index: 100;
}

Status Bar

.win31-statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--win31-gray);
  border-top: 2px solid var(--win31-dark-gray);
}

.win31-statusbar-panel {
  flex: 1;
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  border: 1px solid;
  border-color: var(--win31-dark-gray) var(--win31-white)
               var(--win31-white) var(--win31-dark-gray);
}

---

Anti-Patterns

Anti-Pattern: Title Bar Gradients

Novice thinking: "Win31 has blue title bars like Win95" Reality: Win31 has SOLID navy. Gradient is Win95 only. Instead: background: #000080 (never linear-gradient)

Anti-Pattern: Three Window Buttons

Novice thinking: "Windows has minimize, maximize, close" Reality: Win31 has a SINGLE menu button (−). The three-button pattern is Win95. Instead: One button that opens a system menu

Anti-Pattern: Start Menu/Taskbar

Novice thinking: "Windows navigation = Start button" Reality: Win31 uses Program Manager. No taskbar, no Start. Instead: Program groups with cascading/tiled windows

Anti-Pattern: Neon Colors

Novice thinking: #00d4ff, #ff00ff for retro feel Reality: This is vaporwave, not Win31 Instead: Muted palette: teal (#008080), navy (#000080), gray (#c0c0c0)

Anti-Pattern: Rounded Corners

Novice thinking: border-radius: 8px for friendly UI Reality: Win31 has sharp 90° corners everywhere Instead: No border-radius

---

Content truncated.