Back to Projects
Design Systems React Figma

Meridian

A comprehensive design system powering enterprise applications across web and mobile platforms.

Overview

Meridian began as an internal effort to unify the design language across a suite of enterprise products serving over two million users. What started as a shared color palette evolved into a full-scale design system with over 120 components, detailed documentation, and a dedicated governance model.

The Challenge

The product suite had grown organically over five years. Each team had developed its own component libraries, resulting in inconsistent experiences, duplicated effort, and a growing maintenance burden. Users moving between products encountered different patterns for the same interactions.

Approach

I led a cross-functional team of three designers and two engineers through a comprehensive audit of existing components. We catalogued every pattern, identified commonalities, and established a hierarchy of design tokens that would serve as the foundation.

Key decisions

  • Token-first architecture — Every visual property traces back to a semantic token, enabling theming and white-labeling from a single configuration file.
  • Composition over configuration — Components are built as composable primitives rather than monolithic blocks with dozens of props.
  • Documentation as product — We treated the documentation site as a product with its own roadmap, search, and interactive playgrounds.

Results

Within six months of launch, Meridian was adopted across all eight product teams. Design-to-development handoff time decreased by roughly forty percent, and the number of one-off components in production dropped by over sixty percent.

The system continues to evolve with quarterly releases, a public changelog, and an active community of contributors across the organization.