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 design decision lives in a semantic token. Contrast checks ran in CI from day one.
Norawvaluesinproduction.Noexceptions.
Component library
Every component exists twice, in Figma and in Storybook, matched 1:1. Any mismatch fails the build.
Componentparityisnotoptional.
Templates
Forms, layouts, and common flows were built once as templates and reused everywhere.
Recurringpatternsbecometemplates.
Multi-mode support
Dark theme and localization. Each mode is a token remap, not a second system.
Modesaresemanticremaps,notparallelsystems.
Automated governance
Every pull request runs token checks. 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 share one system. Every new project starts from the same governed foundation.
Design Token Compiler
Turns raw tokens into CSS custom properties, SCSS variables, and native formats. Proof the token layer is portable to any platform.
- Challenges1/4
Changing behavior was harder than building components.
- Insights2/4
The real value was speed and a shared language across every role.
- 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 adaptive tokens beyond light and dark.
Swipe to explore