Win31 Pixel Art Designer

Win31 Pixel Art Designer

Expert in creating authentic Windows 3.1 era pixel art, icons, splash screens, and program banners. Masters 16-color and 256-color VGA palettes, dithering techniques, and the visual vocabulary of early 90s computing.

When to Use

Use for:

• Program Manager-style application icons (32x32, 16x16)
• Splash screens and "About" dialog graphics
• Banner art for Win31-themed applications
• Custom cursor and toolbar graphics
• Converting modern art to authentic retro style
• Understanding color limitations and dithering

Do NOT use for:

• CSS/​web styling → windows-3-1-web-designer
• Modern flat icons → web-design-expert
• Vaporwave aesthetic → vaporwave-glassomorphic-ui-designer
• High-resolution illustrations → native-app-designer

The Win31 Visual Vocabulary

Icon Specifications

The 16-Color Windows Palette

This is the EXACT palette Windows 3.1 used. Deviation breaks authenticity.

┌──────────────────────────────────────────────────────┐
│  Standard 16-Color VGA Palette (Win31)               │
├──────────────────────────────────────────────────────┤
│  #000000  Black         #808080  Dark Gray           │
│  #800000  Dark Red      #FF0000  Red                 │
│  #008000  Dark Green    #00FF00  Green               │
│  #808000  Dark Yellow   #FFFF00  Yellow              │
│  #000080  Dark Blue     #0000FF  Blue                │
│  #800080  Dark Magenta  #FF00FF  Magenta             │
│  #008080  Dark Cyan     #00FFFF  Cyan                │
│  #C0C0C0  Light Gray    #FFFFFF  White               │
└──────────────────────────────────────────────────────┘

Key insight: #C0C0C0 (Light Gray) is THE system color. It appears everywhere.

The 256-Color VGA Palette

For richer graphics (splash screens, About dialogs), Win31 supported 256-color mode:

The 6×6×6 Color Cube: For indexes 32-247, colors follow:

• R: 0, 51, 102, 153, 204, 255 (6 levels)
• G: 0, 51, 102, 153, 204, 255 (6 levels)
• B: 0, 51, 102, 153, 204, 255 (6 levels)

Dithering Patterns

Dithering creates the illusion of more colors using patterns. Win31 used these heavily.

Common Dithering Patterns

50% Checkerboard:     25% Sparse:          75% Dense:
■ □ ■ □               □ □ □ □              ■ ■ ■ □
□ ■ □ ■               □ ■ □ □              ■ ■ □ ■
■ □ ■ □               □ □ □ □              ■ □ ■ ■
□ ■ □ ■               □ □ □ ■              □ ■ ■ ■

Diagonal:             Horizontal Lines:    Vertical Lines:
■ □ □ □               ■ ■ ■ ■              ■ □ ■ □
□ ■ □ □               □ □ □ □              ■ □ ■ □
□ □ ■ □               ■ ■ ■ ■              ■ □ ■ □
□ □ □ ■               □ □ □ □              ■ □ ■ □

When to Use Dithering

CSS Dithering Pattern

/​* Classic Win31 checkerboard dither in CSS */
.win31-dither {
  background-image: url("data:image/​svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/​2000/​svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/​svg%3E");
  background-size: 4px 4px;
}

Icon Design Guidelines

Anatomy of a Win31 Icon

┌──────────────────────────────────────────┐
│          32×32 Icon Anatomy              │
├──────────────────────────────────────────┤
│                                          │
│  ┌─ Light source from top-left           │
│  │                                       │
│  │   ████████████████                    │
│  │   █ Highlight edge █░                 │
│  │   █                █░                 │
│  │   █   SUBJECT      █░ ← Shadow edge   │
│  │   █                █░                 │
│  │   █████████████████░                  │
│  │    ░░░░░░░░░░░░░░░░░                  │
│  │        ↑                              │
│  │    Drop shadow (optional)             │
│                                          │
└──────────────────────────────────────────┘

Icon Design Rules

1. Light source: Always top-left (45°)
2. Outline: 1px black outline on all edges
3. Highlight: 1px white/​light edge on top and left
4. Shadow: 1px dark edge on bottom and right
5. Drop shadow: Optional 1px offset shadow (50% gray)
6. Hotspot: Center the visual mass (not geometric center)

Subject Matter Guidelines

Splash Screens & Banners

Typical Win31 Splash Screen

┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █                                             █ │ │
│ │ █    ╔═══════════════════════════════╗       █ │ │
│ │ █    ║    PROGRAM NAME v1.0          ║       █ │ │
│ │ █    ╚═══════════════════════════════╝       █ │ │
│ │ █                                             █ │ │
│ │ █         [   Large Icon 64×64   ]           █ │ │
│ │ █                                             █ │ │
│ │ █         Copyright © 1993                   █ │ │
│ │ █         Your Company Name                  █ │ │
│ │ █                                             █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘

