Moha DS
One foundation for 6 product lines. The rules enforce themselves.
What started as a component library became how the company ships. Six product lines now start from one governed foundation, and the rules hold without anyone policing them.
Role
Lead system architect. I defined the token logic and the component structure. I built the automation that enforces both.
Team
Lead designer, researcher, frontend developer, backend developer
The challenge
Three product lines were shipping with no shared foundation . Each fix caused new mismatches. Each team worked from memory.
The approach
Watch how each role actually works , agree on one shared language, then build tokens that hold that agreement in code.
6
Product lines
5+
Roles supported
AA+
Accessibility standard
Token foundation
Every decision lives in a semantic token.
Norawvaluesinproduction.Noexceptions.
Component library
Every component exists twice, Figma and Storybook. A mismatch fails the build.
Componentparityisnotoptional.
Templates
Forms, layouts and flows built once as templates.
Recurringpatternsbecometemplates.
Multi-mode support
Dark theme and localization are a token remap, not a second system.
Modesaresemanticremaps,notparallelsystems.
Automated governance
A hardcoded value blocks the merge.
Naming conventions camelCase components, kebab-case tokens.
Naming conventions camelCase components, kebab-case tokens.
Contribution checklist No hardcoded values. Owner review required.
Contribution checklist No hardcoded values. Owner review required.
Review and approval Design and engineering sign-off on every PR.
Review and approval Design and engineering sign-off on every PR.
Token compliance Foundations and every component from atoms to templates reference tokens.
Token compliance Foundations and every component from atoms to templates reference tokens.
Ifthesystemcan'tenforceitautomatically,theruleisn'tworthhaving.
Production
Six product lines, one governed foundation.
- Challenges1/4
Changing behavior was harder than building components.
- Insights2/4
The real value was speed, and a shared language.
- What wasn’t built3/4
A formal onboarding program. People learned the system through pairing and PR reviews. Enforcement taught the rules, but a real curriculum would have spread them faster.
- What’s next4/4
Automated changelogs, a public Storybook, and tokens beyond light and dark.
Swipe to explore