nielssp 6 days ago | next |

I made something similar as well (that includes both 3.11, 95, 2000, XP, CDE and Mac OS 9, and also all the default color schemes of those): https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...

My focus was not so much on pixel perfect, but instead on creating something that would also work and look aesthetically pleasing on modern systems, like with higher DPI monitors and such. So one of the the things I did was to recreate all the icons and symbols in SVG.

I tried posting it as a Show HN when I added XP and Mac OS 9, but it didn't get much attention. Maybe the title of the project isn't as catchy.

netbioserror 6 days ago | root | parent | next |

Whoa. Insanely cool. Outstanding quality and theming, such a simple implementation. Only thing I'd want to see is theming for data tables, maybe even an interactive table that behaves like the lists and grids.

tiffanyh 6 days ago | root | parent | prev | next |

Love it; though the Windows 2000 theme seems a bit off (headings to heavy/bold).

Windows 2000 was the pinnacle of UI design IMO.

syx 6 days ago | root | parent | prev | next |

This project is absolutely gorgeous, you really did a great job at mapping each UI elements, really great work!

sphars 6 days ago | root | parent | prev | next |

This is amazing, thanks for this! I made a simple app using 98.css because that was the most feature-filled retro CSS library I could find. Going to try and use your 3.1 schemes :)

zachwill 6 days ago | root | parent | prev |

Holy crap, that Mac OS 9 one is fantastic!!!

phatskat 6 days ago | root | parent |

I’ve always had a soft spot for the older Mac OS design, and I really love this implementation! I spent sooooo much time in windows and Linux doing various things to try and get that feel back

prezjordan 6 days ago | prev | next |

Author here – happy to see this posted again!

This was my burnout recovery project and I wrote some thoughts on it recently https://notes.jordanscales.com/98-css-reflections

sphars 6 days ago | root | parent | next |

Thanks for your work on this! I recently used 98.css in my fairly simple web app[0] for a recreation of something from my childhood, and it worked beautifully for my purposes.

[0]: https://www.mathsheets.net/

Jackim 6 days ago | root | parent | next |

I'd suggest using checkboxes instead of radio buttons for the operator selection. It would be useful, I think, to have a mix of just addition and subtraction, or just multiplication and division, instead of having one option or all four.

lioeters 6 days ago | root | parent | prev | next |

> burnout recovery

I hope you're feeling better. Interesting how retro computing, like old games and operating systems, can be comforting and even healing. I've had similar experience with emulators - playing Gameboy and Nintendo games from childhood, or running Macintosh System 9.

Reminds me of Pico-8, SerenityOS, TempleOS. There's a common thread of a retro-style computing environment that can be entirely understood and controlled by the user.

I imagine there's deeper psychological dynamics to this, like a safe "sandbox" as a therapeutic tool.

It also says something about design with empathy and focus on user experience. There are so many hostile dark patterns these days in technology and society, that it's a relief to find some space (physical or mental) that's designed for your comfort.

wg0 6 days ago | root | parent | prev |

This is the most accurate replication I have ever seen of Windows 98. Wish there's one for Windows 2000 and Windows XP.

sbarre 6 days ago | prev | next |

I don't know if anyone else remembers this but in the late 90s, Microsoft had built-in CSS named colours that matched the Windows desktop theme/colours.

I have no idea if these still work (my IDE seems to say they do not, because everything is red).

    body {
      font-size : 11px ;
      color : windowtext ;
      background-color : appworkspace ;
    }
    a {
      color: menutext;
    }
    .headerBar {
      border-top    : 1px solid threedlightshadow ;
      border-left   : 1px solid threedlightshadow ;
      border-bottom : 1px solid threedshadow ;
      border-right  : 1px solid threedshadow ;
      background-color : threedface ;
    }
So you could build web UIs that matched the user's Desktop look and feel. We did this for our browser-based Intranet applications in 1998, which made them look a bit more "native".

sbarre 6 days ago | root | parent |

I did a bit of digging and it seems this was generalized into CSS System Colours at some point:

https://drafts.csswg.org/css-color/#css-system-colors

And all these old colours were deprecated:

https://drafts.csswg.org/css-color/#deprecated-system-colors

myfonj 4 days ago | root | parent |

That's nice resource, especially the "Tests" part showing Firefox keeps them all supported and Safari dropping most of them.

