Systems that ship

Design
Systems

I build the shared layer between product intent and production code: the tokens, components, behavior, documentation, and APIs that let teams move faster without lowering the quality bar.

One Fringe library included 147+ documented component stories, backed by 92% test coverage.

What the system covers

Tokens: Color, typography, spacing, radii, and states.
Components: Buttons, inputs, dialogs, cards, tables, navigation, and complex product patterns.
Theming: Brand and rebrand support, dark mode, and variants.
Accessibility: Keyboard behavior, focus states, ARIA, and contrast.
Documentation: Storybook, usage guidance, browser tests, and working examples.
Engineering ergonomics: Clear prop APIs, composability, consistency, and maintainability.
Design/engineering parity: Figma and production built from the same decisions.

CapCenter component library

Inside the Storybook

View the component-library source

These documentation screens show one of three component library generations I built at CapCenter. The system connected design direction to reusable code, documented APIs, interaction states, and accessibility guidance.

Storybook color documentation showing CapCenter theme colors, usage guidance, and a WCAG contrast note — **Tokens and accessibility guidance**Theme colors, implementation classes, and WCAG 2.0 AA guidance documented together.

Storybook documentation showing theme color scales, system colors, gradients, and arbitrary color usage — **Color scales and system states**Brand scales, semantic system colors, gradients, and escape hatches for exceptional cases.

Storybook button documentation showing a live example, source code, and configurable component properties — **Production-ready component APIs**Live examples, implementation code, prop definitions, variants, and component states.

Storybook dropdown documentation showing an open menu, source code, and configurable properties — **Interactive component states**A working dropdown documented alongside its API, source example, and configurable behavior.

Storybook icon documentation showing sizing, color, rotation, and code examples — **Reusable icon behavior**Consistent sizing, color, interaction, and transformation patterns with usage examples.

Storybook typography documentation showing headline scales and implementation classes — **Typography scale**Reusable type tokens presented with their visual output and production class names.

Evidence in the work

Fringe~40% faster developmentShared component architecture aligned across Figma, Storybook, and production.ClarvosRebrand without one-off screensA scalable theming system with Storybook as living documentation. Its modularity allowed it to adapt to 2 different redesigns. On the third, well-defined tokens and components made the transition from MUI to Tailwind seamless.CapCenterPatterns shared across productsReusable foundations for the loan application, home search, and internal tools.San Joaquin CountyAccessibility made repeatableShared components and conventions built around Section 508 requirements.

The system in production

Shipped product surfaces show how the shared foundations held up beyond the component library.

CapCenter product screens and Figma component variants showing different visual directions built from shared components — **Token-driven visual direction**Small token changes created distinct visual directions without rebuilding the underlying components.

Figma grids and guides for desktop, tablet, and mobile breakpoints — **Responsive foundations**Breakpoints and column grids gave designers and engineers the same responsive rules.

Fringe marketplace rendered with the light theme — **Fringe light theme**The marketplace structure and component behavior remain consistent while theme tokens change.

Fringe marketplace rendered with the dark theme — **Fringe dark theme**A production dark mode built from the same shared components and theming system.

CapCenter loan application screens across desktop and mobile showing a cohesive multi-step experience — **Cohesion across a complex journey**Shared components kept a long, multi-device loan application consistent across many screens and states.

ADP Thrive checkout for a DoorDash gift card using Fringe marketplace components — **Components across deployments**The modular checkout system carried into a partner deployment on another domain without becoming a separate one-off.