Flagship case study · Enterprise design systems · 2022–2026
Design decisions become shared infrastructure.
AJ helped lead the frontend architecture and engineering behind Legato, CDW's enterprise design system, connecting design intent to reusable code, documentation, accessibility, and adoption across product teams.
- 92%
- adoption across targeted experiences
- 60%+
- less implementation effort
- 170+
- shared UI assets across libraries
- 5
- engineers mentored
The system path
One decision, carried all the way through.
A design system earns trust when the same decision stays visible in design guidance, code, documentation, and a working product. The public example below recreates that relationship with independently authored assets.
- 01
Design specification
Intent, anatomy, variants, interaction states, responsive behavior, and accessibility expectations are named before implementation.
- 02
Component API
React, TypeScript, Stencil, and Web Component contracts turn those decisions into typed, reusable interfaces.
- 03
Storybook
Examples keep variants, edge cases, usage guidance, and implementation limits visible beside the component.
- 04
Product integration
Product teams adopt the shared contract incrementally inside existing applications instead of waiting for a rewrite.
Independent public demonstration
A component contract you can use.
These controls are part of this public portfolio codebase. They demonstrate the same kind of typed API, token use, interaction behavior, and documentation discipline without exposing private company code or design files.
Account preferences
Notification settings
Used only for the notifications selected below.
Monthly release notes and service changes.
Typed API
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}Semantic tokens
:root {
--background: oklch(0.98 0.004 85);
--foreground: oklch(0.18 0.01 80);
--primary: var(--foreground);
--ring: oklch(0.55 0.12 75);
}What made adoption possible
The component was only one part of the product.
Incremental paths for existing applications
Clear ownership and contribution rules
Documentation beside the working component
Support for React and standards-based Web Components
Accessibility requirements built into shared contracts
Direct support and mentoring for adopting teams
Public evidence and limits
Inspect the public implementation.
CDW source code, internal Figma files, product screenshots, and private documentation are intentionally excluded. This case study uses verified outcomes, accurate role boundaries, and an independent public implementation you can test directly.