explaingit

sakofchit/system.css

3,772CSSAudience · developerComplexity · 2/5Setup · easy

TLDR

A CSS library that makes websites look like they were built on Apple's classic black-and-white Mac operating system from the 1980s. Drop in one stylesheet and use simple class names to get retro Mac windows, buttons, and dialog boxes.

Mindmap

mindmap
  root((system.css))
    What it does
      Retro Mac styling
      CSS class names
      No JavaScript
    Tech stack
      Pure CSS
      npm package
      CDN link
    Use cases
      Portfolio sites
      Nostalgia UIs
      Themed demos
    Audience
      Web developers
      UI designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a retro 1980s Mac-themed personal portfolio site by adding one CDN stylesheet link and a few class names.

USE CASE 2

Wrap any HTML project in nostalgic Apple System 6 windows and dialog boxes for a playful, distinctive look.

USE CASE 3

Create a landing page or demo that stands out by mimicking a vintage 1980s Mac desktop aesthetic.

USE CASE 4

Add pixel-perfect retro Mac styling to a Bolt or Lovable app without writing any custom CSS.

Tech stack

CSSnpm

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1
Using system.css, write HTML for a retro Mac System 6 window with a title bar, close button, and body text inside.
Prompt 2
Show me how to add system.css via CDN to an HTML page and create a classic Mac dialog box with OK and Cancel buttons.
Prompt 3
Generate a portfolio page using system.css that looks like a 1980s Mac desktop with three windows showing About, Projects, and Contact sections.
Prompt 4
How do I override the default pixel font in system.css to use a custom font without breaking the other retro styles?
Prompt 5
Create a Mac System 6-style settings form using system.css classes for a text input, a dropdown, and a checkbox.
Open on GitHub → Explain another repo

← sakofchit on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.