Meridian Labs|2025

Spectrum DS

Led the creation of a unified design system serving 6 product teams across web and mobile. Defined a token architecture, built 80+ components in Figma and React, and established contribution guidelines that reduced design-to-dev handoff time by 60%.

Role

Design Systems Lead

Timeline

Jan 2025 - Jun 2025

Team

2 Designers, 3 Engineers, 1 PM

Impact

80+ components / 6 teams / 60% faster handoff

Spectrum DS project cover

Overview

Meridian Labs had grown rapidly through acquisition, leaving 6 product teams each operating with their own ad-hoc component libraries. There was no shared language, no token system, and no source of truth. Spectrum DS was built from the ground up to unify the entire product surface under one coherent design system.

The Problem

Teams were duplicating effort, shipping inconsistent experiences, and spending 40% of sprint time on UI that had already been solved elsewhere. Designers were maintaining separate Figma files with conflicting patterns, and engineers were writing bespoke CSS for every feature. The lack of shared infrastructure was slowing product velocity and degrading brand coherence.

Process

Project Phases

01

Audit & Inventory

3 weeks

Conducted a full UI audit across all 6 products, cataloging every unique button, form element, card, and layout pattern. Identified 340+ unique components with significant overlap and inconsistency.

Deliverables

UI inventory spreadsheetPattern overlap analysisStakeholder interview findingsPriority matrix
02

Token Foundation

4 weeks

Designed a three-tier token architecture (global, alias, component) using Style Dictionary. Built semantic color, spacing, typography, and elevation scales that could support future theming.

Deliverables

Token taxonomy documentStyle Dictionary pipelineFigma variables libraryPlatform output configs
03

Core Components

8 weeks

Designed and built the first 40 foundational components in Figma and React simultaneously. Every component was built with accessibility-first principles, supporting keyboard navigation and screen readers from day one.

Deliverables

Figma component libraryReact component libraryStorybook documentationAccessibility audit reports
04

Documentation & Adoption

4 weeks

Created comprehensive usage guidelines, interactive Storybook examples, and a migration guide for each team. Ran onboarding workshops and paired with engineers to integrate the system into active sprints.

Deliverables

Documentation siteMigration playbookWorkshop materialsAdoption tracking dashboard
05

Governance & Scale

Ongoing

Established an RFC-based contribution model, automated visual regression testing, and a quarterly review cadence. The system grew from 40 to 80+ components with contributions from across the org.

Deliverables

Contribution guidelinesRFC templateVisual regression CIQuarterly review process

Results

Outcomes

60%

Reduction in design-to-dev handoff time

80+

Components shipped across web and mobile

6

Product teams unified under one system

92%

Adoption rate across active projects

Reflection

"The biggest lesson from Spectrum was that a design system is only as good as the relationships you build with the teams it serves. Technical rigor matters, but empathy and service design thinking are what drive real adoption."
TokensReactFigmaDocumentation