Overview
Meridian is a design system I built from the ground up for a fintech startup navigating rapid product growth. The goal was to create a shared language between design and engineering — a single source of truth that would let the team move faster without sacrificing consistency.
The Challenge
The product had grown organically over two years, accumulating visual debt: inconsistent spacing, competing type scales, duplicated components with subtle variations. The engineering team was maintaining multiple versions of the same button. Designers were solving the same problems repeatedly.
My Approach
I started with an audit — cataloging every UI pattern in the product and grouping them by function. From there, I built a token-based system: color, typography, spacing, and elevation all defined as design tokens that could be consumed by both Figma and the codebase.
Key deliverables:
- Token library — 80+ design tokens for color, type, spacing, and shadow
- Component library — 40+ components documented with usage guidelines, variants, and accessibility notes
- Pattern library — higher-level patterns like empty states, data tables, and onboarding flows
- Documentation site — a living reference for the entire team
Outcome
Within six months of launch, the team reported a 40% reduction in design-to-development handoff time. New features could be assembled from existing components rather than built from scratch. Most importantly, the product started to feel like a coherent whole.
Tools & Technologies
Figma, React, Storybook, Style Dictionary, TypeScript