The story of the OI Design System — how a design lead, a head of frontend, and an AI brain rebuilt the design layer of an enterprise MLOps platform. Token by token. Atom by atom. Wave by wave.
OICM+ grew fast — GPU monitoring, deployments, model registry, workspaces. The UI grew faster than anyone could govern it. Raw Ant Design defaults. Hex codes scattered like confetti. Every fix was a CSS specificity war.
One hierarchy. Every layer composes the one below it, and only the one below it. A molecule may not rebuild an atom. A page may not inline anything. Skipping a layer is a build failure, not a style choice.
The Lego Rule: atoms own their insides, never their outsides. Molecules own the gaps between atoms. Nobody owns their own margins — the brick wrapper does. Spacing became math: 24px at every canvas edge, 24px between bricks, 12px between rows. Always. Automatically.
Every visual decision resolves through a three-layer chain of CSS variables. Components may never touch a raw value — not a hex, not a px, not a font name. Change one semantic token and the whole product follows. That's how dark mode costs zero component code.
⟳ the card flips theme every few seconds — no component code involved, only token values.
Most design systems document what. Ours documents why — in a knowledge base built for both humans and AI agents. Every decision logged. Every rule numbered. Every failure mode registered so it can never silently return. An AI agent onboards in minutes and works like it's been here for months.
The dispatcher. Maps every task type to the minimum set of files an agent must load. No agent reads everything; every agent reads enough.
From "no primitives in component CSS" to drawer stack depth caps. Numbered, versioned, cited in every review.
Append-only institutional memory. Why the brick wrapper won. Why wrappers can't hold state. Why teal is alone.
23 catalogued silent-regression patterns, each with the grep that catches it before it ships.
Signed-off outcome contracts. A fresh-context AI verifier grades every build cold — the builder never grades itself.
The T0→T3 promotion ladder: prototype fast, promote what survives, document what promotes.
No big-bang rewrite. Every change shipped as a wave — scoped, preservation-gated, verified, logged. W11 to W112 and counting. These are the ones that changed everything:
Six waves fought over who owns outer spacing. W55 ended the war with one primitive: every brick wrapped, every row guttered, 24px everywhere by construction. Rules 82–84 locked it forever.
Four surfaces update together or the diff is rejected. Documentation drift, the death of every design system, became structurally impossible.
Ten filter patterns, eight pagination types and nine footer variants — audited, unified, rebuilt bottom-up as one slot-configured OITable family.
Recharts and ECharts behind a single facade with an engine prop. Side-by-side stories for every chart so the choice is made on evidence, not vibes.
The Resource Monitoring build crystallized six reusable patterns — ratified by audit, promoted to canon, documented in the brain.
We built a custom AI playground, then had the discipline to kill it — plain-English prototyping through Claude Code was better. Designers now author real Storybook stories by describing them.
A design system without taste is a parts bin. Ours ships its aesthetics as law — loved and hated, in writing, enforced by AI verifiers that grade every build cold.
The design system proved the vision; the frontend team made it production law. Together we rebuilt the component layer as @oi/ui — a clean monorepo package under Feature-Sliced Design, migrated atom by atom, lowest layer first. Consumers wait. Layers never skip.
Built the system, the brain, the rules, the taste. A hundred waves of prototypes, specs, and verifier-graded polish — and the AI workflows that let designers ship real code.
Led the engineering migration: FSD architecture, domain isolation, the oi-ui package, code quality law. The reason the design system's future is production-grade TypeScript, not a PDF.
One command synced the entire living library into Claude Design — not screenshots, not approximations: the real components, bundled from source, graded for fidelity, published to the whole team. Describe a page in plain English; get it back built from actual OI parts.
~/Project-Igor/mlops-fe ❯ /design-sync Which component tree? → both — oi-ui canonical, legacy fills the gaps ✔ reference storybook built (the real one — 30GB heap and all) ✔ converter self-heal loop · build 10 · exit 0 ✔ 219 previews generated · fidelity graded per component ✔ design system "OI UI" published to organization 220 components · 3,491 tokens · usage notes for Claude · zero drift
Dev ships a component → /design-sync → every designer's next prototype already has it. The loop is closed.
Same product. Same team. Three months. Different physics.
Led together by Igor · Head of Frontend Engineering & Mehrshad · Design Lead
with the OI frontend team — three months, executed excellently:
built on the DS-Brain, a hundred waves of work, and an unreasonable refusal to hardcode anything.