OpenInnovation · OICM+ · 2026
The OI Design System
How we rebuilt the way our product looks, feels, and gets built.
Led together by Igor · Head of Frontend Engineering & Mehrshad · Design Lead
The starting point
Our product is made of screens.
Deployments
GPU Monitoring
Model Registry
Workspaces
…dozens of them. Every one built by hand.
The pattern
Every screen uses the same ~20 parts.
Deploy model
Search workloads…
the same parts, over and over, on every screen
The problem
Except everyone built their own.
Deploy
Deploy
Deploy
3 teals
heights 28 / 36 / 44
!important ×70
919 files drifting
The idea
A design system: build once. Reuse everywhere.
Deploy
Deploy
Deploy
1 teal — #1daf9c
4 heights — 24 / 32 / 40 / 48
0 hardcoded
Step 1 — tokens
Give every value a name.
component
--oi-button-primary-bgsemantic
--oi-bg-brandprimitive
--oi-color-teal-600 #1daf9c0design tokens · color · space · type · radius · motion
The dividend
…and dark mode became free.
GPU UTILIZATION
73.2%
node-a4 · 8× H100● healthy
CLICK TO FLIP THEME
same component, zero component code — only token values change
Step 2 — composition
Small parts compose into bigger parts. Strictly.
TOKENS3,491 named values — color · space · type · radius
ATOMSOIButton · OIInput · OITag · OIBadge
MOLECULESOIFormField · OIKPICard · OISearchBar
ORGANISMSOITable · OISidebar · OIChart
TEMPLATESOIPageTemplate · OIModal · OIDrawer
PAGESDeployments · Monitoring · Registry
Layout
Even spacing is math.
24px edges · 24px between columns · 12px between rows — owned by the wrapper, never the component
Typography
Typography has two voices.
Deployments overview
Inter = voice
Plex Mono = data
mono never in headings
The taste contract
Taste, codified.
Loved
Hated
✓Restraint — fewer, better elements
✗Gradients & sparkles — decoration as noise
✓Teal-only chrome — one accent, everywhere
✗Mono headings — data voice misused
✓
md by default — 32px unless earned✗Partial executions — half-done is undone
✓Lit from above — calm, dimensional surfaces
✗Hardcoded values — every one is drift
departures need Design Lead sign-off, recorded in the decisions log — taste with an audit trail
Step 3 — memory
The Brain: a design system that remembers why.
0 docs
0 connections
0 rules
append-only decisions log
Enforcement
An AI grades every build. Cold.
builder→
compliance report→
FRESH verifier · no memory
PASS
FAIL
on FAIL: fix bottom-up → re-verify
23 registered failure modes · each with a one-line trap-grep
Delivery
100+ waves. Zero big bangs.
W38 · doc contract
W55 · brick wrapper
W74 · tables 37→1
W83 · dual-engine charts
W106 · monitoring canon
W110 · the pivot
every wave: scoped · preservation-gated · cold-verified · logged in the Brain
W110 — the pivot
We even killed our own tool.
oi-lite playground
DELETED
Claude Code was better — so we had the discipline to delete our own product in a day.
The partnership
Design × engineering: one language.
Design canon
3,491 tokens · taste contract
spacing law · two type voices
Mehrshad · Design Lead
Engineering law
FSD architecture · domain isolation
atom-by-atom migration · typed APIs
Igor · Head of Frontend Engineering
@oi/ui220 components · one source of truth
Case study — W74
The tables tell the story.
0consumers
0filter patterns
0pagination types
0footer variants
↓
workloadgpuutilstatus
trn-llama3-ft8× H10081.4%running
inf-embed-042× A10044.0%running
dpl-8f3a21-a41× L40S12.7%scaling
rows 1–3 of 2,148◂ 1 2 3 … ▸
W83 — charts
Every chart. Two engines. One API.
Recharts
ECharts
evidence-based engine choice · zero consumer rewrites · drift between engines fails review
The payoff
Designers now prototype by typing English.
❯
✓ resolved 11 components from @oi/ui
✓ wrote _demos/GpuDashboard.stories.tsx — real components, real shell
⟳ rendering in Storybook…
128GPUs online
81.4%avg utilization
2,148workloads
3alerts
utilization · 7 days
workloads
trn-llama3-ftrunning
inf-embed-04running
dpl-8f3a21-a4scaling
Distribution
One command put the system into Claude Design.
✓ reference storybook built
✓ converter self-heal · 10 packages built · exit 0
✓ 219 previews graded
✓ published — "OIUI"
The system, whole
The loop is closed.
dev ships
/design-sync
Claude Design updates
anyone prototypes
handoff → Claude Code
verified · merged
Design and code cannot drift — drift has no place to live.
The delta
Three months. Different physics.
3 teals
1
chrome accent
any height
4
control heights
!important ×70
0
specificity wars
0
220
components
0
3,491
design tokens
0
91
written rules
days
minutes
idea → prototype
What it means
What it means for you.
Designers
- Prototype in minutes, in plain English
- In-system by construction — no redlines
- Real components, real shell, every time
Engineers
- One library — typed, tokened, verified
- Fix once at the atom, heal everywhere
- Cold-graded quality, not opinion battles
Product & leadership
- One language across disciplines
- Zero drift between design and code
- AI-ready by design, not by retrofit
The OI Design System
Executed excellently.
Led together by Igor · Head of Frontend Engineering & Mehrshad · Design Lead — with the OI frontend team · 3 months