About retro-design-system

53 retro HTML/CSS UI themes for AI-assisted frontend development. Windows 95, CRT, vaporwave, DOS, arcade, mainframe, and more.

n

Published by

novusgfx

Visit View Profile

README.md

View on GitHub

Retro Design System

53 standalone HTML/CSS UI themes spanning iconic computing and design eras. Built for AI-assisted frontend development, rapid prototyping, and nostalgic interface design.

53 retro UI design systems covering Windows 95, CRT terminals, DOS CGA, IBM mainframes, vaporwave, 8-bit arcade, Mac OS X Aqua, GeoCities, Commodore 64, Tron, VHS, Risograph, Bauhaus, and more. Each one drops into your own project or feeds directly to an AI coding agent.

Live Showcase

Interactive explorer: https://novusgfx.github.io/retro-design-system/docs/
Source: docs/index.html

Quick Start

Open any folder's index.html directly in a browser, or run a local static server:

python -m http.server 8000

Then visit http://localhost:8000/.

Screenshot Preview

Mac System 7	Windows 95

Windows XP Luna	Mac OS X Aqua

Amiga Workbench

CRT Phosphor	DOS CGA

8-Bit Arcade	Cassette Futurism

Use Cases

AI-generated frontend themes: Use Claude, Codex, Gemini, or Cursor to generate pages and components that match a specific retro style.
Retro dashboard UI kits: Build admin panels, launchers, and control rooms with vintage OS aesthetics.
Game website design: Create game landing pages, overlays, and HUD-inspired interfaces using 8-bit and CRT motifs.
Prompt-to-UI workflows: Feed a style reference to an AI agent and get reusable HTML/CSS output faster.
Creative coding and portfolios: Give experimental web projects a nostalgic visual identity.
Design token extraction: Lift palettes, borders, shadows, and typography rules into your own component systems.

How To Use In Your Own Project

Pick the system you want from the list below.
Import its tokens from tokens/<slug>.css, or copy the token/style section from styles/<slug>/index.html.
Reuse component markup patterns from the showcase to get the full look quickly.

Programmatic Access

Two generated files make the collection scriptable and agent-friendly:

manifest.json: every system with id, slug, name, era, year, tags, path, and extracted palette. Use it to build pickers, filters, or feed metadata to an agent.
tokens/<slug>.css: the :root design tokens for each system, extracted so you can import the palette and typography without parsing the demo HTML.

Both are regenerated from the source styles, so they never drift:

node scripts/build-manifest.mjs   # rewrites manifest.json
node scripts/build-tokens.mjs     # rewrites tokens/*.css

Using With AI Coding Agents (Claude, Codex, Gemini, Cursor, etc.)

Point your agent at a style folder and ask it to generate UI in that visual language. Each system is one self-contained file: tokens, components, and patterns together. Agents can read and reproduce the style without extra context.

Suggested workflow

Point the agent to a specific system folder (e.g. styles/11-8bit-arcade/index.html).
Ask it to extract tokens (colors, typography, spacing, shadows, borders) into reusable variables.
Ask it to build your target component or page in that same visual language.
Ask it to avoid modern defaults that break the retro look.

Prompt template

Use `<your-project-path>/styles/11-8bit-arcade/index.html` as the style reference.
Create [component/page] in this same visual language.

Requirements:
- Reuse the same color palette, type style, border treatment, and spacing rhythm
- Match button/input/window styling patterns from the reference
- Keep accessibility in mind (contrast, keyboard focus states, semantic HTML)
- Output clean, production-ready HTML/CSS (or React + CSS)

Swap the reference path for any style in this repo. Popular picks:

styles/09-crt-phosphor (green phosphor terminal)
styles/10-dos-cga (MS-DOS cyan/magenta palette)
styles/15-cassette-futurism (80s sci-fi control panels)
styles/16-vaporwave (pastel synthwave aesthetic)
styles/27-ibm-3270 (IBM mainframe CICS terminal)

Included Systems

53 standalone systems in styles/. Browse them all in the interactive explorer or jump to source:

Project Structure

styles/
  01-mac-system-7/      index.html
  02-windows-95/        index.html
  03-windows-xp-luna/   index.html
  ...
  53-maximalist-banners/ index.html

Each numbered folder contains one index.html with embedded CSS tokens and component examples. No build step, no dependencies.

FAQ

Can I use this with Claude, Codex, Gemini, Cursor, or other coding assistants? Yes. Point your assistant to one of the style folders and ask it to generate a component or page in that visual language. The single-file format is agent-friendly by design.

Does this work with Tailwind, React, Next.js, or other frameworks? The base assets are plain HTML and CSS. Port tokens and patterns into any stack (Tailwind, React, Next.js, Vue, Svelte, Astro) by copying the CSS variables and adapting the markup.

Is this production-ready? These are expressive style references. Use them as a starting point and adapt for accessibility, responsiveness, and your brand.

Can I add my own retro style? Yes. See Contributing below. A new system is one numbered folder with a single index.html. If it covers an era or aesthetic not already included, open a PR.

What license is this under? MIT. Use it freely in personal and commercial projects.

Contributing

New styles, bug fixes, and improvements are welcome.

Fork the repo and create a branch.
Add your system as styles/NN-your-style-name/index.html following the existing numbering and single-file format.
Include all tokens and at least one component example inline.
Open a PR with a screenshot and a one-line description of the era or aesthetic.

Credits

Created by NovusGFX.

License

MIT License. See LICENSE.

retro-design-system