Build a retro 1980s Mac-themed personal portfolio site by adding one CDN stylesheet link and a few class names.
Wrap any HTML project in nostalgic Apple System 6 windows and dialog boxes for a playful, distinctive look.
Create a landing page or demo that stands out by mimicking a vintage 1980s Mac desktop aesthetic.
Add pixel-perfect retro Mac styling to a Bolt or Lovable app without writing any custom CSS.
System.css is a CSS library that makes websites look like they were built on Apple's old System operating system from the 1980s. Specifically, it recreates the visual style of System 6, the last version of that OS to use a black-and-white interface before Apple introduced color displays. Think small pixel fonts, rectangular windows with close and resize buttons in the corners, and dialog boxes that feel like they belong on a Mac from 1988. Using it is straightforward. You add a single stylesheet link to your HTML page (either from a content delivery network or by installing it through the npm package manager), and then you apply specific class names to your HTML elements. A window class gives you the classic window frame, title-bar adds the strip at the top with a title and buttons, and form elements like inputs and buttons automatically pick up the retro styling. No JavaScript is involved, and the library works alongside any frontend framework you are already using. The library was created as a fun project, inspired by a similar tool called 98.css that recreates the look of Windows 98. The fonts used, Chicago and Geneva, are modern pixel-font recreations of the original Mac typefaces. Most default styles can be overridden if you need to adjust something for your specific project. The project is still described as being in beta, and some components may be incomplete. The full documentation and live examples are available on the project's GitHub Pages site. If you find something missing or incorrect, the author welcomes pull requests and issue reports.
← sakofchit on gitmyhub — every repo by this author, as a profile.
Verify against the repo before relying on details.