Moha DS
Tokens, components, and automated governance across 3 product lines.
Three product lines were shipping with no shared foundation. This project built the system that connected them, from raw tokens to governed components across every surface.
Role
Led design and prompt engineering, defining token logic, component structure, and automated governance from zero foundation to production system.
Team
Lead designer + prompt engineer, full-stack developer
The challenge
No design system existed, inconsistencies were everywhere, and multiple roles depended on a foundation that was clear , scalable , and adaptable.
The approach
First, observe how every role actually works . Then run workshops to get everyone on the same page . Finally, build an atomic token structure that adapts to each role's needs .
6
Product lines
5+
Roles supported
AA+
Accessibility standard
Token foundation
Every design decision was captured as a semantic token, with automated contrast checks running in CI from day one.
Norawvaluesinproduction.Noexceptions.
Component library
Every component was designed in Figma and matched 1:1 in Storybook, where any mismatch would trigger a CI failure.
Componentparityisnotoptional.
Templates
Recurring patterns became templates. Forms, layouts, and common flows were built once and reused everywhere.
Recurringpatternsbecometemplates.
Multi-mode support
Every mode, from dark theme to localization, was built as a semantic token remap, not a duplicate system.
Modesaresemanticremaps,notparallelsystems.
Automated governance
Every pull request ran automated token checks. Hardcoded values blocked 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, scaling without breaking.
Design Token Compiler
Transforms raw design tokens into platform-specific outputs: CSS custom properties, SCSS variables, and native formats. Proves the token layer works as a portable, framework-agnostic system.
- Challenges1/3
Changing behavior was harder than building components.
- Insights2/3
The real value was speed and a shared language across every role.
- What’s next3/3
Automated changelogs, a public Storybook, and adaptive tokens beyond light and dark.
Swipe to explore