windows-3-1-web-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Windows 3.1 Web Designer

Windows 3.1 网页设计方案

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.

打造具有纯正Windows 3.1视觉风格的2026现代Web应用。并非复刻1992年的系统——将Win31风格延伸至现代场景：AI助手采用Cue Card系统形式，移动端模拟掌上管理器，响应式设计借鉴平铺式MDI窗口。

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纯正风格的Web应用（文档站点、复古仪表盘）
AI聊天机器人界面（Cue Card风格助手、向导对话框）
适配移动设备的Win31 UI（掌上计算范式）
Program Manager导航模式
平铺/层叠窗口布局
MDI（多文档界面）应用
"Hotdog Stand"模式彩蛋

不适用情况：

Windows 95风格 → 请使用 windows-95-web-designer（渐变效果、开始菜单、任务栏）
蒸汽波/合成波风格 → 请使用 vaporwave-glassomorphic-ui-designer（霓虹、渐变）
macOS/iOS风格 → 请使用 native-app-designer
扁平化/Material设计 → 请使用 web-design-expert

Win31 vs Win95: Critical Differences

Win31与Win95的核心差异

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

特性	Windows 3.1	Windows 95
标题栏	纯深蓝色 (#000080)	渐变（深→浅蓝色）
窗口控件	单个菜单按钮	三个按钮（−, □, ×）
导航方式	Program Manager	开始菜单 + 任务栏
字体	位图/VT323	MS Sans Serif、Tahoma
图标	32×32 扁平化	32×32 带阴影
视觉深度	仅斜切边框	斜切边框 + 细微渐变
AI风格	Cue Cards、向导	Clippy助手角色

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

颜色	十六进制值	CSS变量	用途
系统灰色	#c0c0c0	`--win31-gray`	主要背景色
深灰色	#808080	`--win31-dark-gray`	阴影、按下状态
浅灰色	#dfdfdf	`--win31-light-gray`	高亮效果
深蓝色	#000080	`--win31-navy`	标题栏（纯纯色，无渐变）
蓝绿色	#008080	`--win31-teal`	桌面、链接、高亮
白色	#ffffff	`--win31-white`	斜切高亮、输入框
黑色	#000000	`--win31-black`	斜切阴影、边框

The Win31 Title Bar (SOLID)

Win31标题栏（纯纯色）

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 */
}

Win31标志性元素 - 纯深蓝色，无渐变：

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; /* 非激活状态为纯深灰色 */
}

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

Win31只有一个控制按钮（而非Win95的三个）：

css

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

  /* 3D斜切 - 凸起效果 */
  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

凸起（OUTSET） - 按钮、工具栏：

上/左边框：白色
下/右边框：黑色
内层：左上浅灰、右下深灰

凹陷（INSET） - 文本框、内容区域：

上/左边框：深灰色
下/右边框：白色
内层：左上黑色、右下浅灰

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:

css

: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;
}

用途	字体	备选字体	字号
UI标签	VT323	Courier New	12px
标题栏	VT323 Bold	Courier New Bold	11px
标题	Press Start 2P	VT323	14px
代码	IBM Plex Mono	Courier Prime	12px

Web字体栈：

css

: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

AI聊天机器人：Cue Card范式

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

Win31风格下的AI会以模态向导系统呈现，而非动画角色：

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

核心模式：

无动画角色（早于Clippy时代）
一次仅展示一个问题（模态）
单选按钮/编号选项
分步向导指示器
悬浮于应用旁的Cue Cards

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

Win31风格延伸至移动端，呈现为带Program Manager的掌上管理器：

