Welcome to Macintosh.
A design system inspired by the classic Macintosh interface, spanning System 7 (1991) through Mac OS 9 (1999). Featuring the iconic Platinum appearance with horizontal-striped title bars, Chicago bitmap font aesthetics, warm grey surfaces, and the approachable, human-centered design philosophy that defined a generation of personal computing.
The Platinum appearance uses warm greys as its foundation, with limited accent colors. Unlike the 16-color VGA palette of Windows, Mac OS supported 256 colors (or millions) but kept the UI itself deliberately restrained.
Platinum Grey Scale
System Accent Colors
Classic Mac used Chicago (system font) for menus and UI elements, and Geneva for body text. These bitmap fonts gave the Mac its distinctive, friendly character. VT323 captures the bitmap aesthetic for display text, while Inter provides clean body readability.
A 4px-base spacing scale for consistent layout. Classic Mac interfaces were designed for small screens (512x342 to 1024x768) and used space judiciously.
Mac buttons use subtle 1px bevels and rounded corners -- softer than the chunky 2px bevels of Windows 3.1. The default/primary action button has a distinctive thick black border, a convention unique to the Mac. Pressing a Mac button inverts it (text goes white on dark) rather than just shifting the bevel.
Primary (Default Action)
Secondary (Standard)
Ghost (Minimal)
Accent (Highlighted Action)
States
Dialog Button Layout
Do you want to save changes to "Untitled" before closing?
Mac form controls use inset shadows to create the "sunken field" effect. Popup menus (dropdowns) use the same beveled style as buttons. Focus is indicated with a blue ring rather than by changing the control's background.
Text Inputs
Popup Menu
Checkboxes
Radio Buttons
Text Area
Four card variants reflecting different Mac interface patterns: window cards, flat content cards, Finder-style icon cards, and sticky note cards.
Window Cards
A basic text editor included with every Macintosh. Perfect for reading Read Me files, writing quick notes, and viewing PICT images.
Version 1.4 -- 52 KB on disk
Search your hard drive, network volumes, or the Internet. Find files by name, content, or date. Sherlock makes finding things effortless.
Version 2.1 -- 1.2 MB on disk
Write, compile, and run AppleScript scripts to automate tasks across your applications. The power of scripting made accessible.
Version 1.1 -- 380 KB on disk
Flat Content Cards
Mac OS 9.2.2
Built-in Memory: 128 MB
Largest Unused Block: 89.4 MB
TCP/IP: Using DHCP Server
AppleTalk: Active (Ethernet)
File Sharing: On
Finder Icon Cards
Note Card
Finder list view with sortable column headers. Clicking a row selects it with the system highlight color. Column headers use the same beveled button appearance as standard controls.
| Name | Date Modified | Size | Kind |
|---|---|---|---|
| System Folder | Wed, Jan 15, 1997 | -- | folder |
| Applications | Mon, Jan 13, 1997 | -- | folder |
| SimpleText | Thu, Oct 3, 1996 | 52 KB | application |
| Read Me | Wed, Jan 15, 1997 | 4 KB | SimpleText doc |
| Desktop DB | Wed, Jan 15, 1997 | 312 KB | Desktop Database |
| Disk First Aid | Tue, Aug 6, 1996 | 168 KB | application |
| TeachText | Mon, Apr 22, 1996 | 24 KB | application |
Status indicators and labels using the system accent colors. Badges use rounded pill shapes, a softer look than the rectangular badges of Windows.
Status Badges
Outline Badges
File Type Tags
System Tags
Mac alerts and dialogs. The Mac is famous for its alert dialogs -- from friendly informational messages to the dreaded "bomb" dialog for system errors. Inline alerts use a left-border accent for quick scanning.
Inline Alerts
Mac Dialog Alerts
Are you sure you want to empty the Trash permanently? You cannot undo this action.
Sorry, a system error occurred.
"Finder" error type 11
The Macintosh Human Interface Guidelines established principles that remain influential today. These are the core tenets of authentic Mac OS Classic design.