The '90s Computer-Ad Look, Without Faking an Operating System

If you remember computer ads from the early '90s, the Apple ones especially, you probably remember how calm they were. A big serif headline. A lot of empty page. One photo of a machine on a warm, off-white background. A few paragraphs of copy that sounded like a person wrote them. They sold technology by making it look like it belonged in a nice room.

That's the feeling I wanted for this notebook. Not the computer. The ad.

The concept I threw out

The first mockup went the other way. Full fake operating system: a menu bar across the top, windows with close boxes, and a little beige Mac sitting on the page. It was fun for about five minutes. It was also exactly the wrong message.

I build high-end websites. A site dressed up as a 1991 desktop says something else. It says "this guy fixes computers," and that's not the impression I want someone to leave with. Nostalgia is great as a flavor. As a costume it takes over, and everything on the page starts reading as a gag.

So the OS went. The menu bar, the fake icons, the little Mac: all of it. What stayed was the one piece that earned its keep.

What survived: the window card

The window card is the building block for nearly everything on the site: posts in a list, the short-version box, the sidebar panels, the recipe card. It's a quiet nod to the old windows without pretending to be one.

The recipe is short:

.card {
  background: var(--paper);
  border: 1.5px solid var(--window-edge);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.card .bar {
  background: var(--surface);
  border-bottom: 1px solid var(--window-edge);
  border-top: 3px solid var(--accent-teal);
}

A few details doing more work than they look like:

• The shadow has no blur. 4px 4px 0 is a hard, solid offset, like a printed drop shadow. A soft blur would make it look like a modern app.
• 1.5px, not 1px or 2px. It lands between a hairline and a cartoon outline, firm enough to hold its own against the cream.
• The colored top edge is how sections tell themselves apart. The short-version box gets apricot, the section list gets lilac, backlinks and recipe cards get sage, and project and writing collections get apricot and mauve. Same card, different stripe.

Behind the cards, the page has a faint dotted grid, done with a repeating radial gradient rather than an image:

body {
  background-color: var(--desktop);
  background-image: radial-gradient(var(--rule) .7px, transparent .9px);
  background-size: 12px 12px;
}

It reads like graph paper, or a cutting mat. Texture without noise.

The palette

I started from a set of Tailwind-style color scales, each running from very light to very dark: blackberry cream, watermelon, dark slate grey, wheat and electric aqua. The scales were a good place to explore. What shipped is smaller and calmer.

Token	Light	Job
--paper	#fcf4e9	Card and page surfaces
--ink	#263e40	Text, and the card edges
--surface	#f1d3a7	Window bars, wheat-colored panels
--berry	#903c74	Links, labels, the one loud color
--aqua	#09585d	Deep teal accents
--accent-teal	#367d80	Section edges
--accent-apricot	#d9a16e	Section edges, highlights
--accent-mauve	#a36185	Section edges
--accent-sage	#92b39b	Section edges
--accent-lilac	#a4a0c5	Section edges

The cream and the slate carry almost everything. Blackberry is the only strong color, and it shows up on links, labels and focus rings. The accents are all a little dusty on purpose, so the stripes on the cards read more like colored tabs in a binder than a traffic light.

Dark mode isn't an inverted light mode. The paper goes to a very deep teal-black (#131f20), the ink goes to cream, blackberry lightens to #d293bd so it still has contrast, and the hard card shadow turns into a deep berry (#481e3a). It follows your system setting by default, and there's a toggle if you'd rather pick.

Note

Both themes are just custom properties on :root. The cards never know which theme they're in. They only ever ask for var(--paper) and var(--shadow).

The type

Every font on the site is self-hosted, which I learned the hard way matters more than you'd think. Five families are in the kit, and three do nearly all of the work:

• Newsreader for headlines and body copy. It's an editorial serif, and it's the single biggest reason the site feels like a magazine page and not an app.
• Pixelify Sans for small labels, buttons and window bars. This is the one deliberately retro touch, and it's only ever used small.
• IBM Plex Mono for little bits of metadata and code-flavored details.

DM Sans and Libre Caslon Display round out the set.

That split is the whole trick, really. The pixel font is a pinch of salt. If Newsreader were the pixel font, you'd be back in the costume.

Tip

If you're chasing a retro look, pick one period detail and use it small and consistently. A pixel font on labels says '90s. A pixel font on paragraphs says "I couldn't stop."

The short version of the short version

Borrow the mood of the era, not its hardware. Warm paper, confident type, lots of space, and one or two small period touches used with discipline. The fake operating system didn't make it. The cards did.