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

Devlog 5

Picked up right where Devlog 4 left off. It was finally time to touch something nobody had looked at since day one, the Terminal. Before any of that though, I had a genuinely interesting detour into why I can’t just load real websites in an iframe. It turns out most sites send headers specifically designed to stop other pages from embedding them. That’s also the real secret behind those slick “browser inside a browser” demos we sometimes see online. They’re either fully staged or quietly running an actual browser on a server somewhere and just streaming a picture of it back to you, good to know. Also good to know I’m not building a server anytime soon. Future Aiden can deal with that one… if he ever does.

The Terminal ended up being the most satisfying thing I’ve built so far. Real command parsing, arrow keys cycling through history and commands that genuinely do things instead of just printing text back at you. The command pin calculator actually pins an app. theme #ff6b6b actually repaints the whole OS live. It’s one of those features that finally makes the desktop feel interactive rather than just clickable

And then, almost immediately, the most expected yet unexpected bug. I’d spent all that time getting the commands working, the history system behaving and everything feeling right.. only to forget the single line that actually connects the Terminal to its window when it opens. Fully built but completely silent because of one missing function call

I closed it out by fixing a bug that’s been sitting in plain sight since the very first day of this project. Maximizing a window always left a thin strip of empty space hovering just above the taskbar because the math was quietly subtracting the taskbar’s height twice instead of once

Hopefully my last devlog before shipping…
..for now
sigh…

Devlog 4 - The Start Menu Ate My Week

I js wanted to give the start menu some real attention instead of leaving it as a sad little list forever. I did NOT expect that to become the biggest sprint of the whole project but here we are… Built a proper pin/unpin system. My first version was a bit problematic so I sat with it for a while then rebuilt it the right way with an actual right-click context menu and everything. It felt genuinely satisfying once it finally clicked. Then I somehow convinced myself to add six more features to give the start menu a new life: greeting header, search bar, pinned grid, recent activity, system widgets and a whole user profile footer. Small moments of panic…? Definitely.. then I broke it into phases so I didn’t drown trying to build an entire desktop in one sitting.

What nobody tells you about “just redesign the start menu” is how many times you’ll open the same file and stare at the same fifteen lines wondering why they look right and behave wrong. Trial and error ate most of my time which is fair enough. I also gave every icon its own little color badge, wired up a real “/” keyboard shortcut to match the hint I’d put in the search bar then made the whole thing Tab-and-Enter navigable since none of it was there before. Every “small fix” somehow turned into reopening three different files and rechecking things I was already convinced were correct which… more often than not, they weren’t. But that part actually felt rewarding. Little by little, the menu finally started feeling alive.

And then, the bugs… I found out my own Start button was secretly broken, well… not heartbroken like me, at least. Clicking it did nothing at all because an old line of code was quietly fighting a newer one inside the same click handler. THAT took way TOO long to spot. The sneakiest ones weren’t even logic bugs.. a single missing dash in a CSS variable. A class name one word off from the real HTML. Completely invisible unless you go hunting line by line, just quietly doing nothing the whole time.

The JavaScript is by far the most nerve-wracking, head-splitting experience ever. Absolute horror. I don’t wanna touch that file ever again. My eyes are bloodshot. The amount of time I spent just staring at the code, hunting down errors one by one is honestly concerning..

The menu actually works now, start to finish. Search, pinning, keyboard navigation and all. It cost way more blood than a start menu has any right to. Genuinely proud of this one precisely because of how much it fought back. Terminal’s turn next. And it should be VERY afraid.

Note: Snuck localStorage into the project too! Turns out users generally prefer their settings, notes and pinned apps to exist for longer than five seconds. Weird bunch.

Devlog 3 - Window Manager Upgrade

Came back to the window manager because it was bugging me. Windows could be dragged anywhere including straight off the edge of the screen with no way to get them back short of refreshing. No resizing at all. No snapping. All the stuff that makes an OS feel like an OS instead of a box you can shove around. So this was the sprint where I tried to fix that and it took way longer than I thought, mostly because of bugs I caused myself.

