index
why am i a bit obsessed with windows 9x?
marrow #9 | posted 19/06/2023
i currently work as an ux designer, a job i'm unqualified for but landed through the power of picking up figma extremely quickly, and that i find intelectually understimulating and thoroughly unpleasant, and might be the straw that breaks my wrists' back, but hey, it pays me (very little) monthly and i work from home. i think that answers some questions about why every website and app sucks to use nowadays.
the nature of the job has me fighting for my life to create layouts that are usable and nice looking while conforming to what people who earn several times more than me expect an app should look like (meaning mobile-first hell and getting blinded by white backgrounds). and i don't know man. i enjoy web design, but i make things that are frankly boring. i'd like to venture further into typography but for readability it doesn't really get much better than whatever old reliable sans serif we've been using for the past decades. i've talked about this before on the site: marrow #1 and marrow #8. it's a matter that haunts me.
anyway that's all beside the point, there's no segue here. i'm not sure what the point was. i like the look of windows 9x a lot. my tumblr is themed after it, i spent days tweaking three different linux themes into a fairly cohesive (but still imperfect) dark mode of windows 9x, including icons (thanks chicago95, windows95 and mint-y-dark-grey). i like looking at my little pixel mouse cursor even though i know it's crooked and asymmetrical.
but i never used windows 95/98. i grew up with xp/vista and win7 (the best version of the OS). and i love the look of them, but they kinda suck to use now, don't they? xp and vista are fun but were never pretty, and while 7 blew me away and i still think is very tasteful and stylish, i guess i like my OS to be more out of the way nowadays. in that regard, windows 10 is nice, with its flat colors and straight edges, but feels perhaps too safe and boring. there's a certain spice to 9x that i want to identify.
so, i reconstructed portions of 98.css with the intent of investigating the look a little closer, while being able to make some modifications here and there as well. here are some thoughts:
compact
i think a big strength of the look is how compact things are. the title bar is tiny! it knows it's mostly a vehicle for the minimize / maximize / close buttons (which i haven't emulated here), so it doesn't take up more space than necessary.
you know how a while back firefox got rid of its compact view? i hope you do — i hope you use firefox with ublock origin — but if you don't, yeah, firefox used to have three menu density settings: normal, touch (with larger margins) and compact. compact mode was bizarrely removed in 2021, and while it can still be enabled through about:config, its removal under the assumption it didn't get much use baffles me. i think higher overall resolutions and the fact mobile has so much vertical real estate has led to this trend of so much margin and padding everywhere. well, i personally have a 16:9 monitor and honestly just don't need my tabs to take up so much of my screen.
anyway, the color of the title / window bars of 9x gives them enough contrast to pop against the silver backdrops that they don't need to be particularly tall. in this in-article emulation, they might get somewhat harder to parse as headers (and i definitely got rid of the visual indication of hierarchy... sorry), but i feel the boundary of the window box makes up for that, keeping things grouped together.
skeuomorphism, neumorphism and the sensorium
by god we are starved for tactile sensations.
9x windows feel clunky. no soft neumorphism blurry shadows here, not even the classic skeuo black drop shadows. these are sharp and flat and intense. the windows don't really represent anything, but they look slightly raised. you press a button and it indents, and you just know they are little virtual mechanical keyboards. against the classic grey — which i don't necessarily miss on hardware, but um. maybe it'd be cute to have a beige phone. sorry. — it just gives a nice understated tridimensionality.
the secret to this effect is a few layers of inset box shadow, dark / light / less-dark / less-light:
background: #909090;
box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #eee,
inset -2px -2px grey,
inset 2px 2px #cecece;
i haven't quite cracked the code for darker colors. the midtone gray has more room in both directions for it to work.
background: #333;
box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf;
but let's try something colorful too! i think this looks cute in pink.
background: #f7b7c1;
box-shadow: inset -1px -1px #470000,
inset 1px 1px #FFF1F1,
inset -2px -2px #970000,
inset 2px 2px #FFDEDE;
maybe green? with a border for extra emphasis if you'd like ^_^
background: #C9A5AB;
box-shadow: inset -1px -1px #470000,
inset 1px 1px #FFF1F1,
inset -2px -2px #970000,
inset 2px 2px #FFDEDE;
border: 2px groove #148244;
ok things are getting rather silly. let's move on
background: #2E2D4D;
color: #CC8E47;
box-shadow: inset -1px -1px #0a0a0a80,
inset 1px 1px #ffffff80,
inset -2px -2px #33333380,
inset 2px 2px #ffffff50,
1px 1px #000,
-1px -1px #444376,
-2px -2px #CC8E47,
2px 2px #2E2D4D;
anyway yeah just a lil harsh inset shadows and we have a nice clunky window. active / pressed buttons just get the light-dark and less-light-less-dark colors swapped with one another, look:
click for css
box-shadow: inset -1px -1px #ffffff,
inset 1px 1px #0a0a0a,
inset -2px -2px #dfdfdf,
inset 2px 2px #808080;
um. i messed around with css for too long and lost track of what i was saying. well.
tiny monospace fonts babey
i think tiny monospace fonts are cute. they match the narrow title bars. that's it that's the whole section.
hellish to read and certainly not very accessible but we don't use them extensively, especially not if we're just emulating the general vibe for something like well, this. a little bit of tiny text on title bars that serve mostly as set dressing is ok. looks cute! i like miniatures!
boring grey!
speaking of accessibility, i'll repeat myself a bit: i love the boring #c0c0c0 silver backgrounds. i did get rid of them for my linux theming because they're far too bright for me, but i do love them. thing is, the way we use computers changed. we can't go back to the before days where dark modes weren't a thing. god computers as a whole are still too bright and too high contrast — i'm pretty light sensitive ok, i've got a contrast and accessibility rant locked and loaded at all times (yes high contrast is great for some people but hell on earth for others and it's high time we have a prefers-contrast: less that's remotely functional).
iconography
and of course, an easier to overlook aspect. i love my little 9x desktop icons so much. i have a soft spot for digital art of this era (look at susan kare's website from 2003 and tell me you don't want to eat it all up) (by the way, tangential, but i'd like to recommend amelie doree's videos, in particular the one about possessioner), i love dithering and restrictive color palettes. look at what i get to see whenever i open my start menu!
like the windows and buttons they also have a little bit of shading along the right and bottom edges, which is a lovely touch that makes them pop slightly from the background. the icons are simple due to their limitations, and i'm a sucker for the clunky isometric computer (which reminds me of habboo hotel of all things). later these would become the glossy and detailed aero-style icons, which i can also respect, but don't feel as iconographic as pixel icons do. but maybe it's just me not being a fan of that sort of intense high fidelity skeuomorphism.
all in all, anachronism is simply fun. it's fun to emulate old OSs, it's cute that i can mimic the aesthetics of an era while surrounded by all out modern comforts. there is no edenic computer to return to. although windows 7 kinda came close ← victim of nostalgia. i think that's the draw of fantasy computers like hypnospace outlaw too, as well as psx / n64 revival and 8-bit before that. just a little bit of pick-and-choose clunk and jank where it won't bother i suppose. and of course, there's also just the pure novelty of going against the grain >:)
index
