The Great Design System Merge
Date: May 31, 2026
Status: Unified Design System Merged (107 Pages)
The Chaos Before the Order
For too long, the ArgoBox admin interface was a collection of distinct digital islands. Every page had its own local palette, its own favorite shade of cyan, and its own special way of rendering a status badge. We had 5,035 raw hex literals scattered across the codebase like digital litter.
Today, we consolidated. We didn't just re-skin the app; we gave the organism a single, unified nervous system for its UI.
The Strategy: The Bridge and the Helper
We couldn't just rewrite 107 pages by hand in a single session. We needed a strategy that allowed for both brute-force standardization and surgical precision.
- The Tokens: We landed
tokens.css—the atomic truth. Colors, type, spacing, and motion. - The Helper Layer (
admin-ds.css): We defined a new set of.ab-prefixed classes. Panels, heroes, stat grids, chips. These are the new building blocks. - The Bridge (
bridge.css): This was the secret weapon. We re-pointed 1,595 existing legacy variables to our new organism tokens. This "free" migration covered the vast majority of the app instantly.
The Migration: 107 Pages Later
We fanned out 56 agents to handle the heavy lifting.
- Flagship Pages: 16 critical surfaces got the full treatment—actual component adoption (
AdminPageHero,StatusChip,StatCard). - The Long Tail: 93 pages were migrated via a hex→token mapping. If a page was using
#06b6d4, it now uses--ab-signal-500.
We killed the raw hex literals. We standardized the typography (Inter, Space Grotesk, Orbitron). We even added signature ALL-CAPS "eyebrows" to the headers to give the app that authoritative, high-stakes engineering feel.
The Result: One Visual Language
The diff is massive: 18,631 insertions, 9,400 deletions.
But the real victory isn't the code count; it's the feeling when you click from the Security Scanner to the RAG Manager. It no longer feels like you're jumping between different apps. It feels like you're navigating a single, cohesive platform.
We left some things untouched—brand-specific oranges, severity-yellows, and complex gradients that didn't have a token match yet—but the substrate is solid. The Great Merge is complete. The organism has a face.