┌────────────────────────────┐
│ ■ Program Manager ─ 10:45  │  ← 带时间的标题栏
├────────────────────────────┤
│ ╔════════════════════════╗ │
│ ║ Main                  ║ │
│ ╠════════════════════════╣ │
│ ║  ┌───┐   ┌───┐        ║ │
│ ║  │📁│   │📝│        ║ │  ← 程序组
│ ║  │Mgr│   │Wrt│        ║ │
│ ║  └───┘   └───┘        ║ │
│ ╚════════════════════════╝ │
├────────────────────────────┤
│ [ Window ]  [ Help ]       │  ← 底部菜单栏
└────────────────────────────┘

核心模式：

Program Manager作为导航（而非开始菜单）
一次仅显示一个窗口（模态栈）
对话框堆叠模式（层叠覆盖）
底部菜单栏适配触控
左滑 = 关闭窗口

Responsive: MDI as Breakpoints

响应式设计：MDI作为断点

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

Win31采用多文档界面（MDI），可将此理念应用于响应式设计：

断点	Win31隐喻	布局
移动端（<640px）	掌上计算	单窗口、模态对话框
平板端（640-1024px）	笔记本电脑	层叠窗口
桌面端（>1024px）	完整桌面	平铺MDI窗口

Theming: Hotdog Stand and Beyond

主题：Hotdog Stand及更多

Windows 3.1 had limited but memorable themes:

css

/* 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;
}

Windows 3.1有少量但令人印象深刻的主题：

css

/* Hotdog Stand（知名的红黄色主题） */
[data-theme="hotdog-stand"] {
  --win31-gray: #ff0000;
  --win31-dark-gray: #800000;
  --win31-light-gray: #ff8080;
  --win31-navy: #ffff00;
  --win31-title-text: #ff0000;
}

/* 单色（高对比度） */
[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

Program Manager窗口

css

.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;
}

css

.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

对话框

css

.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;
}

css

.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

菜单栏

css

.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;
}

css

.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

状态栏

css

.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);
}

css

.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

)

新手误区：“Win31和Win95一样有蓝色标题栏” 实际情况：Win31的标题栏是纯深蓝色。渐变是Win95独有的。 正确做法：使用

background: #000080

（绝对不要用

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

新手误区：“Windows系统有最小化、最大化、关闭三个按钮” 实际情况：Win31只有一个菜单按钮（−）。三按钮模式是Win95的设计。 正确做法：使用单个可打开系统菜单的按钮

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

新手误区：“Windows的导航就是开始按钮” 实际情况：Win31使用Program Manager，没有任务栏和开始菜单。 正确做法：采用带层叠/平铺窗口的程序组

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)

新手误区：使用#00d4ff、#ff00ff营造复古感 实际情况：这是蒸汽波风格，而非Win31风格 正确做法：使用柔和色调：蓝绿色（#008080）、深蓝色（#000080）、灰色（#c0c0c0）

Anti-Pattern: Rounded Corners

反模式：圆角

Novice thinking:

border-radius: 8px

for friendly UI Reality: Win31 has sharp 90° corners everywhere Instead: No border-radius (or 0)

新手误区：使用

border-radius: 8px

打造友好UI 实际情况：Win31的所有元素都是90°直角 正确做法：不设置圆角（或设为0）

Anti-Pattern: Blur Effects

反模式：模糊效果

Novice thinking:

backdrop-filter: blur(10px)

, soft shadows Reality: Win31 has no blur—only hard-edge bevels Instead: Sharp bevel shadows:

box-shadow: 4px 4px 0 #000

新手误区：使用

backdrop-filter: blur(10px)

、柔和阴影 实际情况：Win31没有模糊效果——只有硬边缘斜切 正确做法：使用锐利的斜切阴影：

box-shadow: 4px 4px 0 #000

Anti-Pattern: Dark Backgrounds

反模式：深色背景

Novice thinking: Dark mode = #1a1a2e backgrounds Reality: Win31 is LIGHT. System gray (#c0c0c0) everywhere. Instead: Light gray base with teal desktop

新手误区：深色模式使用#1a1a2e这类背景色 实际情况：Win31是浅色风格，系统灰色（#c0c0c0）无处不在 正确做法：以浅灰色为基础，搭配蓝绿色桌面

