← BACKDopamine 2.0 Design System
Dopamine 2.0 Design System

Dopamine 2.0 Design System

Our components had drifted out of sync as the app scaled. I rebuilt them in Storybook, then wired that Storybook to an LLM so anyone can pull DS-accurate screens on demand.

Context

Tata1mg is an e-pharma and healthcare platform designed for speed, reliability, trust and everyday convenience, enabling users to get their medical needs addressed confidently without feeling overwhelmed. As the product scaled across e-pharma, diagnostics and health insights, maintaining visual consistency and intuitive interactions at scale became critical.

The Challenge

  1. Scaling components - Our system had well-defined foundation elements i.e. colors, spacing, effects. These were being used across all verticals. The components had been left out in cycles of rapid iterations.
  2. Team collaboration - There was a lack of documentation on the end of both the devs and the designers; creating a Storybook was the simplest way to solve this.
  3. AI-ready & rapid prototyping - Documenting repeated patterns across the app in Storybook lets us connect an MCP and iterate screens & flows using any LLM.

🧑🏻‍💻 The rebuild, as a design engineer

01.

Rebuilt the components that had drifted

  • New components, patterns and improvements added: designed and shipped 16+ reusable components.
  • Design-to-code mapping and quality check: took ownership of the full component lifecycle in the design system, from design to implementation via Storybook mapping, ensuring quality, consistency and scalability.
02.

Re-based everything on a new brand foundation

  • Conducted research and testing on multiple font options, evaluating readability, scalability, and cross-platform performance to identify the most suitable typography for the system foundations.
  • Migrated ~30 components to the revamped foundation system, ensuring alignment with updated design principles and standards.
Re-based everything on a new brand foundation
03.

Made it self-governing, so it wouldn't drift again

  • Developed a workflow for mapping finalised component sets onto Storybook. This lets designers retain control over the components and cuts the time taken for quality checks post-handoff.
  • This design-to-code implementation doesn't just let us iterate rapidly. It also enables quick wireframing in the early phases of any project, to see how a new experiment or intervention comes together with our design language.
Made it self-governing, so it wouldn't drift again
04.

Wired it to an LLM for DS-accurate screens on demand

  • The MCP hooks into Claude and pulls DS-accurate screens straight into a live artifact that is design-system-correct and ready to iterate.
  • This works because every pattern is documented and mapped in Storybook first, so the model only ever pulls from approved components.
Wired it to an LLM for DS-accurate screens on demand
  • A plain-language request pulls a design-system-accurate screen, sourced from the dopamine2 MCP, so every component is approved. On the left, the MCP is added as a connector. On the right, it ships a complete artifact showing 1mg's checkout screen with a new toggle added via plain-language.
The End