Babylon: a design system I also ship

denOS works like an operating system: apps open in windows, sit in a dock and share one account, one search and one look. Each app is small and focused; the OS gives them the shell, the data layer and the design system, so a new app starts from a working desk instead of a blank page.

Memes (the name is a play on memory, not internet memes) is a notes app built on the Zettelkasten idea: short notes, tags and links between them, written in a rich editor that still stores plain markdown. The sidebar keeps what's in flow, what I'm pursuing and what I've reflected on, and Cmd+K finds any note in a keystroke.

• Markdown underneathA Tiptap editor with wiki links, embeds, callouts and tasks, stored as plain markdown you can export as a ZIP.
• Links both waysBacklinks on every note, a hover preview on every link, and notes that point at PNGnation references.

PNGnation is where references live: images, GIFs and videos in a private library, sorted into collections you can keep private or publish. A Chrome extension, paired with a one-time code and a capture-only token, saves anything from the web straight into the inbox. Inspiration stops living in forty browser tabs.

Around the two key apps sit smaller ones: Finder, a terminal with an AI chat mode, TextEdit, Paint, a synth and a soundboard, a CSS keyframe animation builder, the design system browser and a few games. They are how the system gets tested: every new app is a new chance for a component to break, and a reason to fix it once, for everyone.

denOS started with five retro themes and plenty of hardcoded values. I cut it down to one theme, Babylon, moved tokens into Tailwind's theme layer, and unified the hex and OKLCH colour layers into one set of semantic tokens.

These are the production components from denOS, rendered live in their v3 skin: actions, inputs, surfaces, data and motion, every variant, appearance and state side by side, the way the system is reviewed.

Before anyone, human or AI agent, creates a component, they walk a fixed order: reuse an existing component, then a variant of it, then a composition, and only at the end a new one, with a written review. UI is sorted into six levels, from foundations to one-off artwork.

• 01Rules agents can readA short routing file sends each task to the one note it needs, so Claude Code and Codex follow the system too.
• 02One way inApps import components only through the system's front door; reaching inside it fails review.
• 03Automatic checksScripts check the tokens and compare visual snapshots between builds, so drift is caught before it ships.
• 04Design in the real UIA local lab edits the theme inside the running product and promotes what works into the theme file. The system is also mirrored to Figma and synced back.

One designer can own a system end to end, from tokens to production, and set up AI agents to follow it instead of working around it. That is the same way I work on client products: the rules and the QA are part of the design.