FoldHealth Design System

Overview

FoldHealth needed a unified design language that could scale across multiple product teams while maintaining consistency and speed. I led the creation of a comprehensive design system from the ground up.

The Challenge

With 4 product teams working in parallel, design inconsistencies were creeping in everywhere. Buttons looked different across products, spacing was arbitrary, and every new feature meant reinventing basic components. Engineers were spending more time on UI implementation than business logic.

Approach

Audit & Discovery

Started with a full audit of existing interfaces across all products. Cataloged every component variation, color value, and spacing pattern. Identified over 200 unique button styles alone.

Token Architecture

Built a multi-tier token system:

• Global tokens — Core color palette, type scale, spacing scale
• Semantic tokens — Purpose-driven mappings (e.g., color-action-primary, space-content-gap)
• Component tokens — Scoped overrides for specific components

Component Library

Designed and documented 60+ components in Figma, each with:

• Multiple variants and states
• Responsive behavior specs
• Accessibility annotations
• Usage guidelines with do/don’t examples

Documentation

Created a living documentation site with interactive examples, code snippets, and design rationale for every decision.

Results

• 60% faster feature design-to-dev handoff
• Zero visual inconsistencies across products after adoption
• 4 product teams onboarded within 3 months
• Component reuse rate of 85% across all products