First up was resize handles, eight invisible strips around each window’s edges and corners so you can grab any side and resize from there. First try did nothing. Not an error, just nothing. Turned out my windows have overflow: hidden for the rounded corners and I’d put the handles slightly outside the window’s box so the browser was just clipping them out of existence along with their mouse events. Moved them inside the edge instead and they worked.

Then, while retyping some of it by hand, I wrote .querySelectorAll(".resize-handle".forEach(...)) instead of .querySelectorAll(".resize-handle").forEach(...). One parenthesis in the wrong spot and I was calling .forEach on a plain string instead of on the actual list of elements. Broke resizing AND window-opening at the same time since the error happened before the window even got added to the page.

Bounds clamping was a smaller fix but it’s the one I’m most relieved about. Windows can hang halfway off an edge now but they physically can’t disappear off-screen anymore, there’s always a grabbable strip of titlebar left no matter how far you drag. And then snapping, the one I was most excited for. Drag a window to the left or right edge and a ghost preview shows up where it’ll land, let go and it snaps into half the screen. Drag to the top and it maximizes. I almost skipped the detail where dragging a snapped window away from the edge pops it back to its old size first instead of just dragging the half-screen shape around looking weird but glad I didn’t, that’s the part that actually sells it.

Then dragging itself went completely haywire right after snapping started working, windows flying way faster than my mouse was moving, snapping in the wrong spots, clamping not holding. Assumed snapping broke it. It hadn’t. Found a line where I was adding the drag delta twice, once to calculate the clamped position and then again by accident when actually setting it.

Double-clicking a titlebar now maximizes/restores too, it felt wrong not having that once snapping existed. Window manager finally feels solid instead of held together with tape. Small wins matter! even the ones that take an embarrassingly long time to find.

Devlog 2 — Things Finally Started Moving

Picked this back up today and this was basically the point where I started adding JavaScript and making things actually work. Up until now everything was just static UI. At first, I was building app content directly inside JavaScript strings… which worked but got messy really fast. The big breakthrough was moving all of that into proper HTML <template> tags instead. Sounds small but it made the code way easier to manage. Don’t have to squint at quotation marks trying to understand layout and styles.

Got the window manager fully working! open, close, minimize, maximize, drag around. Each window now gets a taskbar button that reflects its state. Clicking a minimized window restores it, clicking an active one minimizes it. The Start menu can launch apps now and desktop icons work too. You can double-click an icon to open an app which is a small thing but makes it feel a lot more real. Also wired up the Settings panel. Toggles switch between ON/OFF, accent colors update the theme live and dark mode works (kind of a hack using CSS filters but it works). The Apps folder opens in its own window and can launch other apps from inside it. It’s all small features but they’re finally connected.

Spent way too long debugging why desktop icons weren’t responding. Turned out to be a typo in a template ID (“windows-template” vs “window-template”) combined with the script running before the DOM loaded. Very classic… huh? Wrapped everything in DOMContentLoaded and double-checked all IDs after that. Most of the apps (Browser, Terminal, Calculator, Mood Lamp, Fortune Cookie) are still just placeholders with static content. But the system around them feels solid now. Next step is making at least one of them actually do something interesting.. probably either a fake-command Terminal or a Mood Lamp with real color interaction.

Also: the Start button didn’t even have an icon before. Just an empty button sitting there. Fixed that. Small wins matter!

Devlog 1 — Starting Somewhere

Started working on AuriaOS today. Honestly, it’s pretty rough right now. I didn’t really try to build anything complex yet. Mostly just figuring out how to structure everything. Got a basic desktop layout in place with some icons (browser, terminal, notes, etc.), a taskbar and a start menu. None of it actually does much yet.

Spent a lot more time than expected just on CSS. Things like spacing, colors, trying to make it not look completely off. I set up a dark theme with variables so I don’t have to keep rewriting stuff later, which feels like it’ll help. Also added a window template system so I can reuse it when I actually start making apps. Right now it’s just sitting there but I think it’ll make things easier later.

There’s a settings page UI and an apps folder too but they’re basically just placeholders. Buttons don’t really do anything yet. Overall, it doesn’t look like much for a full day but I guess this is just the setup phase. Still trying to understand how everything should fit together.