Anti-Pattern: Clippy-Style Characters

反模式：Clippy风格角色

Novice thinking: Win31 had assistant characters Reality: Clippy came with Office 97 (Win95 era). Win31 used Cue Cards. Instead: Modal dialogs, step-by-step wizards, floating help cards

新手误区：Win31有助手角色 实际情况：Clippy是Office 97（Win95时代）的产物。Win31使用Cue Cards。 正确做法：使用模态对话框、分步向导、悬浮帮助卡片

Quick Decision Tree

快速决策树

Is it a window chrome element?
├── Title bar? → SOLID navy (no gradient!)
├── Control button? → SINGLE button (not three)
├── Button? → 3D bevel (white TL, black BR)
├── Input? → Inset bevel (dark TL, white BR)
└── Content area? → White or gray, flat

Is it navigation?
├── Primary nav? → Program Manager groups
├── Section nav? → Menu bar with dropdowns
├── Page nav? → List box or tree control
└── Actions? → Toolbar buttons (beveled)

Is it AI/help?
├── Onboarding? → Setup Wizard (Step X of Y)
├── Inline help? → Cue Cards (floating tips)
├── Questions? → Modal dialog with options
└── Feedback? → Message box with icon

Is it responsive?
├── Mobile? → Single window, modal stack
├── Tablet? → Cascading windows
└── Desktop? → Tiled MDI layout

是否为窗口框架元素？
├── 标题栏？ → 纯深蓝色（绝对不要渐变！）
├── 控制按钮？ → 单个按钮（而非三个）
├── 普通按钮？ → 3D斜切（左上白、右下黑）
├── 输入框？ → 凹陷斜切（左上深灰、右下白）
└── 内容区域？ → 白色或灰色，扁平化

是否为导航元素？
├── 主导航？ → Program Manager程序组
├── 区域导航？ → 带下拉菜单的菜单栏
├── 页面导航？ → 列表框或树形控件
└── 操作按钮？ → 斜切工具栏按钮

是否为AI/帮助元素？
├── 引导流程？ → 设置向导（第X步/共Y步）
├── 内联帮助？ → Cue Cards（悬浮提示）
├── 问题交互？ → 带选项的模态对话框
└── 反馈提示？ → 带图标的消息框

是否为响应式设计？
├── 移动端？ → 单窗口、模态栈
├── 平板端？ → 层叠窗口
└── 桌面端？ → 平铺MDI布局

CSS Variables Template

CSS变量模板

css

:root {
  /* Core palette */
  --win31-white: #ffffff;
  --win31-black: #000000;
  --win31-gray: #c0c0c0;
  --win31-dark-gray: #808080;
  --win31-light-gray: #dfdfdf;
  --win31-navy: #000080;
  --win31-teal: #008080;

  /* Semantic */
  --win31-error: #ff0000;
  --win31-warning: #ffff00;
  --win31-success: #00ff00;
  --win31-info: #0000ff;

  /* Typography */
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;

  /* Spacing (4px grid) */
  --win31-spacing-xs: 2px;
  --win31-spacing-sm: 4px;
  --win31-spacing-md: 8px;
  --win31-spacing-lg: 16px;
  --win31-spacing-xl: 24px;
}

css

:root {
  /* 核心调色板 */
  --win31-white: #ffffff;
  --win31-black: #000000;
  --win31-gray: #c0c0c0;
  --win31-dark-gray: #808080;
  --win31-light-gray: #dfdfdf;
  --win31-navy: #000080;
  --win31-teal: #008080;

  /* 语义化颜色 */
  --win31-error: #ff0000;
  --win31-warning: #ffff00;
  --win31-success: #00ff00;
  --win31-info: #0000ff;

  /* 排版 */
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;

  /* 间距（4px网格） */
  --win31-spacing-xs: 2px;
  --win31-spacing-sm: 4px;
  --win31-spacing-md: 8px;
  --win31-spacing-lg: 16px;
  --win31-spacing-xl: 24px;
}

