Tokenized Design System
Separating intent from implementation — so quality and compliance scale by default, not by repeated effort.
Context
As products multiply, so do one-off decisions — color, type, spacing, components, eventually rules — until consistency erodes and every team re-solves the same problems. The stakes climbed with each role: brand churn across dozens of Roku OEMs, fragmentation across a large Google org, and finally in-vehicle UI where inconsistency isn't off-brand — it's a distraction-safety problem governed by NHTSA and Android Auto.
My role
A decade-long thread across four roles, ownership growing each time: I helped build the first abstraction at Roku, owned and scaled the system (Blox) and its governance tool (Carbon) at Google, architected the tokenized automotive system end-to-end at Amazon, and extended the thinking into AI behavior at 42dot. My constant collaborators were the engineers consuming the tokens and the teams adopting them — the system only counts if they use it.
Periodic Table of UI
An Atomic Design System
Composition
Approach
Three generations of one idea. Roku — an XML layer separating assets from implementation, so an OEM theme could swap without rewriting the UI. Google — JSON-defined vector assets driving shared SVG libraries and live specs, with Blox making components inspectable down to div/CSS and Carbon giving the org a governed source of truth. Amazon — a shift from base to semantic tokens, so type, color, layout, and theming adapt through rules, and the key move: encoding distraction-safety constraints (NHTSA, Android Auto) into the components themselves, so teams inherit compliance from the parts they reuse instead of re-solving it.
The hard call
Compliance-by-default over local flexibility. Baking safety rules into components removes some team freedom — which is the point: in a safety-critical context, guaranteed compliance beats per-team latitude. The governance model drew that line on purpose — strict where safety lives, open everywhere else.
Outcome
At Google, Blox reached 150+ designers (90% acceptance, 70% adoption across 200+ surveys) and gave back the hours designers lost hunting for specs. At Amazon, compliant-by-default components produced a projected ~35% design-to-development efficiency gain in annual planning — and became the foundation for the windowing, global-surface, and embedded-AI systems that followed.