I have explored system colours including deprecated ones with intention to try to tap them into some more pleasant scheme (dimming canvastext for bordrers through color-mix() for example) and was interested about the "palette" we could use without defining own colours. Made a comprehensive "sampler" to test them [1,2] and Results were quite sad, especially outside Firefox [3].

[1] Dark: https://codepen.io/myf/pen/KKbVpmN [2] Light: https://codepen.io/myf/pen/jOXWPGV [3] https://x.com/myfonj/status/1769512951705149840

myfonj 7 days ago | prev | next |

NB, that style does not play well with non-native DPI (e.g. when you have monitor set to 150% scale); to see it mapped to physical pixels, try running this in the browser's console:

    with(document.documentElement.style){
      transform = `scale(${ 1 / devicePixelRatio })`;
      transformOrigin = 'top left';
    }
(multiply the scale by whole number to get it "crisply zoomed").

Still not 100% perfect, but much closer to intended rendering, I guess.

paulirish 6 days ago | root | parent |

Wow, your use of `with` is both terrifying and super fresh. I love/hate it.

phatskat 6 days ago | root | parent |

I’ll be honest, I didn’t know JS had `with`…off to MDN

myfonj 6 days ago | root | parent |

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

tl;dr is that `with` is a long deprecated statement that is good for casual "golfing" and raising eyebrows of JS-savvy folks. Does not work in the "use strict" mode (so in modules) and generally should not be used in any "real-world" production code, since it prevents many optimisations and could possibly make the code harder to grasp. But I guess for casual one-time console doodles it could be fine. Reportedly it is supported in all major JS engines, and I don't think it will be really removed in foreseeable future.

phatskat 5 days ago | root | parent |

I read the MDN page on it right after my comment and it’s fascinating, and also very understandable why it’s a Bad Idea™

akx 7 days ago | prev | next |

By eye alone, I'm pretty sure that is not MS Sans Serif as rendered in Windows 95 and Windows 98.

worble 7 days ago | root | parent | next |

Recreating old fonts in modern browsers is a hard problem

https://web.archive.org/web/20230603234837/https://vistaserv...

akx 7 days ago | root | parent |

Sure, but I refuse to call this a faithful recreation of the aesthetic until the fonts look correct. :D

On a related note, I did start working on some tools to work with legacy .FONs for this exact purpose earlier this year, but the project is iceboxed for now...

vintagedave 7 days ago | root | parent | prev |

They’ve also kept the pixelated nature. The XP style sheet linked in another comment [1] draws at high res for its text and shapes and so retains the feel of the UI without the constraints.

I — we? — like the 98 etc UI for its clarity and simplicity not its low resolution.

[1] https://news.ycombinator.com/item?id=42056921

exitb 7 days ago | root | parent |

The fonts are pixelated, but those pixels don't appear to align with the physical ones, so they're blurry in some places. Meanwhile, on a real 98 you either had crisp fonts, or neatly and consistently blurred by the CRT.

OuterVale 7 days ago | prev | next |

Also worth checking out: https://botoxparty.github.io/XP.css and https://khang-nd.github.io/7.css

pen2l 7 days ago | root | parent | next |

In both of these as well as submission link, one of the things that is clearly and strikingly different from modern UI is the lack of very abundant amount of padding space. I think it's almost the mantra that we need breathing room, e.g., between different options in a radio-group box list of items... but I find lesser space (as was characteristic of older UI's) to be more honest... more respectful to me as an end-user, more information-dense.

I don't want to discard whatever innovation has been done, but man I find myself being nostalgic of old UI quite often.

bityard 6 days ago | root | parent | next |

There's nothing preventing information-dense layouts today, except that the "flat design" crowd has decreed that no work spaces, toolbars, or controls shall have any borders or lines to delineate visual separation. Too much "clutter." So the only thing left is to separate things with vast volumes of whitespace which doesn't actually work all that well when you have to deal with different screen sizes.

blenderob 7 days ago | root | parent | prev | next |

With old 640 x 480 or 800 x 600 resolutions, the screen real estate came at premium. There wasn't much room to use generous padding and still make all the buttons and UI fields fit in the low resolution displays.

culi 6 days ago | root | parent | prev | next |

It goes back to an accessibility study that found that 1.5x line-height is the most readable.