The Quick Test

快速测试

If your component has:

❌ Any gradient title bars → NOT Win31 (that's Win95)
❌ Three window buttons → NOT Win31 (that's Win95)
❌ Start menu or taskbar → NOT Win31 (that's Win95)
❌ Any neon colors → NOT Win31 (that's vaporwave)
❌ Any rounded corners → NOT Win31
❌ Any blur effects → NOT Win31
❌ Animated assistant character → NOT Win31 (that's Clippy/Win95)

It should have:

✅ Solid navy (#000080) title bar
✅ Single window control button
✅ Program Manager navigation
✅ System gray (#c0c0c0) base
✅ Beveled borders (white TL, black BR)
✅ Sharp corners everywhere
✅ Pixel fonts (VT323, Press Start 2P)
✅ Hard-edge box shadows only
✅ Cue Cards for help (not characters)

如果你的组件包含：

❌ 任何渐变标题栏 → 不是Win31风格（这是Win95）
❌ 三个窗口按钮 → 不是Win31风格（这是Win95）
❌ 开始菜单或任务栏 → 不是Win31风格（这是Win95）
❌ 任何霓虹色 → 不是Win31风格（这是蒸汽波）
❌ 任何圆角 → 不是Win31风格
❌ 任何模糊效果 → 不是Win31风格
❌ 动画助手角色 → 不是Win31风格（这是Clippy/Win95）

正确的Win31组件应该包含：

✅ 纯深蓝色（#000080）标题栏
✅ 单个窗口控制按钮
✅ Program Manager导航
✅ 系统灰色（#c0c0c0）基础色调
✅ 斜切边框（左上白、右下黑）
✅ 全直角设计
✅ 像素字体（VT323、Press Start 2P）
✅ 仅使用硬边缘阴影
✅ 使用Cue Cards提供帮助（而非角色）

File Naming Conventions

文件命名规范

For authentic Win31 feel:

All caps:
```
README.TXT
```
,
```
INSTALL.EXE
```
8.3 format:
```
PROGRAM.EXE
```
,
```
CONFIG.SYS
```
Extensions matter:
```
.WRI
```
,
```
.BMP
```
,
```
.INI
```

为了贴合Win31的真实风格：

全大写：
```
README.TXT
```
,
```
INSTALL.EXE
```
8.3格式：
```
PROGRAM.EXE
```
,
```
CONFIG.SYS
```
扩展名至关重要：
```
.WRI
```
,
```
.BMP
```
,
```
.INI
```

References

参考文档

```
/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
```
/references/ai-assistant-patterns.md
```
- Cue Card-style AI UX patterns
```
/references/mobile-pocket-computing.md
```
- Responsive Win31 for mobile

```
/references/design-system.md
```
- 完整调色板、排版、斜切边框模式
```
/references/component-patterns.md
```
- 窗口、按钮、表单、面板的完整CSS代码
```
/references/anti-patterns.md
```
- 蒸汽波风格对比、决策树、转换示例
```
/references/ai-assistant-patterns.md
```
- Cue Card风格AI UX模式
```
/references/mobile-pocket-computing.md
```
- 移动端Win31响应式设计

Pairs With

搭配工具

windows-95-web-designer - For gradient/taskbar Win95 aesthetic
vaporwave-glassomorphic-ui-designer - Different retro aesthetic (neons)
web-design-expert - For brand direction alongside retro style
design-system-creator - For generating full design token systems

windows-95-web-designer - 用于渐变/任务栏的Win95风格
vaporwave-glassomorphic-ui-designer - 另一种复古风格（霓虹）
web-design-expert - 结合复古风格提供品牌方向指导
design-system-creator - 用于生成完整的设计令牌系统