Catalyst 2.0: Rebuilding PMI's Design System for Enterprise Scale and Accessibility
Sector: Professional Organization, Not-for-profit
Challenge: PMI launched a new brand identity that required a refreshed digital design system. Our existing system, Catalyst 1.0, was visually outdated and overly rigid. We lacked accessibility standards. Product teams struggled with monolithic components and complex semantic tokens that limited flexibility, compounded by a disconnect between Figma and Storybook libraries.
My Role: Design Operations Lead, responsible for defining the strategy, governance model, and cross-functional collaboration between design, engineering, and product to deliver a scalable, enterprise-ready system.
Collaborators: Zach Schweitzer (UX Design Leader), Nick Richardson (Design Engineer), John Galletta (Solutions Architect)
Timeline: 12 months
Technology Stack: Radix UI, Tailwind CSS, React, Storybook, Figma
Scale: Serving 15+ product teams across web and native applications globally
Executive Summary
As Design Operations Lead, I directed the complete rebuild of The Project Management Institute’s design system from rigid, monolithic components to a flexible, composable architecture built on Radix UI and Tailwind CSS. Through extensive user research with downstream consumers, I identified critical pain points and defined a strategy that prioritized accessibility, developer experience, and design-code parity. The rebuilt system now serves 15+ product teams, embeds WCAG 2.2 AA compliance by default, and has reduced onboarding time while increasing team velocity. This work demonstrates strategic leadership in design operations, technical decision-making, and change management at enterprise scale.
Discovery: Understanding System Failures
When PMI introduced a new brand identity, it became clear that our existing system needed to be rebuilt from the ground up. Rather than simply reskinning components, we saw this as an opportunity to learn from our users: the designers, product owners, and engineers who rely on our system every day.
We conducted interviews with downstream consumers to understand what was working, what wasn't, and what they needed most from the next version of Catalyst. Their feedback shaped our priorities for flexibility, developer experience, and accessibility in version 2.0.
Key Challenges Included:
Brand shift: A refreshed global brand required a system that could visually and structurally align marketing and product experiences.
Rigidity and drift: Monolithic components and all-or-nothing packages pushed teams to break away and build custom solutions.
Token complexity: CDN-served tokens introduced version drift, poor IntelliSense, and unpredictable visual outcomes across themes.
Developer friction: Complex semantic tokens slowed teams down and created steep learning curves.
Accessibility gaps: WCAG compliance was inconsistent, with unclear or missing documentation.
Design versus code disconnect: Figma updates often outpaced Storybook, leaving teams unsure what was production-ready.
Governance gap: No clear release or deprecation strategy and inconsistent quality gates.
What we needed: A design system that reflected PMI's new brand, embedded accessibility as a core standard, incorporated user feedback, aligned design and code, and scaled flexibly across products and technologies.
Rebuild Strategy: From Rigid to Composable
Rebuild for Flexibility
Catalyst 2.0 was rebuilt from the ground up using Radix as our React foundation for accessible primitives and Tailwind CSS for styling and theming.
This architecture enables teams to easily compose new components and patterns while maintaining visual and behavioral consistency across PMI's ecosystem.
Accessible by Default
Accessibility became a core requirement, not an afterthought. Every component was built to meet WCAG 2.2 AA standards, with built-in keyboard navigation, focus management, and ARIA support.
Align Brand and Product
The system fully reflects PMI's new brand identity, unifying marketing and product experiences under a cohesive visual language that can flex across diverse contexts and audiences.
Through shared tokens, typography scales, and component frameworks, teams now deliver cohesive interactions whether building for marketing campaigns, member portals, or certification platforms.
Simplify Developer Experience
We transitioned from a CDN-based token approach to a native Tailwind configuration, providing developers with instant feedback via IntelliSense and eliminating version-drift issues.
Autocomplete and variable previews improved usability, and built-in theming support reduced onboarding friction and accelerated delivery timelines.
Align Design and Code
In Catalyst 1.0, design moved faster than development. Limited engineering capacity made it challenging to maintain parity between Figma and our code library, creating confusion about what was actually production-ready.
With Catalyst 2.0, we resolved this by expanding our engineering capacity and rebuilding our code library into a robust Storybook that fully mirrors our Figma components.
Now, the Figma libraries mirror the capabilities in code, ensuring full parity between what designers prototype and what developers can implement. This eliminated the trust gap and streamlined handoff workflows.
Introducing Stronger Governance
Governance remains an active area of focus as we scale Catalyst 2.0 across PMI.
Our goal is for the design system to be used at some level by every team working on a web or native application, while maintaining quality and consistency without creating bottlenecks.
The DSM team maintains core system elements, including themes, primitives, and reusable patterns, while product teams own their specific implementations and custom components.
Our evolving governance framework focuses on:
Defining ownership: Clear boundaries between DSM responsibilities and product team ownership.
Quality gates: In-progress design and code review checkpoints for accessibility, usability, and brand alignment.
Contribution process: A structured, scalable path for proposing and reviewing new components.
Impact: Delivering Enterprise Scale and Accessibility
Unified foundation: Marketing and product teams now build from the same scalable, brand-aligned system.
Built-in accessibility: Our components are designed to meet WCAG 2.2 AA compliance standards.
Improved Developer Experience: Simplified theming and Tailwind integration accelerated delivery and reduced onboarding time.
Design and code alignment: Figma and Storybook parity eliminated confusion and increased trust.
“The Tailwind-first setup continues to feel lightweight, flexible, and developer-friendly. The overall structure of Catalyst 2.0 makes it easy to integrate and extend without heavy configuration.”
Narenda K - Engineer
“I like the flexibility of the Tailwind first approach and the fact that styles are set explicitly, which I think improves readability of the code and makes it easier to understand.”
Aliaksei M - Engineer
“The recent fixes and support from the DSM team have been very helpful and addressed immediate issues quickly. The development experience remains smooth, and the system aligns well with our current workflows.”
Ranjith M - Engineer
Outcomes & Learnings
What Worked: Catalyst 2.0 replaced rigid, monolithic components with composable primitives, giving teams flexibility without fragmentation. The Tailwind-first approach simplified development by removing the complexity of semantic tokens and improving visibility and speed. Investing in engineering resources closed the gap between design and code, while accessibility and governance elevated quality and consistency across all products.
What We Learned: Regularly talking to our users is critical. Their feedback directly shaped the system's priorities and reminded us that a design system is never finished. It must evolve with its users, technology, and brand. Balancing flexibility with governance can be challenging, and maintaining multiple Figma libraries remains a resource-intensive task that requires ongoing attention and prioritization.
What’s Next: We're focused on maturing governance, documentation, and automation, including deeper integration with Figma's MCP server, and exploring the reintroduction of semantic variables for scalable multi-brand theming. Our roadmap also includes expanding component coverage, enhancing documentation with interactive examples, and continuing to iterate based on user feedback.