Profile imageMohammadmehdi Yadegarifard (Mehyad)

Kit Design System

Open-source component kit with tokens, docs, and dark mode used across internal products.

Design SystemsReactTypeScript

Overview

Kit is an open-source React component kit with design tokens, documentation, and first-class dark mode. It powers internal products with a single source of truth for color, spacing, typography, and component behavior.

Key features

  • Token-driven theming with light/dark mode and RTL support
  • Documented component APIs with usage guidelines and examples
  • Automated visual regression tests for every component
  • Figma-to-code workflow with shared naming conventions

Tech stack

ReactTypeScriptTailwind CSSStorybook

My role

Design systems lead — defined tokens, built core components, and wrote documentation.

Challenges

Preventing API drift across 4 product teams. Solved with strict versioning, codemods, and a documented deprecation policy.

Previous project / Next project