Vintage design skill for AI agents

Overview

Vintage is a retro-computing design system skill for AI-powered development. It recreates the look and feel of 1990s desktop operating systems — silver-gray surfaces, teal accents, bitmap pixel typography, and the two-weight simplicity of an era when interfaces had beveled edges and 16-color palettes. This is Windows 95 meets modern web engineering: nostalgic on every pixel, production-ready underneath.

When you add this skill file to your AI coding tool, every component it generates looks like it was pulled from a 1995 desktop — pixel-font labels, silver toolbar backgrounds, teal title bars, and the unmistakable gray-on-gray material language of classic GUIs — while running on modern, accessible, responsive foundations.

Design tokens

Color palette

Vintage uses the iconic color combination of the classic desktop era — teal and silver, the two colors that defined a generation of operating systems:

The teal + silver pairing is one of the most instantly recognizable color combinations in computing history. Teal (#008080) was the default active title bar, selected text background, and highlight color across Windows 3.1 through Windows 98. Silver (#C0C0C0) was the surface — every dialog box, toolbar, menu bar, and panel sat on this exact gray. The unified secondary and surface token (both #C0C0C0) means the entire interface lives on silver, just like the original. Pure black text on silver recreates the crisp, high-contrast rendering of 90s bitmap displays.

Typography

Vintage uses Silkscreen for all body and display text — a pixel font designed to render at exact bitmap sizes, recreating the look of classic system fonts like MS Sans Serif and Chicago. This is the most constrained typographic choice on typeui.sh: only two weights are available.

• 400 (regular) — body text, labels, menu items, dialog content. The default voice of every 90s interface
• 700 (bold) — headings, button labels, title bar text, emphasis. The only weight step available

This two-weight limitation is authentic to the era. Classic desktop GUIs had exactly two font weights — normal and bold — and Silkscreen faithfully reproduces this constraint. The AI agent builds typographic hierarchy entirely through:

• Weight — regular for content, bold for headings and interactive labels
• Size — the six-step scale (12 / 14 / 16 / 20 / 24 / 32) provides enough range for hierarchy
• Color — teal for emphasis and interactive text, black for standard content

JetBrains Mono handles monospaced content — code blocks, log output, and technical data. In the vintage context, monospaced text evokes the terminal windows and Notepad instances that were essential to the 90s computing experience.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Classic desktop interfaces used tight, efficient spacing — toolbars were compact, dialogs were small, and every pixel of the 640x480 or 800x600 screen was precious. The 4px grid lets the AI agent recreate this compact, utility-driven density while maintaining enough breathing room for modern usability expectations.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Vintage recreates an entire computing era as a functional design system:

• Silver as the universal surface — there is no white. The background of every window, panel, toolbar, and dialog is #C0C0C0 silver-gray. This single decision instantly transports the interface to the 90s desktop. The AI agent never generates white backgrounds in the Vintage system
• Teal as the only color — in a 16-color world, the title bar teal was the single accent that made active elements stand out against the silver landscape. The AI uses teal sparingly and consistently: active selections, title bars, primary buttons, and focused inputs
• Two-weight typography — regular and bold. No thin, no light, no semibold, no black. The constraint is the authenticity. Every hierarchy decision must be solved with just these two weights plus size and color variation
• Black on silver — the text rendering of the era was high-contrast bitmap: black pixels on gray pixels. The skill enforces this pairing for all body content, creating the crisp, unsmoothed feel of pre-antialiased displays
• Compact density — the 90s desktop was designed for small screens. Toolbars were tight. Dialogs were minimal. The skill carries this density forward, producing interfaces that feel efficient and utilitarian rather than spacious and decorative

This makes Vintage a strong fit for:

• Retro-themed web applications and tools
• Indie games and game launcher interfaces
• Developer tools with a nostalgic twist
• Art projects and creative experiments
• Community forums and social platforms with retro identity
• Educational projects about computing history
• Novelty and entertainment products
• Any product that wants to evoke 90s computing nostalgia while remaining fully functional

Accessibility

Vintage enforces WCAG 2.2 AA compliance as a hard requirement. Nostalgic design must be usable for everyone. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — teal focus borders on the silver surface create strong, unambiguous indicators
• Maintain sufficient color contrast ratios, with particular attention to teal (#008080) against silver (#C0C0C0). Black text on silver provides a comfortable contrast ratio, and teal against silver also meets AA requirements for large text and UI components
• Prioritize accessibility over aesthetics when the two conflict

Pixel fonts present specific readability challenges at small sizes. The skill enforces minimum size thresholds for Silkscreen and ensures the AI uses JetBrains Mono for dense data contexts where bitmap rendering would reduce comprehension. The two-weight limitation actually supports accessibility: there's no risk of thin, hard-to-read weights because they don't exist in the system.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull vintage

2. The file is saved to .cursor/skills/vintage/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate 90s-desktop-style interfaces with Silkscreen pixel type, teal-on-silver palette, compact density, and classic GUI component styling.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Vintage guidelines — using silver surfaces everywhere, teal accents for active states, two-weight bitmap typography, and compact desktop-era spacing.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Vintage apart

Vintage is the most era-specific design skill on typeui.sh. While Pac-Man references arcade culture and Cosmic references sci-fi, Vintage recreates a specific moment in computing history:

• Silver surface, not white — the only skill where the default background is a color (#C0C0C0), not white or black. Every screen lives on the same silver-gray that defined a generation of desktop GUIs
• Teal as computing history — #008080 is the literal default active title bar color from Windows 95/98. Using it triggers instant recognition for anyone who used a computer in the 90s
• Two-weight pixel font — Silkscreen at 400 and 700 only is the most constrained type system on the platform. Two weights, bitmap rendering, and a six-step size scale recreate the exact typographic limitations of classic desktop interfaces
• Unified secondary + surface — both #C0C0C0, meaning the accent and the background are the same silver. The interface is built entirely within the silver world, with teal and black as the only contrast
• Compact density as nostalgia — the tight spacing isn't minimalism; it's the efficiency of an era when every pixel mattered on a 640x480 screen
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the retro-desktop aesthetic consistent whether the AI generates a single toolbar button or an entire windowed application