Building One Visual Language Instead of a Dozen Accidents

Today's the day I stopped treating every page as its own separate design exercise. Up until now, each game and tool mostly got its own visual identity, built in isolation, on whatever day I happened to build it. Today's overhaul — glossy blue chrome header, folder-tab navigation, tile-grid lobbies, one consistent orange-and-deep-blue arcade look across the entire site — is the first time I've deliberately built a shared visual language instead of letting one accumulate by accident.

Why now, and not from the very first game

I don't think building a design system from the very first day would have actually worked. With one or two games, there's nothing yet to find a common language between — you're just guessing at a system for content that doesn't exist yet. It took having enough real pages built, each with its own slightly different visual choices, to actually see which patterns kept reappearing naturally and which ones were one-off accidents. The folder-tab navigation and the tile-grid lobby format weren't designed from a blank page today; they're closer to discoveries, pulled out of the pages that already existed and then applied consistently everywhere else.

Two colors had to divide the labor clearly

Orange and a deep blue are the two anchor colors across the whole site now, and giving them a clear division of labor mattered more than picking the colors themselves. Blue carries the site's structural chrome — the header, the primary navigation, the frame everything else sits inside. Orange is reserved for action and attention — buttons, badges, the things a visitor is actually meant to click or notice first. Mixing that up, using orange for structure and blue for action, would have technically used the same two colors but produced a site that felt visually noisy instead of organized, because color was no longer reliably telling you anything about what a given element actually was.

Per-game accent colors had to survive the unification, not disappear into it

Every game already had its own accent color before today, and unifying the site's chrome around orange and blue could easily have meant flattening all of that individuality away in the name of consistency. I didn't want that trade — a game's own accent color is part of how you recognize its tile in a crowded lobby grid at a glance, and losing that would make the games section feel more uniform but also more forgettable. The system that emerged keeps orange and blue for the site's own structural chrome while still letting each game and tool keep its own accent color for its tile, its icon badge, and its own page header. Two fixed brand colors for the frame, a wide palette for what's actually inside it.

Page transitions had to feel like the same site, not a reload

Adding animated page transitions today was as much a functional part of the design system as the colors were. A hard page reload, even a fast one, briefly shows a blank white flash between pages that breaks the illusion of a single continuous experience — for a split second, it looks like leaving the site and loading a different one entirely. A short transition animation covering that gap, timed to match the site's own color palette rather than a generic loading spinner, keeps every navigation feeling like moving between rooms in the same building instead of stepping outside and back in. It's a small technical layer on top of otherwise ordinary page loads, and it's doing a lot of the work that makes the unified visual system actually read as unified while browsing, not just when comparing two screenshots side by side.

Pixel exists because a system needs a face

Introducing a recurring mascot alongside a visual system, rather than as its own separate decision, was deliberate. A consistent color palette and navigation pattern make a site feel organized; they don't make it feel like it has a personality. A small recurring character — showing up in page transitions, in loading states, eventually in an inactivity screensaver — gives the whole system a face that ties the structural consistency to something warmer than just "the header is the same color on every page now." It's a small addition relative to the actual design system work, but it's doing real work making the consistency feel intentional and friendly rather than just tidy.

What a design system actually costs going forward

The honest trade-off is that every future game and tool now inherits real constraints it didn't have before today — the header stays blue, primary actions stay orange, tiles follow the established grid format. That's less creative freedom per individual page than the earlier, more improvised era of this site had. I think it's the right trade anyway. A visitor bouncing between a dozen different games and tools should feel like they're moving through one coherent place, not rediscovering the interface from scratch on every single page. Today's the day that became a deliberate goal instead of something I hoped would happen on its own.

It also means today's changelog entry undersells what actually happened. "Full visual redesign" is one line in the update log, and behind it is a genuine shift in how I think about every page that gets built from here forward — not "what does this page need," but "what does this page need, inside a system that already has opinions about color, navigation, and layout." That's a real change in constraint, and I think the site is going to be better for it, even on the days it means saying no to an idea that would have looked good in isolation but broken the consistency everything else now depends on. A design system is ultimately a set of promises made to whoever's visiting the site, and today is the day I started actually keeping them on purpose.