Devlog: Reworking AuriaOS’s Visual Identity

I thought AuriaOS was ready to ship. The window manager was working, apps launched, windows could be dragged, resized, minimized and restored. And the logic was solid.

Then the project got flagged as AI-generated, well I wouldn’t say AI-generated but maybe traits similar to that of one. It wasn’t because of the code but because of the UI.

Looking back, I understood why. The dark navy background, teal accents, frosted glass, soft glows and identical rounded corners looked a lot like the visual style that’s become common in AI-generated interface concepts. Those chosen elements together, they unintentionally resembled that aesthetic.

So I decided to redesign the visual system without touching the underlying functionality!

Redesigning the UI

The HTML and Javascript mostly stayed the same but most of the CSS was reworked.

• Replaced the glassy navy and teal theme with a warmer ink and brass palette
• Split the single border radius into multiple sizes so controls, windows and tiles each have their own geometry
• Removed glow-heavy styling in favor of flat panels, subtle borders and offset shadows
• Simplified typography by using JetBrains Mono for the interface with Fraunces reserved for the Start menu greeting
• Replaced decorative gradients with a subtle SVG grain texture
• Added small details like a window seal, custom text selection and distinct hover treatments across different UI regions
• Swapped macOS-style traffic-light controls for simpler outlined window buttons

My goal was simple, it wasn’t to make the UI less polished, it was to give it a clearer identity.

Bugs I Found Along the Way

Rewriting and going through every CSS rule also uncovered a few real bugs

Broken resize handles

Some resize handle selectors accidentally used descendant selectors instead of grouped selectors so several resize directions silently stopped working

Invisible desktop

Adding overflow: hidden exposed another issue: #desktop never had an explicit height. Because every child was absolutely positioned, the container collapsed to zero height and clipped everything inside it. Restoring width: 100% and height: 100% fixed it immediately

A backwards theme toggle

The old “Dark Mode” toggle now made the already-dark interface lighter so i renamed the user-facing option to Light Mode while keeping the internal setting unchanged

Looking Back

Getting the project flagged was frustrating but it pushed me to reconsider the design instead of just accepting my first version. The redesign gave AuriaOS a stronger visual identity and the careful review of the stylesheet ended up revealing several bugs that had gone unnoticed during the rewrite. In the end, the project became better both visually and technically