| name | win31-pixel-art-designer |
| description | Expert in Windows 3.1 era pixel art and graphics. Creates icons, banners, splash screens, and UI assets with authentic 16/256-color palettes, dithering patterns, and Program Manager styling. Activate on 'win31 icons', 'pixel art 90s', 'retro icons', '16-color', 'dithering', 'program manager icons', 'VGA palette'. NOT for modern flat icons, vaporwave art, or high-res illustrations. |
| allowed-tools | Read,Write,Edit,Bash(convert:*,magick:*),mcp__ideogram__generate_image,mcp__stability-ai__* |
| category | Design & Creative |
| tags | ["pixel-art","icons","retro","windows","90s","dithering"] |
| pairs-with | [{"skill":"windows-3-1-web-designer","reason":"Visual + CSS Win31 experience"},{"skill":"win31-audio-design","reason":"Complete retro multimedia"},{"skill":"pixel-art-infographic-creator","reason":"Diagrams and educational graphics"}] |
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
.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 input.png -colors 16 -dither FloydSteinberg output.png
convert input.png -remap win31-palette.png -dither FloydSteinberg output.png
convert input.png -filter point -resize 200% output.png
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.
