Project
SFDS
State Farm, closed source
State Farm's canonical enterprise design system, used by 1000+ engineers and designers across one of the largest insurance companies in the US.
- Web Components
- TypeScript
- Design Tokens
- npm + CDN
Problem
State Farm's frontend ecosystem spans hundreds of product teams shipping inconsistent UI across Angular, React, Next.js, JSP, and other frameworks. Past unification efforts didn't hold: brand drift and accessibility gaps compounded with every release, with duplicated engineering effort as the ongoing tax. The org needed a single framework-agnostic system any team could adopt without rewriting its stack.
Approach
Architected sf-ui, a framework-agnostic Lit component library. The same <sf-button> renders identically inside an Angular shell, a React SPA, or a server-rendered page. Used Web Components and Shadow DOM to encapsulate behavior and styling while keeping the integration surface simple for product teams. Built a Figma Variables → W3C design token plugin in TypeScript so design changes flow into code as a typed pipeline. When adoption reached AEM's content-fragment pages, built a Node.js sidecar that server-renders shadow DOM (Declarative Shadow DOM) and hydrates on the client, so hundreds of unauthenticated CMS pages could adopt sf-ui without replacing the CMS model. Owned the npm publishing, CDN distribution, versioned docs, and release governance that lets the system ship like any other dependency.
Impact
Named the official migration target for statefarm.com, with roughly 30% of the public Digital Experience estate migrated today across 10+ pages spanning public, internal, and agent-facing surfaces. 70+ primitives shipped, adopted across all eight Digital Experience product teams. The governance model (versioned releases, deprecation windows, compliance review) became a template for cross-org platform delivery.
Stack
Lit · Web Components · TypeScript · Figma Plugin API · W3C Design Tokens · npm · CDN distribution · GitLab CI/CD