Catalyst 2.0: Reimagining PMI’s Design System for Flexibility and Scale

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, as well as 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

Challenge

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 re-skinning components, we saw it 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 & drift: Monolithic components and all-or-nothing packages pushed teams to break away and build one-offs.

  • Token woes: CDN-served tokens introduced version drift, poor IntelliSense, and unpredictable visual outcomes across themes.

  • Developer friction: Complex semantic tokens slowed teams.

  • Accessibility gaps: WCAG compliance was inconsistent, with unclear or missing documentation.

  • Design vs. code disconnect: Figma updates often outpaced Storybook, leaving teams unsure what was production-ready.

  • Governance gap: No clear release/deprecation strategy; 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.

Solution

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.

a diagram of the new architecture for the catalyst 2.0 design system.

Accessible by Default

Accessibility became a core requirement, not an afterthought. Every component was built to meet WCAG 2.2 AA standards using Radix primitives for predictable keyboard navigation, focus management, and ARIA support.

Color contrast and focus states are standardized through variables and design guidance. Documentation now includes explicit accessibility expectations and acceptance checklists for Quality Assurance.

Align Brand & Product

The system fully reflects PMI’s new brand identity, unifying marketing and product experiences under a single design language.

Through shared tokens, typography scales, and component frameworks, teams now deliver cohesive interfaces without sacrificing creative flexibility.

Simplify Developer Experience

We transitioned from a CDN-based token approach to a native Tailwind configuration, providing developers with clearer visibility, faster iteration, and fewer dependencies.

Autocomplete and variable previews improved usability, and built-in theming support reduced onboarding time and friction.

Align Design & Code

In Catalyst 1.0, design moved faster than development. Limited engineering capacity made it challenging to keep the code libraries in sync with Figma, leaving downstream teams uncertain about which components were actually available for their products. This disconnect created frustration and slowed adoption, as product teams often discovered that what existed in Figma wasn’t yet production-ready.

With Catalyst 2.0, we resolved this by expanding our engineering capacity and rebuilding our code libraries for long-term scalability. Securing an additional design systems engineer allowed us to close the gap between design and code, enabling the team to deliver a robust Storybook library that fully supports the common component needs of all PMI product teams.

Now, the Figma libraries mirror the capabilities in code, ensuring full parity between what designers create and what developers can ship. This alignment has eliminated confusion, strengthened trust, and significantly improved the handoff process between disciplines.

Introduce 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 mobile project. To achieve that, we’re establishing clearer boundaries between the Design System (DSM) team and downstream product teams, defining what we own versus where teams have flexibility.

The DSM team maintains core system elements, including themes, primitives, and reusable patterns, while downstream teams own customizations or product-specific variants. This balance supports flexibility without sacrificing stability.

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.

Results

  1. Unified foundation: Marketing and product teams now build from the same scalable, brand-aligned system.

  2. Built-in accessibility: Our components are designed to meet WCAG 2.2 AA compliance standards.

  3. Improved Developer Experience: Simplified theming and Tailwind integration accelerated delivery and reduced onboarding time.

  4. Design–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.”

Narenda K - Engineer

conclusion

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.

What’s Next: We’re focused on maturing governance, documentation, and automation, including a CLI tool, deeper integration with Figma’s MCP server, and exploring the reintroduction of semantic variables for scalable multi-brand theming.