Overview
Complete design system. Governs mobile/web apps, admin tools, marketing surfaces. Three years of continuous evolution. The system enforces decisions through automation. CI checks prevent token violations, component mismatches break builds, and automated contrast testing runs nightly.
Discipline
Product design · Research systems · Systems design
Client
MoreHarvest International
Location
Taiwan · Japan · Hong Kong · Singapore
Date
2023 - present
Team
Lead designer · Researcher · Frontend developer · Backend developer
Role and scope
Lead system architect. Defining token logic, component structure, documentation standards, and governance. Ongoing maintenance.
System scope:
Atomic tokens, component library with state variants, template patterns, dark mode/localization via semantic remapping, automated CI governance, cross-platform parity.
The problem
The companyhad no design foundation. Components drifted. Spacing, colors, and props were hardcoded. Every fix created new inconsistencies. Teams worked from memory, not a shared foundation. Design couldn't scale.
Approach
Building a design system requires structured phases. Foundation establishes tokens before components get built. Governance automation prevents drift. This documents how Moha Design System evolved from scattered interfaces to governed infrastructure: Token foundation → Component library → Templates → Multi-mode support → Automated governance → Production.
Every design decision became astructured token. Raw values separated from semantic meaning. --neutral-400 is raw. --text-secondary is semantic. Automated contrast checks in CI from start. WCAG AAA, or at least AA compliance structural.
Decision:
No raw values, no exceptions.
01
Token foundation
Built components in Figma, matched 1:1 in Storybook. Mismatches trigger CI failures.
Decision:
Component parity not optional.
02
Component library
Components combined into organisms. Forms became parameterized patterns. Increased velocity and eliminated repetitive decisions.
Decision:
Common patterns become templates.
03
Templates
Dark mode and localization are built as semantic token remaps, not duplicate themes.
Decision:
Modes are semantic remaps.
04
Multi-mode support
Every pull request runs token hygiene checks. Hardcoded values block merge. Contrast testing runs nightly.
Decision:
If the system can't enforce automatically, rule isn't worth having.
05
Automated governance
The system governs 3 product lines. Built over 3 years, simplified while supporting increased complexity.
06
Production
Challenges
Behavioral changes were the hardest. Dark mode drift, state ambiguity, and localisation edge cases exposed gaps.
Insights
The system works because it can't be ignored. The most valuable outcome: team velocity. The system created institutional memory.
What's next?
Automated changelogs, a public Storybook, and adaptive tokens beyond light/dark.