As with a lot of things in ux accessibility research, these results were never replicated but the idea was seared into all our brains permanently. We know from research on fonts that ultimately, the most accessible font is the one the user is most used to. Sans vs. Serif vs. etc all don't seem to make a consistent difference across demographics. I suspect line spacing is something that's due for a relook

marginalia_nu 6 days ago | root | parent | prev |

The mouse has significantly higher precision than touch interfaces. That's a large part of why modern hybrid interfaces have such low density.

card_zero 6 days ago | root | parent |

Realistically, desktop interfaces will never stop trying to cater for touchscreen devices. We need a eugenics program to breed people with sharp pointy fingers.

ChrisNorstrom 7 days ago | root | parent | prev | next |

THANK you so much for the XP one. XP's UI is my favorite of all the Windows UIs. It had just enough modernity to feel sleek but still had contrast to be easily seen and read and understood.

Windows 7 UI was a bit too flashy and employed looks over readability and Windows 98 was too old fashioned and also suffered from a lack of contrast with all the grey.

mrighele 7 days ago | root | parent | next |

I never enjoyed the XP one. Somebody called the Fisher-Price ui, and I think the remark is not too off. I would always switch to the "classic" UI, which I think was the same as Windows 2000, which in my opinion is the best of all (it is a similar but different from the one of Windows 98, especially in color choice and icon)

stavros 7 days ago | root | parent | prev | next |

Was XP your first OS, by any chance? I really like the 98 UI, but that was my first and it evokes really nice memories.

selectnull 7 days ago | root | parent | next |

XP was my favorite as well, at least among the Windows. Not the first OS I used (that would be DOS 3). But it was the last MS OS I used.

stavros 7 days ago | root | parent |

Oh it was my favorite OS as well, it crashed way way less and did its job admirably, I just prefer the Windows 98 UI.

mrighele 7 days ago | root | parent | prev | next |

The one that looks like Windows 7 seems to be the most complete and has a bunch of stuff not found in the others, like progress bar or menus. In fact while I never liked the window decorations that 7 used, the rest wouldn't look bad on an electron app

agluszak 7 days ago | prev | next |

I'd claim that this is way better than what we've got after years of UX/UI "research" and "improvements".

And it's not that I'm some old boomer. In '98 I was one year old. I just hate buttons which don't look like buttons, tabs which don't look like tabs, text fields that you have to click to discover they're editable etc.

mrweasel 6 days ago | root | parent | next |

Have much UX/UI research been put into operation systems UIs since Windows 95?

I suppose Apple must have done some research for MacOSX, but in the past two decades it feels like features are just be thrown in, especially on mobile, with no concept of discoverability or consistency. More than anything I think companies desire to have "consistent branding" or "unique look" is to blame for much of this.

bityard 6 days ago | root | parent |

Yes, Apple at one time had a phenomenal Human Interface Guide for native OS X applications which was based on actual UX testing and research. Things like, "make your application features discoverable," "clearly delineate functional areas and controls," and "use verb+noun on action buttons." It was Good Stuff and it heavily informed a lot of UX decisions for the prominent Linux desktops at the time.

It's still around but I flipped through it recently and it seems to be a mix of the absurdly general ("don't build an app for a specific screen size") to the very specific (MacOS and iOS APIs). Maybe there's some gold buried in there still, but I'm not sure where to find it.

jandrese 6 days ago | root | parent | prev |

That said I'm not a fan of the black text over dark gray background.

Also, that website includes "show code" buttons disguised as ordinary text.

mixmastamyk a day ago | root | parent |

It’s a light/medium gray. Believe the idea was to deemphasize the ui in favor of the document/input fields.

ranger_danger 7 days ago | prev | next |

https://github.com/lolstring/window98-html-css-js

https://github.com/anthmn/hackertosh.css

https://github.com/AlexBSoft/win95.css

https://github.com/1j01/os-gui

https://github.com/themesberg/windows-95-ui-kit

https://github.com/andersevenrud/retro-css-shell-demo

https://github.com/arturbien/React95

https://github.com/botoxparty/XP.css

https://github.com/Gioni06/terminal.css

https://github.com/jdan/98.css

https://github.com/jianzhongli/csswin10

https://github.com/khang-nd/7.css

https://github.com/kristopolous/BOOTSTRA.386

