Windows 3.1 Design System - Program Manager

A design system inspired by Microsoft Windows 3.1 (1992), featuring the iconic beveled 3D buttons, grey backgrounds, chunky UI elements, and the classic 16-color VGA palette.

Ready

640x480

16 Colors

I. Color Palette

The classic Windows 3.1 16-color VGA palette. Limited but iconic.

Light Gray

#C0C0C0 - Window BG

Dark Blue

#000080 - Title Bar

Dark Cyan

#008080 - Desktop

White

#FFFFFF - Bevel Light

Dark Gray

#808080 - Bevel Dark

Black

#000000 - Shadow

II. Typography

System fonts with a bitmap aesthetic. VT323 captures the MS Sans Serif feel.

4XL - 2.5rem / 40px

Program Manager

3XL - 2rem / 32px

File Manager

2XL - 1.5rem / 24px

Control Panel

XL - 1.25rem / 20px

Print Manager

LG - 1.125rem / 18px

Clipboard Viewer

BASE - 1rem / 16px

MS-DOS Prompt

SM - 0.875rem / 14px

PIF Editor

XS - 0.75rem / 12px

Windows Setup

PARAGRAPH TEXT

Welcome to Windows 3.1! This operating system provides a graphical user interface for your IBM-compatible personal computer. You can run multiple applications simultaneously using the Program Manager.

III. Spacing System

Compact spacing for efficient use of limited screen real estate.

--space-1

2px

--space-2

4px

--space-3

8px

--space-4

12px

--space-5

16px

--space-6

24px

--space-7

32px

--space-8

48px

--space-9

64px

IV. Buttons

Classic beveled 3D buttons with light top-left edges and dark bottom-right edges. Pressing inverts the bevel to create the "pushed in" effect.

Standard Buttons

Default Button (Focus)

Button States

Button Sizes

Action Buttons

V. Form Elements

Chunky form controls with inset borders and the classic "sunken" 3D effect.

Text Input

User Name:

Password:

Disabled:

Dropdown List

Drive:

Check Boxes Read Only Hidden Archive System (Disabled)

Radio Buttons Large Icons Small Icons List Details

Text Area with Scrollbar

Description:

Microsoft Windows operating system, version 3.1.

Copyright (C) 1985-1992 Microsoft Corp.

This product is licensed to:
Registered User
Organization Name

Product ID: 00000-000-0000000-00000

Windows 3.1 requires MS-DOS version 3.1 or later.
Minimum RAM: 1 MB (2 MB recommended)
Hard disk: 6-10 MB free space

For best results, use a 386 or higher processor.

VI. Cards (Program Windows)

Cards styled as classic Windows 3.1 program group windows with title bars.

Main

💾

File Manager

⚙

Control Panel

🖨

Print Manager

📋

Clipboard

Accessories

📝

Write

🎨

Paintbrush

💲

Calculator

📅

Calendar

Games

🃏

Solitaire

💣

Minesweeper

Dialog Card

System Properties

Microsoft Windows

Version 3.1

386 Enhanced Mode
Memory: 4,096 KB Free

VII. Data Table

File listing table styled like File Manager.

Name	Size	Date	Time
WIN.INI	14,752	03/10/92	3:10a
SYSTEM.INI	9,344	03/10/92	3:10a
PROGMAN.INI	1,024	03/10/92	3:10a
CONTROL.INI	2,048	03/10/92	3:10a
WINFILE.INI	512	03/10/92	3:10a
MOUSE.INI	256	03/10/92	3:10a

6 file(s) - 27,936 bytes

VIII. Badges

Status indicators using the Windows 3.1 color palette.

Standard Badges

Default Info Success Warning Error

Outline Badges

New Updated Beta

Usage Examples

v3.1 Connected Low Memory Disk Full 386 Enhanced

IX. Dialogs and Progress

Classic Windows dialog boxes and progress indicators.

Windows

⚠

Are you sure you want to delete 'GAME.EXE'?
This action cannot be undone.

Progress Bars

Copying files... 75%

Installing... 45%

Formatting disk... 100%

X. Design Principles

Core principles for authentic Windows 3.1 visual design.

Beveled 3D Effect
All interactive elements use the classic beveled border technique: white/light gray on top-left edges, dark gray/black on bottom-right. Pressed states invert this pattern.
16-Color VGA Palette
Stick to the authentic 16-color palette. Use Dark Blue (#000080) for title bars, Light Gray (#C0C0C0) for window backgrounds, and Teal (#008080) for the desktop.
System Font Aesthetic
Typography should evoke the MS Sans Serif bitmap font feel. Keep text sizes relatively small and avoid anti-aliasing effects.
Compact UI Elements
Windows 3.1 ran on 640x480 displays. UI elements should be compact but chunky, with clear visual boundaries. Every pixel matters.
Window Hierarchy
Everything lives in windows. Active windows have blue title bars; inactive windows have gray. Window controls (minimize/maximize) use the same beveled button style.
Consistent Borders
Use 2px borders consistently. Raised elements (buttons, panels) push out from the surface. Sunken elements (text inputs, lists) recede into it.
Group Boxes
Related controls should be grouped in labeled frames (group boxes) with etched borders. Labels sit on the top border line.
No Gradients or Shadows
Avoid modern effects like gradients, drop shadows, or transparency. The 3D effect comes purely from strategic border color placement.