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

1. Pick the system you want from the list below.
2. Copy its token/style section into your project CSS.
3. Reuse component markup patterns from the showcase to get the full look quickly.

---

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

1. Point the agent to a specific system folder (e.g. styles/11-8bit-arcade/index.html).
2. Ask it to extract tokens (colors, typography, spacing, shadows, borders) into reusable variables.
3. Ask it to build your target component or page in that same visual language.
4. 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:

1. Mac System 7
2. Windows 95
3. Windows XP Luna
4. Mac OS X Aqua
5. Amiga Workbench
6. NeXTSTEP
7. BeOS
8. Teletext
9. CRT Phosphor
10. DOS CGA
11. 8-Bit Arcade
12. Frutiger Aero
13. Winamp Skin
14. GeoCities Web 1.0
15. Cassette Futurism
16. Vaporwave
17. Memphis
18. PS1 Tech
19. OS/2 Warp
20. Mac OS 9 Platinum
21. Web 2.0 Glossy
22. Game Boy DMG
23. Braun / Dieter Rams
24. Tron Vector
25. VHS Tracking
26. Risograph
27. IBM 3270
28. NetHack ASCII
29. TempleOS
30. BBS ANSI Art
31. Midnight Commander
32. Matrix Rain
33. btop Meters
34. Commodore 64 BASIC
35. Flat Design 2013
36. Glassmorphism
37. Neumorphism
38. Blueprint / CAD
39. Claymorphism
40. Brutalist Web
41. Swiss Style
42. Bauhaus
43. Pop Art
44. Op Art
45. Hypnagogic
46. Monochrome Zen
47. Default Browser
48. Wireframe Sketch
49. Glitch Databend
50. Y2K Chrome
51. Duotone Poster
52. Grid Paper
53. Maximalist 90s Banner

---

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.

1. Fork the repo and create a branch.
2. Add your system as styles/NN-your-style-name/index.html following the existing numbering and single-file format.
3. Include all tokens and at least one component example inline.
4. 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.