https://github.com/lachsfilet/Renkbench

https://github.com/lolstring/window98-html-css-js

https://github.com/micah5/PSone.css

https://github.com/nostalgic-css/NES.css

https://github.com/npjg/classic.css

https://github.com/robbiebyrd/platinum

https://github.com/bryanbraun/after-dark-css

https://github.com/npjg/new-dawn

https://github.com/ritenv/retro-desktop

https://github.com/RoelN/c64css3

https://github.com/sakofchit/system.css

https://github.com/vinibiavatti1/TuiCss

https://code.divshot.com/geo-bootstrap/

lelanthran 6 days ago | root | parent |

https://github.com/lolstring/window98-html-css-js

https://github.com/anthmn/hackertosh.css

https://github.com/AlexBSoft/win95.css

https://github.com/1j01/os-gui

https://github.com/themesberg/windows-95-ui-kit

https://github.com/andersevenrud/retro-css-shell-demo

https://github.com/arturbien/React95

https://github.com/botoxparty/XP.css

https://github.com/Gioni06/terminal.css

https://github.com/jdan/98.css

https://github.com/jianzhongli/csswin10

https://github.com/khang-nd/7.css

https://github.com/kristopolous/BOOTSTRA.386

https://github.com/lachsfilet/Renkbench

https://github.com/lolstring/window98-html-css-js

https://github.com/micah5/PSone.css

https://github.com/nostalgic-css/NES.css

https://github.com/npjg/classic.css

https://github.com/robbiebyrd/platinum

https://github.com/bryanbraun/after-dark-css

https://github.com/npjg/new-dawn

https://github.com/ritenv/retro-desktop

https://github.com/RoelN/c64css3

https://github.com/sakofchit/system.css

https://github.com/vinibiavatti1/TuiCss

https://code.divshot.com/geo-bootstrap/

Cool!

Can someone please collect this into a github page so I can find it again in the future?

I know I'm being lazy and should do it myself, but I'd rather someone with more visibility do it.

[EDIT: Added the actual list to my comment so I can find it again in the future]

soul_grafitti 2 days ago | prev | next |

Admirable job. Just wondering - was the impetus for this anything to do with movie or TV prop making? It would certainly be terrific for rendering real time screens of '90s era data.

Aardwolf 7 days ago | prev | next |

This is really cool, the only thing I see is the font rendering looks choppy. An antialiasing issue I think, but it looks worse than some non-antialiazed fonts (like the EGA 8x14 pixels font) too

To be very pedantic: also the dropdown menu, when opened, looks very different than the original 98 style

uniq7 7 days ago | root | parent | next |

Chrome on Windows 10 here. The font rendering looks very similar (if not identical) to what I remember it in Win98 -- no antialiasing, 1px thick, very easy to spot the pixels on curved strokes, very easy to spot the pixels on bold style, etc.

The style looks incredible accurate to what I remember, although there are some differences:

- The opened dropdown menu, as my parent suggested.

- I don't remember textareas being resizable.

- I remember stepped sliders had little marks indicating where each step is. Only continuous sliders (e.g., the one in the Windows volume control) had no marks.

- The tabs don't look like as I remember from Win95/98, these ones look more like Win 3.1. Too much padding, the border is too thick, and the border radius is too big.

- In tables, the headers looked like buttons because they were actually buttons (you could press them to sort the table). However, here they are not clickable.

Aardwolf 7 days ago | root | parent |

Interesting, I tried zooming in now and when zooming in far enough the font does look alright!

It might be that it just happens to look bad on high resolution screens, and/or maybe some browser fractional scaling issue

As an example, one of the text fields on the page contains the word "Incredible". When zoomed in it looks fine, when zoomed at 100% the I and the n are stuck together to each other without any pixel in-between which is very ugly

AstroJetson 6 days ago | prev | next |

This is weirdly compelling. I have some retro info that I've wanted to put in a small website, this may be the thing that pushes it into the active list.

Thanks!

henning 6 days ago | prev | next |

This would be an improvement over modern UI design. It's much more clear what is clickable. That is why old Windows versions were designed like that.

sigmonsays 6 days ago | prev | next |

broken on firefox for me after clicking through a few times...

the left side gets shift over and hidden behind the white navigation box.

Does this happen to anyone else?