Design Systems Designer & Frontend Developer

Enterprise
Component
Library

Labcorp's products were built by separate teams using separate component implementations. The same button looked different in three applications. I built the shared library to fix that — and made sure the fix worked in both Angular and React.

13+

Production components shipped

Frameworks (Angular + React)

NPM packages published

Design-to-code handoff gaps

The Problem

Every product had its own UI dialect

Labcorp's internal products were built by separate teams who each maintained their own component implementations. A button in one app used different colors, spacing, and hover states than the same button in the next. There was no shared design language and no enforcement mechanism to create one.

The gap between Figma and code made it worse. Designers would spec a component, hand it to a developer, and watch it come back subtly different every time. Nobody was wrong — there just wasn't a source of truth that both sides shared.

I was hired as a UX Designer, but I could see that the root cause was an engineering problem. So I built the fix.

Process

From audit to production in one system

UI Audit and Token System

I catalogued existing components across products and extracted a shared design token set covering colors, spacing, typography, and border radii. These became both Figma variables and CSS custom properties, so the same values live in both tools.

Dual-Framework Component Build

I built 13+ components from scratch in both Angular and React: Navbar, Sidebar, Button, Badge, Alert, Footer, Breadcrumbs, and more. Each component supports all required states and variants and meets WCAG 2.1 accessibility requirements.

Figma Code Connect

I implemented Figma Code Connect across every component in both libraries. When a designer selects a component in Figma's inspect panel, they see the exact production code snippet rather than a guess. The handoff gap is gone by design.

Storybook Documentation

I authored comprehensive Storybook documentation with interactive controls for every component in both libraries. Designers and developers now have a single place to browse, test, and understand every component in the system.

NX Monorepo and NPM Publishing

I architected an NX monorepo consolidating 4 publishable NPM packages and 5 demo and documentation applications. Both libraries are published as versioned packages and consumed by product teams across Labcorp.

Technical Stack

Full design-to-code pipeline

Libraries and Frameworks

Angular 21 React TypeScript SCSS ng-bootstrap react-bootstrap

Tooling and Infrastructure

Figma Code Connect Storybook NX Monorepo NPM Jenkins CI/CD

button.component.ts — Angular 21 with signal-based inputs
import { Component, input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'lib-button',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      [class]="'btn btn-' + variant() + ' btn-' + size()"
      [disabled]="disabled()">
      <ng-content />
    </button>
  `
})
export class ButtonComponent {
  variant = input<string>('primary');
  size    = input<string>('md');
  disabled = input<boolean>(false);
}

Live Demo

Try the components

The Labcorp libraries are internal, so this is a faithful recreation of a few components built with the same token-driven approach. Switch components, change props, and watch the usage snippet update — the same experience developers get in Storybook and Figma Code Connect.

Variant Size Disabled

Representative recreation with fictional content — the production libraries ship 13+ components in both Angular and React.

Outcome & Impact

The handoff gap is gone

Results

🎯

Zero handoff gaps

Figma Code Connect means developers see exact production code when inspecting any component. No more lost-in-translation implementations.

📦

Published and consumed in production

Four NPM packages, versioned and consumed across multiple Labcorp products. Teams pull from the registry rather than copying code between repositories.

🔄

Consistent across all products

One token system, one component set, two frameworks. The same Button looks identical in every product it touches.

⚡

Modernized to Angular 21

All 11 Angular components were modernized to signal-based inputs and OnPush change detection (the React library shares the remaining components), improving rendering performance across every consuming app.

← Back to all work Next project Research Data Automation Tool →