tomevault-io 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
| Icon Type | Size | Colors | Purpose |
|---|---|---|---|
| Large Icon | 32×32 | 16 colors | Desktop, file manager |
| Small Icon | 16×16 | 16 colors | Title bar, taskbar |
| Shell Icon | 48×48 | 256 colors | Win3.11/early Win95 |
| Cursor | 32×32 | 2 colors (B/W) | Mouse pointers |
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:
| Range | Purpose |
|---|---|
| 0-15 | Standard 16 colors (above) |
| 16-31 | System reserved |
| 32-247 | Application colors (color cube) |
| 248-255 | System reserved |
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
| Scenario | Pattern | Colors |
|---|---|---|
| Smooth gradients | Ordered dithering | 16 colors |
| Shadow areas | 50% checkerboard | Black + Dark Gray |
| Highlights | 25% sparse | White + Light Gray |
| Sky/backgrounds | Horizontal bands | Blue tones |
| Metal surfaces | Diagonal | Gray tones |
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
- Light source: Always top-left (45°)
- Outline: 1px black outline on all edges
- Highlight: 1px white/light edge on top and left
- Shadow: 1px dark edge on bottom and right
- Drop shadow: Optional 1px offset shadow (50% gray)
- Hotspot: Center the visual mass (not geometric center)
Subject Matter Guidelines
| Category | Style Notes |
|---|---|
| Documents | Folded corner, lined interior |
| Folders | Tab on top, open or closed |
| Applications | Tool/object representing function |
| Settings | Gears, sliders, checkmarks |
| Hardware | Simplified silhouette |
| People | Bust view, simplified features |
Splash Screens & Banners
Typical Win31 Splash Screen
┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █ █ │ │
│ │ █ ╔═══════════════════════════════╗ █ │ │
│ │ █ ║ PROGRAM NAME v1.0 ║ █ │ │
│ │ █ ╚═══════════════════════════════╝ █ │ │
│ │ █ █ │ │
│ │ █ [ Large Icon 64×64 ] █ │ │
│ │ █ █ │ │
│ │ █ Copyright © 1993 █ │ │
│ │ █ Your Company Name █ │ │
│ │ █ █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘
Banner Dimensions
| Type | Size | Usage |
|---|---|---|
| Splash | 400×300 or 320×240 | Startup screen |
| About Box | 300×200 | Help > About |
| Setup Banner | 480×60 | Installer wizard |
| Toolbar Strip | 16×(16×N) | Button strip |
Banner Color Guidelines
| Zone | Colors | Notes |
|---|---|---|
| Background | #C0C0C0 or Navy gradient | System gray or branded |
| Text | Black on gray, White on navy | High contrast |
| Border | Beveled (white TL, black BR) | 3D effect |
| Logo area | 256 colors max | Central focus |
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
| Tool | Best For | Notes |
|---|---|---|
| Ideogram | Icons, logos | Good at pixel art style |
| Stability AI | Larger scenes | Needs more prompting for retro |
| DALL-E | Concepts | May need post-processing |
Post-Processing
| Tool | Purpose |
|---|---|
| ImageMagick | Color reduction, dithering |
| Aseprite | Pixel art editing (paid) |
| Piskel | Free browser pixel editor |
| GIMP | Index color conversion |
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.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.