Kaizen Design System

Design systems usually live in two disconnected worlds: a component library in code and a Figma library that slowly drifts away from it. Keeping tokens, components, and themes in sync across both is manual, error-prone work — and for most teams, building a proper system from scratch takes weeks before the first screen is designed.

I wanted to prove the whole pipeline could be one system: design tokens as the single source of truth, production React components built on them, and a Figma library that is generated from the same source instead of maintained by hand.

Solo, end to end — token architecture, React component library, documentation site, npm package, the Kaizen Forge theming playground, and the Kaizen Importer Figma plugin. Designed, built, and shipped at kaizendesign.site.

• Code and Figma had to share one source of truth — every token and component identical on both sides.
• Accessibility had to live in the foundations: four themes including high-contrast light and dark, readable out of the box.
• Adoption had to take minutes, not weeks — npm install for developers, copy-paste for designers.
• Built and maintained by one person, so the architecture had to stay lean and automatable.

I started with the token architecture: 588 primitive and 269 semantic variables across color, typography, spacing, radius, and motion, mapped to four themes — light, dark, high-contrast light, and high-contrast dark. On that foundation I built 50+ production-quality React components, from Accordion to Charts, documented with live examples at kaizendesign.site.

Then came the bridge to design: every foundation and component exports a portable payload. The Kaizen Importer Figma plugin captures a copied payload and rebuilds it natively in Figma — variables, icons, and components intact. Kaizen Forge closes the loop: a live playground for remixing themes and color palettes and watching the entire system re-skin in real time.

• Primitive → semantic token split: themes swap at the semantic layer, so components never need to know which theme is active.
• Payload-based Figma import instead of a hand-maintained library: copy on the site, paste in the plugin — the design file is generated from the same source as the code.
• Accessibility-ready themes as first-class citizens: high-contrast variants ship with the system, not as an afterthought.
• “Copy what you need, own what you ship”: distributed as the kaizends npm package with no lock-in.