The Story Behind Mercari Design System Rebuild

Mercari's engineering team rebuilt their design system from version 3.0 to 4.0 using Atomic Design methodology to solve component complexity issues. The previous system suffered from polymorphic APIs and overloaded components that became unmaintainable. The new approach decomposes components into atoms, molecules, and organisms with clear semantic boundaries, introduces blueprints and recipes for edge cases, and follows four key guidelines: semantic decomposition, visual properties only, optional elements, and no polymorphic APIs. This resulted in 150 components (50 atoms, 60 molecules, 40 organisms) and reduced complex components from 700+ lines to under 30 lines of code.