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.