Contexts / Shad Abbaslou
Open to UK roles
~/work/oi-design-system
CASE FILE 001
Case file 001 · Enterprise AI platform · 2026 · 100+ shipped waves

A design system that remembers why

As Design Lead at an enterprise AI platform company, I rebuilt the product's frontend language with the frontend team: a token-governed component system, an institutional memory read by humans and AI agents alike, and a prototyping pipeline where anyone in the company builds with the production components by typing plain English.

Role
Design Lead
Company
Enterprise AI platform (ML platform product)
Timeframe
2026 · 100+ shipped waves
Built with
Head of Frontend Engineering + the frontend team
The problemA platform wearing raw defaultsAn enterprise ML product running on unconfigured Ant Design — four heights for one bar chart, !important ×70.
The moveTokens, rules and a memory3,491 tokens in a governed chain, 91 numbered rules, and a 378-document brain read by people and AI alike.
The proofNobody waits for a designerPlain English in, a working prototype in the production components out — in about 15 seconds.
01 · The before and after

The same dashboard, two years of debt apart

We didn't rip Ant Design out — the system replaced its surface token by token, wrapping it in OI-prefixed components, so users never met a cliff-edge release. Drag the line.

LIVE REBUILDThe same dashboard, before the system and after. Drag the line.NO SCREENSHOTS — BOTH SIDES ARE HTML
accelerators_v2 (final)draft?v3??
Total GPUs
128
Utilization
73%
Active jobs
42
Queue
8
WorkloadGPUUtil%Status
llama-70b-ft1691ok
embed-batch-cron464OK!
asr-eval-suite8nullwait
vision-preproc1NaNERR
height: 37px? !important ×70 3 greens
Acceleratorscanon
Total GPUs
128
Utilization
73%
Active jobs
42
Queue
8
WorkloadGPUUtil%Status
llama-70b-ft1691ok
embed-batch-cron464ok
asr-eval-suite8waiting
vision-preproc1error
1 teal 4 heights → 1 0 hardcoded
BEFORE · AS FOUND AFTER · CANON
A rebuild of the shipped before/after artifact — same mechanic, condensed for this page.DRAG · TOUCH · ← →
02 · Foundations — 3,491 tokens · 6 layers

No hex above this line

Every visual value resolves through a three-layer chain, and a component may never touch a raw value. That one prohibition is the whole trick:

PrimitiveThe raw valuea colour, a size — defined exactly once
SemanticWhat it means"accent", "canvas", "danger" — intent, not ink
ComponentWhat a button readscomponents see only this layer — 3,491 variables deep
Theme swapFlip the primitivesevery component follows — dark mode cost zero component code

Above the tokens sits the six-layer atomic hierarchy — and skipping a layer fails the build, not the review. The rest of the foundation is deliberately small: 24/12 brick spacing, one chrome accent, Inter for UI and Plex Mono for data, two motion curves.

LIVE REBUILDThe dependency ladder. Hover a layer.
PAGEScomposed product screenscomposed, never invented
TEMPLATESpage shells — slots onlyRule 35 · zero layout decisions
ORGANISMStables, shells, drawersRule 38 · eight-file contract
MOLECULESstat cards, filter barsRules 7–14 · Lego
ATOMSbuttons, inputs, badgesRule 6 · heights 24/32/40
TOKENS3,491 --oi-* variablesRule 4 · no hex above this line
Skipping a layer is a build failure, not a style choice.HOVER · TAB
03 · The Brain

A system that remembers why

Institutional memory, treated as a product: written once, rendered twice — prose for people, structured rules for machines — so a new engineer and an AI agent read the same canon before touching a component.

378 docs · 6,683 links Its spine is an append-only decisions log. Nothing is edited or deleted — a reversed decision is a new entry pointing at the one it overturns, reasoning attached. Ask "why is it like this" and you get an answer with a date on it. COMPUTED FROM THE VAULT MANIFEST · 17 SECTIONS

The vault itself is the one artifact this site does not serve: it holds the team roster, the full decisions log and the roadmap, and its own security note bars it from public deploys. That refusal is part of the design.

04 · Governance

91 rules, numbered like case law

Two rules were retired and their numbers stay vacant — the sequence carries its own history. Change ships as numbered waves, W11 past W110; there has never been a big-bang release.

The eight-file contracttypes, tokens, styles, stories and the rest — miss one file, no promotion
A fresh-context AI verifiergrades finished work cold, citing rule numbers in its findings
Screenshot chrome checksevery visual PR compared against the last, not remembered
05 · The AI chapter

We built our own tool, then killed it in a day

We built our own prototyping tool, shipped two phases, and killed it in a day when the evidence said no. DECISION W110 — THE FULL ENTRY, REASONING AND ALL, IS IN THE LOG

A browser sandbox can't import the production component library, so every prototype degraded into a CSS imitation of the system. The post-mortem went into the log like any other entry — and the replacement renders from the library itself:

PromptPlain Englisha designer or PM types a sentence
PipelineProduction componentsrendered from the library itself, not a copy of it
OutA working Storybook storyinside the product's own app shell
Loop~15 s per tweaktwo dozen production-track prototypes shipped so far

None of this hands taste to a model. The AI builds under the same constraints as any engineer — the rules, the tiers, the cold-eyed verifier — and when it refuses a request because a component doesn't exist, that refusal routes back to design as a demand signal. The last piece was teaching: an interactive atomic-design class for the whole company, public below as Everyone Builds.

06 · The evidence

Nothing below is a screenshot

These are the actual artifacts — the story site in its own tokens, the deck of UX problems that produced the rules, the class that taught the company to build — served from this domain, running live inside this page.

LIVE ARTIFACTFrom Chaos to Canon — the story site, in its own tokens. This is the before/after page; drag the line inside it.
Enter the artifact — full screen →
LIVE ARTIFACTThe token foundation — 3,491 properties, click any swatch to copy it.
Enter the artifact — full screen →
LIVE ARTIFACTThe UX Files — 44 slides, 20 playable problems. Arrow keys work.
Enter the artifact — full screen →
LIVE ARTIFACTEveryone Builds — the interactive class, six playable labs.
Enter the artifact — full screen →
The full story site → The presentation → The full story · 8 chapters → The component library → The atomic system → The prototyping pipeline →
07 · Outcome

Nobody waits for a designer any more

3,491CSS custom propertiesCOUNTED FROM THE TOKEN SHEET
91numbered rulesTWO RETIRED · NUMBERS KEPT
378 / 6,683brain documents / cross-linksFROM THE VAULT MANIFEST
~15 sprototype iteration loopPLAIN ENGLISH · STORYBOOK OUT

The measure of the system is who uses it. Nobody waits for a designer to try an idea any more — a PM with a sentence of plain English gets a working prototype in the product's own components — and the design conversation moved from pixels to rules: when we disagree now, we cite a number, look up why it exists, and either follow it or retire it in the log.

Source notes

  • Token count (3,491) taken from the system's own token page.
  • Brain figures (378 documents, 6,683 cross-links, 17 sections) computed from the vault manifest.
  • Wave and rule numbers (W11–W110+, 91 rules with two retired) from the append-only decisions log.
  • Company and product anonymised; the artifacts are served in full on this domain — the story site, the deck and the class, embedded above. The DS-Brain vault itself stays internal, deliberately.