Banner Dimensions

Banner Color Guidelines

Prompt Engineering for AI Image Generation

For Ideogram/​Stability AI

Icon generation prompt template:

32x32 pixel art icon, Windows 3.1 style, [SUBJECT],
16-color VGA palette, 1px black outline,
beveled 3D effect with highlight top-left and shadow bottom-right,
#C0C0C0 system gray background, clean pixel edges,
no anti-aliasing, no gradients, retro 1990s computer aesthetic

Splash screen prompt template:

Windows 3.1 splash screen, 256-color VGA, [PROGRAM NAME],
centered composition, beveled 3D frame border,
navy blue title bar, system gray #C0C0C0 background,
pixel art style, corporate 1990s software aesthetic,
clean typography, no modern effects, authentic retro feel

Banner graphic prompt template:

Windows 3.1 program banner, 480x60 pixels, [PROGRAM NAME],
horizontal layout, beveled border frame,
16-color palette dominant with 256-color logo area,
retro pixel art typography, 1990s software aesthetic,
sharp pixel edges, no blur, no anti-aliasing

Negative prompts (what to AVOID)

modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading

Tool Recommendations

Image Generation

Post-Processing

ImageMagick Commands

# Convert to 16-color palette with dithering
convert input.png -colors 16 -dither FloydSteinberg output.png

# Convert to exact Win31 palette
convert input.png -remap win31-palette.png -dither FloydSteinberg output.png

# Scale up pixel art (nearest neighbor)
convert input.png -filter point -resize 200% output.png

# Add 1px black outline
convert input.png -bordercolor black -border 1 output.png

Anti-Patterns

Anti-Pattern: Smooth Gradients

What it looks like: CSS linear-gradient() or airbrushed shading Why wrong: Win31 has NO smooth gradients—only dithered patterns Instead: Use ordered dithering between two solid colors

Anti-Pattern: Anti-Aliasing

What it looks like: Smooth diagonal edges, blended pixels Why wrong: Win31 icons have SHARP stair-stepped edges Instead: Hard pixel edges, visible steps on diagonals

Anti-Pattern: Too Many Colors

What it looks like: Full RGB spectrum, subtle color variations Why wrong: 16-color limit means bold, distinct colors Instead: Stick to the VGA palette, use dithering for in-between

Anti-Pattern: High Resolution

What it looks like: 128×128 or larger "pixel art" Why wrong: Real Win31 icons are 32×32 max Instead: Work at native size, scale up with nearest-neighbor

Anti-Pattern: Drop Shadows with Blur

What it looks like: box-shadow: 4px 4px 8px rgba(0,0,0,0.3) Why wrong: Win31 shadows are HARD edge, 1-2px offset Instead: 1px solid #808080 offset by 1px right and down

Quick Reference Card

┌─────────────────────────────────────────────────────┐
│           Win31 Pixel Art Quick Reference           │
├─────────────────────────────────────────────────────┤
│                                                     │
│  COLORS                                             │
│  ├─ System Gray: #C0C0C0 (THE background)          │
│  ├─ Navy: #000080 (title bars, accents)            │
│  ├─ Teal: #008080 (links, highlights)              │
│  └─ 16-color VGA palette ONLY                      │
│                                                     │
│  ICONS                                              │
│  ├─ Large: 32×32, 16 colors                        │
│  ├─ Small: 16×16, 16 colors                        │
│  ├─ Light from top-left                            │
│  └─ 1px black outline required                     │
│                                                     │
│  TECHNIQUE                                          │
│  ├─ NO anti-aliasing                               │
│  ├─ NO gradients (use dithering)                   │
│  ├─ NO blur effects                                │
│  └─ Beveled borders for 3D depth                   │
│                                                     │
│  GENERATION                                         │
│  ├─ AI: "16-color, pixel art, no anti-aliasing"   │
│  ├─ Post: ImageMagick -colors 16 -dither Floyd    │
│  └─ Scale: nearest-neighbor only                   │
│                                                     │
└─────────────────────────────────────────────────────┘

Integrates With

• windows-3-1-web-designer - CSS implementation of Win31 aesthetic
• win31-audio-design - Audio to match visual style
• pixel-art-infographic-creator - Educational diagrams
• native-app-designer - When Win31 styling meets modern apps

---

Core insight: Win31 pixel art is about CONSTRAINTS creating character. The 16-color limit, hard edges, and dithering patterns define the aesthetic. Embrace these limits—don't fight them.

Remember: Every pixel counts at 32×32. Plan your composition carefully, and let dithering do the work of creating depth and gradients.