Week 5: Tearing down the CSS and giving RetroOS a real look

After the last submission, reviewer feedback said basically this: the JS and the 17 apps were solid, but the styling read like a generic dark-mode template. Soft glows, rounded glass cards, the kind of thing you get when you ask AI for a modern clean OS UI. Nothing you’d actually want to click.

So this week I tore out the template styling and rebuilt the look by hand, and reworked a big chunk of the backend myself.

The theme I Redesigned:

• Real 3D bevels instead of glow shadows. Windows, the start menu, taskbar tabs, calculator keys, memory cards, and the window controls (_, [], X) all use light-on-top / dark-on-bottom borders so they read as raised. Press one and the borders flip to inset and everything shifts down-right a pixel. Clicking finally feels like pushing a physical key.
• Pinstriped titlebars. Focused windows get a scanline drag-grip across the titlebar; unfocused ones dim way down so you always know what’s in front.
• Dithered wallpaper + pixel selection. The desktop got a retro dot-matrix grid and dashed selection marquees instead of the old rounded-glow look.
• Sunken panels. The clock, File Explorer path bar, and Notepad text area are inset 3D fields, the way a 90s OS treated text boxes.
• Tidied the variables down to one set of tokens so there aren’t six places to hunt for a color.

The back end (partially rebuilt by me): I replaced the clean AI template app structure (arrow-function IIFEs everywhere) with plain var App object definitions across all the apps, including the two new ones from the browser and system properties features. Same logic, much more human code. I also converted the two new apps that were still on the old pattern.

RetroOS is live: https://shritej-koneru.github.io/retroos/