Abdallah Elraai

Case file Exhibit A·3

CV ↓

Exhibit A·3Syntheia (opens Syntheia in a new tab)

The design system, and holding it

A token set is a file until someone enforces it against the live build. I measured the drift, then closed it.

Matter
Syntheia (opens Syntheia in a new tab) — Legal-tech SaaS · enterprise → self-serve B2B/B2C
Role
Design systems · design-to-code · AI-leveraged fixes
Domain
MUI · React front end
Term
2025
  • Design systems
  • MUI
  • Design tokens
  • Design-to-code
  • AI-leveraged

I built and maintained an MUI-based design system — tokens and components standardised across the product. That part is ordinary. The part worth talking about is what happened next.

I swept the production build and counted what it was actually using. Twenty distinct padding values across fifteen thousand declarations. Three of them accounted for almost everything; the other seventeen were drift. The same sweep found a border-radius of thirty-three million pixels shipping in twenty-four places, invisible because at that size a rounded corner just looks like a straight edge.

Then I closed the gap where it was cheap to close. Small styling fixes shipped to the live React/MUI product with AI assistance — design-system corrections, layout bugs, and one reusable component. HTML, CSS, Tailwind, in a codebase I do not own.

I built the front end.I filed amendments to it.

I do not write production features and I do not own the codebase. The value is not the code — it is that a styling defect does not wait in a developer’s queue, and the system stops drifting between releases.

Drift audit — padding, measured in the live build 20 distinct values · 15,180 declarations
  1. 8px5,990
  2. 5px5,642
  3. 12px2,722
  4. 4px201
  5. 16px147
  6. 34px117
  7. 2px98
  8. 6px72
  9. 10px69
  10. +11122

94.6% of every padding in the product came from three values. The other seventeen were drift — and drift is what makes a system feel like it was built by six people who never met.

The same sweep caught border-radius: 3.35544e+07px shipping in 24 places — an overflowed calculation nobody could see, because at that size a rounded corner just looks like a straight edge.

Design tokens What the system says, and what the build did
  1. Eight published steps, and the sweep of the live build laid over them. Three values carried 94.6% of every padding — and the second-heaviest, 5px, was never on the ramp at all. Seventeen more were drift.
  2. Four radii, one of them a pill. The fifth is not a token — it is an overflowed calculation that shipped in 24 places, invisible because at that size a rounded corner just looks like a straight edge.
Padding values in build
20
Declarations swept
15,180
Covered by three values
94.6%
Drift values
17
Bad radius, occurrences
24
Handoff speed
+30%

Publishing a ramp is the easy half. The measurement is what turned “the spacing feels inconsistent” — an opinion anyone can argue with — into a number with a work item attached.

  • +30%

    Engineering handoff speed

On reflection — Measuring first changed the conversation. "The spacing feels inconsistent" is an opinion; "you are shipping twenty padding values and three of them cover 95%" is a work item.

Syntheia is under NDA. Every interface on this page is a redrawn abstraction — real structure and real decisions, no real screens and no client data.