gitwtfhub

wtf is system.css?

sakofchit/system.css — explained in plain English

Analysis updated 2026-06-26

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

TL;DR

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

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

Why would anyone build with this?

REASON 1

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

REASON 2

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

REASON 3

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

REASON 4

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

What's in the stack?

CSSnpm

How it stacks up

sakofchit/system.cssapachecn/hands-on-ml-zhyouneslaaroussi/ui-buttons
Stars3,7723,7833,760
LanguageCSSCSSCSS
Setup difficultyeasymoderateeasy
Complexity2/51/51/5
Audiencedeveloperresearcherdesigner

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Wtf does this do

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.

Yoink these 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.

Frequently asked questions

wtf is system.css?

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.

What language is system.css written in?

Mainly CSS. The stack also includes CSS, npm.

How hard is system.css to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is system.css for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.