Design systems leadership
Systems that make quality easier to ship.
At Adobe, I am building an agent-native design system: semantic tokens, web components, machine-readable specs, MCP tooling, and automated governance.
- 633+
- tokens synced from Figma Variables to versioned CSS
- 16
- MCP tools for tokens, component specs, audits, and documentation
- 48
- brands supported in one design system ecosystem
Built for teams at
- Adobe
- Nielsen ONE
- Men's Health
- Oprah Daily
- Cosmopolitan
- Car and Driver
- ELLE
- Microsoft
Selected work
Systems, foundations, and adoption
Design system work across tokens, accessibility, governance, adoption, and design-to-code infrastructure.
Rearchitecting for the Agent-Native Era: S2A Design System at Adobe
I led the design and build of S2A, Adobe's agent-native design system, from a blank page to a working token pipeline, component library, MCP server, and automated governance layer. The core argument I made and proved: a design system that expresses intent clearly enough for humans is a design system that AI agents can generate from reliably.
Building an Accessibility-First Component Library
This case study highlights the creation of an accessibility-first component library built with React and Radix Primitives. It was designed to address persistent WCAG violations and fragmented UI across platforms by embedding accessibility, semantic structure, and design-code parity into every layer. The system uses design tokens, Storybook documentation, and Figma Dev Mode integration to enable inclusive, scalable development across teams.
How I Lead Design Systems Teams: Feedback, Ownership, and Scaling Trust
I lead through feedback rituals, clear governance, and measurable execution. This case study combines team leadership practices with a concrete artifact pack and a full Button delivery example.
MCP: Token Aware AI Workflows for Scalable UI
I built a token-aware AI workflow that integrates design system context into component generation using MCP, ChatGPT, and Cursor. This system turns prompts into production-ready UI—theme-aware, brand-compliant, and fully synced with Figma and code.
System evidence
Architecture that agents can read from
The same guardrails that help people ship consistently also make AI output more reliable: tokens with intent, components with contracts, and governance built into the workflow.
- 01
Semantic foundations
Token layers that separate primitives from semantic intent, with responsive modes that resolve cleanly in code.
- 02
Machine-readable contracts
Component specs that encode variants, props, token bindings, accessibility requirements, and Figma references as source.
- 03
Queryable systems
MCP tools that let designers, engineers, and agents resolve tokens, inspect components, and generate specs from live source.
- 04
Governance in the workflow
CSS audits, accessibility checks, and contribution standards that catch drift before a component reaches review.