Design systems have become increasingly central to product strategy across software-based organizations. For some, a design system is simply infrastructure — a repository of guidance, a component library, and documented patterns that quietly support development. For others, the system is treated as a product, complete with a focused team, intentional development practices, and delivery models designed to support internal users.

But a mature design system that provides strategic value is neither just a product nor just infrastructure. It is both.

At PatternFly, we’ve been following this dual mandate and reaping the benefits of both perspectives. We’ve learned that embracing this duality is the only way to create a system that lasts — and one that the organization values.

Here is how we balance these roles at PatternFly, and how this dual mandate can benefit your organization.

Design systems as infrastructure

When a design system functions as infrastructure, it offers organizations a critical foundation that accelerates product delivery, reduces organizational risk, and prepares for change and evolution. It becomes a utility upon which other deliverables rely.

As infrastructure, a design system’s users are dependent on the system, relying on its rules to design, develop, and ship their own work. Their dependence demands stability, reliability, and continuous maintenance that requires the design system to be more “living” than a static, shelf-bought UI kit.

PatternFly operates as strategic infrastructure in three key ways:

1. Accelerating delivery and optimizing resources

By centralizing the development of UI elements, individual product teams don’t have to reinvent the wheel. PatternFly standardizes patterns from specific product spaces, creating reusable resources that save development time across Red Hat’s entire product portfolio.

As infrastructure, PatternFly supports diverse, complex workflows. Read more about how we power multi-level navigation in Red Hat Advanced Cluster Management, enterprise tables for Red Hat Satellite, and terminal integrations for Red Hat OpenShift Platform. PatternFly provides the architectural building blocks, freeing teams to focus resources on solving unique product challenges rather than rebuilding mundane basics or customizing off-the-shelf design systems.

2. Guarding investment and mitigating risk

Perhaps the most business-critical aspect of the infrastructure model is risk mitigation. PatternFly embeds accessibility standards directly at the component level (specifically WCAG AA compliance). When a product team uses a PatternFly component, they are virtually guaranteed accessibility for that specific element, reducing the risk of releasing non-compliant software updates.

However, accessible components don’t guarantee an accessible experience. To ensure that components are assembled into final screens that are well-structured for assistive technologies, we provide guidance instructing engineering teams on how to assemble our components into holistic layouts.

Beyond accessibility, we mitigate technical risk by keeping our code packages lean to ensure fast load times. We also monitor the security standards of our third-party dependencies to quickly mitigate concerns at a system level, delivering fixes to everyone at once.

3. Managing change and evolution

A modern design system must do more than maintain consistency — it must actively facilitate change management. PatternFly functions as the “control tower” that offers the structure, architectural stability, and centralized control to manage rapid evolution.

This role is essential for the rise of Artificial Intelligence (AI) and Large Language Models (LLMs). Because AI models rely on clear, structured inputs to generate useful code, PatternFly exposes the tokens, component APIs, schemas, and documentation these models need. This ensures that AI interacts with our infrastructure to generate outputs that maintain organizational standards and brand cohesion.

Whether integrating AI or rolling out a rebrand, this centralized infrastructure allows us to manage how new features are applied — including the predictable handling of breaking changes — ensuring that enhancements benefit rather than disrupt our internal customers.

Design systems as internal products

While operating as infrastructure provides stability and risk mitigation, managing a design system as an internal product shifts the focus to adoption, satisfaction, and growth. The system’s “customers” — the internal product teams — become essential to ensuring that tangible, immediate value is delivered to those who use our system the most.

PatternFly operates as a product in three key ways:

1. Providing “customer service”

We view Red Hat’s product teams as our customers. Successful adoption of PatternFly updates is driven by cross-departmental collaboration and a dedicated enablement team that focuses on assisting products with their integrations.

This support ranges from helping with migrations to partnering on building new user experiences. We also address user needs in real-time through office hours, critique sessions, and ad hoc support via Slack. Our enablement team is even actively developing AI tooling to support code migrations and rapid prototyping, ensuring our “customer service” evolves alongside the technology our users are adopting.

2. Delivering tangible value (ROI)

Our core purpose is to deliver immediate solutions for common concerns so product teams can focus on unique features. We see this value in the high adoption of foundational elements — like buttons, selects, and text inputs — that teams would otherwise build from scratch.

But we go beyond the basics. We actively partner with products to mature new capabilities, such as our recent exploration of AI. By introducing styling for AI-generated content, conversational interfaces, and generative UIs, the system functions as an internal product that systematically proof-of-concepts and delivers new requirements.

PatternFly also supports complex, system-level experiences like our ChatBot extension, which currently powers several Red Hat products offering agentic chat. A notable success is its use in the Red Hat Intelligent Front Door experience:

“Absolutely brilliant work by all involved. We went from 0 to prototype in 2.5 weeks.

PatternFly and its Figma UI kit allowed 6 designers (and 2 managers) to literally work around the clock by handing off tasks twice a day across time zones spanning 12.5 hours.

The seamlessness and thoughtfulness that the PatternFly team put into PF6 and the AI components meant that we were able to focus on critical workflows and AI behaviors.”

— Jason Brock, UXD Manager

By enabling reusability for both simple and complex features, we drastically reduce custom coding time. The value of this strategy is best illustrated by asking, “What would happen if the system went away?” The predictable outcome — massive rework and lost capabilities — proves the system is delivering indispensable business value.

“If the system went away each team would need to spend countless hours doing similar work that would be done slightly differently with each group. I call this chaos.”

— Ali Mobrem, Senior Principal Product Manager for OpenShift

3. Aligning cross-organizational teams

PatternFly is managed as a product, led by a dedicated Product Manager who brings Design, Engineering, and Product disciplines together. By working in small, cross-functional teams to collaboratively define initiatives from the start, we guarantee alignment on strategy and vision.

Organizationally, we sit within Red Hat’s UX design and research team. This positioning allows us to champion consistency across products, integrating tightly with brand and experience teams to connect PatternFly with the Red Hat customer experience across the entire “see, buy, and use” journey.

Crucially, this structure creates a feedback loop where our roadmap is shaped by actual stakeholder requirements rather than theoretical ideals. As Tracy Rankin, a Vice President of Software Engineering at Red Hat, notes:

“Red Hat’s products would reflect the company’s internal organizational structures if not for the centralization of the design team and the existence of the PatternFly design system.”

— Tracy Rankin, VP of Software Engineering

The dual mandate amplifies value across disciplines

To mature properly and function effectively, it is not enough to be either a stable infrastructure or a helpful product. It is essential to balance both.

As a dual-function entity, we deliver distinct value to every key discipline in the organization:

• For Designers: We facilitate efficient creation, consistency, and scalability through robust resources like our Figma library and reusable components with native accessibility. We further accelerate the design-to-development handoff with specialized methods like AI-assisted rapid prototyping.
• For Product Engineers: We establish a shared technical foundation with React, providing a common language that streamlines onboarding. PatternFly also supports higher-level system concepts — such as scaling information architecture, page layouts, form flows, and complex UI patterns — which often reside in libraries above the core system. This layered support provides the flexibility teams need to innovate beyond basic functionality.
• For the Business Unit: We create a common language across Design, Engineering, and Product Management. This alignment results in faster delivery, reduced rework, and clearer scoping for predictable roadmaps. Our system also accelerates the Software Development Life Cycle (SDLC) by playing a key role in agentic explorations and enabling the rapid delivery of new features.

Securing investment with a dual-role design system

A design system is fundamental infrastructure that sustains an organization, but its long-term success relies on treating it as a product that supports and propels its internal users.

By proving a design system’s value through the impact on quality, risk, and strategic enablement — rather than just component counts — organizations can secure the investment necessary to sustain this dual role. When stakeholders understand that the design system is both the foundation of the house and the service that keeps it running, it stops being viewed as a mere toolkit and starts being recognized as a strategic asset.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Disclaimer: This story was drafted with AI assistance. All insights and final edits are the author’s own.

A dual mandate for design system maturity was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Disclaimer: This story was drafted with AI assistance. All insights and final edits are the author’s own.

We’re excited to share details about the completion of our Q3 accessibility epic! Based on a comprehensive audit from earlier this year, we’ve resolved several accessibility issues to improve the user experience for everyone. This effort was two-fold: we’ve made key updates directly to our components (which you get automatically when you upgrade), and we’ve also enhanced our documentation and examples to help you build more accessible products.

How we approach accessibility

Before diving into what’s new, it’s helpful to understand the process that guides our work. To ensure PatternFly remains robust and accessible, we rely on a multi-layered approach.

First, every pull request to our codebase is checked by a custom-built, automated tool that scans for accessibility errors against axe-core. This provides a strong baseline and prevents new issues from being introduced.

But automation can only go so far. We also perform in-depth manual audits, testing our components with assistive technologies like the VoiceOver screen reader on Mac, as well as (time permitting) NVDA and JAWS on Windows. This time-consuming but critical step allows us to test interactive states — like an opened dropdown menu or keyboard navigation — that automated tools can’t cover.

Finally, we translate our findings into clear accessibility documentation. This guidance is meant to provide you with best practices and clear guidelines that explain why certain attributes are so important for an inclusive experience and how you can implement accessible components.

Here’s a look at the component-based improvements that you’ll benefit from simply by updating to the latest PatternFly version.

Built-in component accessibility enhancements

This quarter’s epic led to several out-of-the-box accessibility improvements, which you’ll get “for free” just by updating to the latest version of PatternFly.

• Clearer focus states for buttons: We’ve modified the styling of the button component’s focus indicator to be easier to perceive, ensuring users navigating with a keyboard can more easily see which element is selected.

• More reliable tooltips: We’ve resolved an issue in our React code, where tooltips weren’t correctly linked to their triggers when using refs. Now, tooltips will be correctly associated with their triggers, an important fix that also benefits components that use tooltips, like menu, select, and dropdown.
• Smoother keyboard navigation in data list: We’ve fixed a keyboard navigation issue where triggering a kebab toggle within a data list item no longer accidentally selects the entire item, creating a more predictable experience.

Updated guidance for more inclusive design

Beyond the components themselves, we’ve updated our documentation and examples to empower you to build more accessible products from the start.

• Accessible attributes for jump links: Our examples now include the expected ARIA attributes and unique naming for semantic elements, aligning with the latest accessibility standards.
• Meaningful context for skeleton loaders: We now recommend including visually hidden text for a single skeleton per context. This provides crucial information for screen reader users while content is loading.
• Added context for icon-based labels in data list: We’ve added visually hidden text to labels that only contain an icon and a number, giving more meaning to what the labels are intended to convey.
• Unique naming for interactive elements in text input group and hint: Our examples now ensure that interactive elements have unique names, helping users differentiate between similar controls on a single page.

To accessibility, and beyond

Accessibility is a never-ending journey, not a destination. There’s no finish line or “mission complete.” As guidelines and best practices evolve, so will PatternFly. Here’s a look at what we’re working on next to continue raising the bar:

• High contrast mode: We’re building a new high contrast mode theme that aims to meet WCAG 2.2 AAA compliance.
• System-wide WCAG 2.2 AA compliance: We are officially striving to comply with WCAG 2.2 AA requirements across the entirety of PatternFly, aligning with both IBM and Red Hat Design System standards. We plan to begin the first step towards this goal soon.
• AI exploration: We’re exploring how AI can help us generate and structure accessibility documentation, making our process more efficient for components still in need (don’t worry, a human will always proofread the final content).
• Audit process refinement: We are refining our manual audit process to be less time consuming, which would allow us to test our components more regularly and efficiently, ultimately catching issues sooner.

These future updates reflect our ongoing commitment to accessibility. We’re excited to continue this journey and empower you to create more inclusive products for everyone.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Raising the bar for accessibility was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Disclaimer: This story was drafted with AI assistance. All insights and final edits are the author’s own.

Since its launch in early 2024, the PatternFly ChatBot extension has grown from an idea into a key tool used in more than ten projects to create consistent AI experiences. ChatBot is community driven, and the team’s goal is to keep up with community needs, saving you time and providing you with a consistent, positive experience.

Our journey of community-led improvement continues with our latest release.

Driven by your feedback, this update delivers powerful enhancements that address key usability issues and introduce new, in-demand features.

Delivering features your users need

Our work for this release was driven by two simple questions:

1. How do users feel about the PatternFly ChatBot extension?
2. How can we keep up with evolving areas in AI like model context protocol, agentic AI, and retrieval augmented generation?

To answer the first question, PatternFly designers Kayla Chumley and Lucia Boehling led a series of usability workshops. They observed users performing several tasks with the ChatBot, and the results were clear. While the extension was well-liked, participants experienced a few key pain points:

• Finding and managing chat history was difficult.
• Starting a new chat was not intuitive.
• The interface felt too dense, and users wanted more layout control.
• Modern chat features were missing, such as message editing and transcripts.

Based on this feedback, we quickly focused on designing, workshopping, and building out new features and updates that addressed these needs. The latest ChatBot release now offers:

• Clearer navigation, with a new title, icon, and “new chat” button in the chat history drawer.
• Flexible layouts, with compact components and a new demo that showcases switching between layouts.
• Modern chat features, including message separator options and new demos that showcase message and chat history items, “pinning” chat history items, and transcript downloads.

To stay ahead of the curve in AI, we also collaborated with our community to deliver features for more advanced interactions:

• Deep thinking and tool calls: New components that allow control over tool calls and display insight into your AI’s reasoning process.
• Complex interactions: Demos for adding complex interactions to messages, such as software downloads and live installation progress monitoring
• Rich media support: New modals for previewing attached images and a better handling for non-previewable files.
• Footnotes and enhanced source cards: New ways to provide more context on source material, including system confidence scores.

Your feedback is essential

We love seeing how you’re using the ChatBot extension in your projects. These new features came directly out of conversations with community members like you. The ChatBot design and development teams are small, and your feedback is essential for us.

A special thanks to everyone who gave us early feedback on the designs and API for the new deep thinking and tool calls components. We have tried to keep these as flexible as possible given the fast pace of change. We have also heard your request for Markdown support in these new components and have created an issue to track progress on that work in GitHub.

What’s next?

This is just the beginning. We’re excited to bring this more intuitive and up-to-date chatbot experience to the PatternFly community. Our next steps include a second round of user testing to validate our changes and ensure we’ve truly improved the user experience. As the AI field continues to evolve, we’ll continue to work with you to identify and build the features you need most.

We encourage you to try out our new features and explore the PatternFly ChatBot extension on our website.

What would you like to see in a future version? Share your thoughts with us by opening an issue on GitHub.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Building a better bot, together was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a UX researcher, I’ve seen AI transform everyday tasks: drafting research plans, analyzing data, and even summarizing interviews. New tools emerge daily, reshaping how we work. But here’s the thing: most of us use AI individually, as a solo tool for personal efficiency, instead of unlocking its collaborative potential.

That’s a missed opportunity. What if, instead of just working faster alone, we utilized AI to work more effectively together?

The Problem I See When Using AI

When teams use AI in silos, we risk trusting it blindly, overlooking biases in both our questions and the models themselves.

Here’s a real example: We introduced NotebookLM so that product and design teams could access research data instantly. Powerful idea, right? But I noticed colleagues asking biased questions that led to equally biased answers.

For instance, someone might ask:

“Is there a need for this feature?”

The AI will dutifully return quotes that support the idea, but that’s not the same as proving the strength of the use case. The way the question is framed shapes the answer, and without others there to challenge the framing, blind spots go unnoticed.

A better question might be:

“Users mentioned [specific problem]. We’re considering [specific solution] to address it. Based on the data, what are the pros and cons users might experience? And what should we keep in mind when designing it?”

This invites the data to speak for itself, rather than serving as confirmation for a pre-decided narrative. The problem of blind spots isn’t limited to research. When a designer uses a UI generator in a silo, they might get a beautiful dashboard that overlooks key technical limitations that a developer would notice. A developer might use a code assistant to generate a wizard that functions well but misses crucial considerations for the user’s main goals that were identified in previous user research. In isolation, these AI-generated assets seem “good enough”, but they lack the collective expertise a team provides.

Learning from Paper Prototyping

This reminds me of why paper prototyping works so well in design. We don’t sketch on paper for aesthetics; we do it to strip away distractions and focus on the flow and core experience.

However, the real strength of paper prototyping lies in its collaborative nature. You sit with a PM, sketch an idea, and refine it together in minutes. While the designer sketches the UI, the product manager can check it against business goals, and an engineer can provide real-time feedback on feasibility. There’s no waiting weeks for feedback. Instead of each person holding separate mental models, you create a shared one on the spot.

Collaborative AI can work the same way: fast, iterative, and fundamentally shared.

My Solution: Collaborative AI Sessions

Instead of team members querying data alone, I run live sessions where we explore answers together.

Here’s how it works:

1. Frame the question together — I guide the team to avoid bias in how we ask.
2. Use AI live — We run the query in real time.
3. Interpret as a group — We discuss what the AI surfaced and what’s missing.
4. Add research context — Since I conducted the study (and related ones), I help connect insights to the bigger picture.
5. Decide next steps — Actions are based on both AI output and human expertise.

The result? Multiple perspectives catch bias before it misleads us. And because everyone contributes to framing and interpretation, we leave with a shared understanding, not just a shared document.

The Critical Thinking Advantage

There’s another benefit that often gets overlooked: collaborative AI strengthens our critical thinking.

When I work with AI alone, I sometimes take its answers at face value. Recent research shows this is common: we trust tech more when it behaves as expected, which means we can miss its mistakes. For example, in a study that tested the interaction with a biased robot, they found that biased robot behavior can increase human gender stereotypes, but counter-biased (pro-woman) robot behavior can significantly reduce or even eliminate stereotypical thinking in participants [2]. This study suggests that we often trust technology, sometimes even more than our own instincts.

From my experience, this tendency changes in a group setting. We’re more likely to challenge the output, spot gaps, and refine it. The responsibility to think critically becomes collective, not individual. And because the critique is aimed at the AI, not a person, it creates a safer space for questioning. The focus isn’t on who had the “right” or “wrong” idea, but on collectively improving the AI’s prompt and interpreting its output.

These collaborative AI sessions also reduce self-doubt; feedback loops are directed at the tool, not individuals, turning critique into constructive collaboration.

Why This Approach Strengthens Teams

When AI becomes a collaborative tool rather than a personal assistant, it helps interdisciplinary teams thrive by encouraging essential behaviors that research has found to be key [3]:

• Better Communication — Ideas are visualized instantly when using AI, reducing misunderstandings.
• Everyone’s Expertise Shines — AI produces quickly, but the team’s diverse expertise decides what matters.
• Safer Feedback — As mentioned, critique focuses on the AI output, not individuals, encouraging openness.
• Shared Understanding — Real-time iteration aligns teams more effectively than weeks of back-and-forth.

Beyond Research: A Broader Vision

This collaborative method extends beyond internal teams. Every individual contributes a unique understanding of the feature’s potential users and applications. Diverse perspectives offer a comprehensive view, and by integrating AI into the collaborative process, we can enrich discussions further. AI can introduce additional information and facilitate collective critique from various viewpoints, broadening the overall conversation. This approach empowers the team to think independently and utilize AI as a valuable tool, rather than relying on it as a decision-maker.

Imagine product kickoffs where PMs, designers, and engineers prototype together with AI. Instead of a slow loop of “design alone → present → refine,” you could iterate live in the same meeting.

Here’s an example scenario: a PM, designer, developer, and researcher work together using an AI tool trained on the latest PatternFly docs, or other design systems. The PM asks the AI “create a table view that….” The AI generates a quick prototype, which the designer immediately has feedback on. The designer then asks the AI “That looks good, but our users might not understand how they can manipulate the data. Let’s add more interaction to the table by…”. In that way, each member can advocate for the users’ challenges, while taking into consideration current technological limitations, or roadmap considerations.

You can even extend this to working with users. For usability testing, imagine evolving a prototype in real time with a customer. They give feedback, you tweak the design instantly, and they see their input reflected immediately. This transforms the “magic wand” concept into reality, not only gathering insights but truly empowering users to co-create.

With AI usage guidance continuing to evolve, there will be new ways to bolster this process. For example, using something like PatternFly’s recently published rapid prototyping guide [4] could help facilitate collaborative sessions like these, while adding loose guardrails to help ensure that prototypes align with best practices and existing patterns.

The Shift We Need to Make

Moving from solo AI use to human-human-AI collaboration isn’t just a workflow tweak; it’s a mindset shift. It speeds up alignment, opens new creative possibilities, and strengthens the human skills we risk losing if we rely on AI uncritically [1].

The opportunity is clear: AI is most powerful not when it makes me faster, but when it makes us better.

Sources

[1] Çela, E., Fonkam, M. M., & Potluri, R. M. (2024). Risks of AI-assisted learning on student critical thinking: a case study of Albania. International Journal of Risk and Contingency Management (IJRCM), 12(1), 1–19.

[2] Hitron, T., Morag Yaar, N., & Erel, H. (2023, March). Implications of ai bias in hri: Risks (and opportunities) when interacting with a biased robot. In Proceedings of the 2023 ACM/IEEE International Conference on Human-Robot Interaction (pp. 83–92).‏

[3] Nancarrow, S. A., Booth, A., Ariss, S., Smith, T., Enderby, P., & Roots, A. (2013). Ten principles of good interdisciplinary team work. Human resources for Health, 11, 1–11.

[4] PatternFly. (n.d.). Rapid prototyping. PatternFly. Retrieved October 15, 2025, from https://www.patternfly.org/patternfly-ai/rapid-prototyping/

If you have questions about the process, or run into any issues, please reach out to us on Slack. We can’t wait to read what you have to share!

Human-Human-AI interaction was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Co-author: Divyanshu Gupta

When the topic of open source comes up, there can be an instinct to focus more on the benefits for the project itself: the faster development, the bug fixes, and the innovation that comes from a global and diverse community. But what about the people behind the contributions? For many, contributing to an open source project is a journey of growth, learning, and finding their place in a larger ecosystem.

To truly understand how this dynamic plays out in PatternFly’s open source practices, we need to hear both sides of the story: the perspective of the project maintainer (PatternFly engineer Eric Olkowski) and the experience of the outside contributor (Divyanshu Gupta).

The Maintainer’s Perspective: A Welcome Helping Hand

I’m Eric, a software engineer and one of PatternFly’s core maintainers for the past 4 years as well as a maintainer of the open source self-learning curriculum, The Odin Project.

As an engineer on the PatternFly team, an active open source community can be a huge benefit. There’s always a backlog of issues we want to tackle but can’t prioritize due to more pressing tasks (something I’m sure many projects, open source or not, can relate to). This is where outside contributors like Divyanshu come in, and his impact on our project has been invaluable.

For any open source project, a dedicated contributor can be an incredible asset, particularly with smaller, more straightforward issues that are perfect for those with less experience. Divyanshu has helped us clear tickets that had been sitting in our backlog, enabling us to focus on larger, more complex features, while still allowing us to close out tickets that are still important for the project in different and various ways. His contributions are more than just code, though; they represent a lifeline for a team that’s juggling many different priorities.

But the benefits aren’t just for PatternFly. Divyanshu’s journey has been inspiring to watch. He has gained practical experience with new concepts, like using Handlebars for the first time, and has quickly adapted to our codebase conventions. He’s not afraid to ask questions, whether in Slack or on a pull request, and he’s taken the initiative to grab issues of varying difficulty. This willingness to engage directly with our team is great preparation for what it’s like to work on a professional team in the future. He even spoke at one of our Office Hours meetings, which is a fantastic step for anyone looking to build confidence in a public forum.

Beyond that, the potential mutual benefit lies in the fact that an engineer on an open source project like myself gets more opportunity to help support and mentor outside contributors, especially those who may be taking their first steps into the land of open source. Likewise, outside contributors like Divyanshu are able to receive feedback and insight from experienced engineers. While providing a more hands-on supporting/mentor-like role may not always be feasible (the more outside contributors or larger workload for a release, the less time we may have to be more hands-on), this potential is still a huge benefit for both sides.

Working with Divyanshu has been a pleasure, not just because of the work he’s done for our various repositories, but also because of his positive attitude. He’s incredibly easy to talk to, quick to learn, and consistently turns around quality work. Witnessing his growth has been one of the most rewarding parts of this experience, and I know he’ll continue being a lean, mean, accessibility, handlebars, React-y machine.

The Contributor’s Journey: From Student to Part of the Team

I’m Divyanshu, a final-year undergraduate student pursuing a B.Tech in Computer Science and Engineering, with a passion for making projects better through meaningful improvements.

My journey with open source began in 2023, during my second year of college. My first contribution was to a project called WasmEdge, where I wrote an installation script in Bash. It was a long process that took me about a month, but it taught me a lot about testing code and, more importantly, about communicating with maintainers.

After that, I made a few small documentation updates, but I struggled to find an issue where I could make a more meaningful contribution. I spent a year exploring different projects and learning about full-stack development, with a focus on ReactJS, TypeScript, and other related technologies.

In early 2025, I came across the Cockpit project and discovered that they used the PatternFly library for their UI/UX. This led me to PatternFly, a design library used by many Red Hat products that is actively maintained and open source.

My first pull request in the PatternFly ecosystem was for an accessibility issue, and it was a fantastic learning experience. It was the first time I had worked on a large-scale project, and it opened my eyes to the importance of web accessibility. From there, I tackled a variety of issues, from updating outdated dependencies to converting JavaScript examples to TypeScript, both of which helped me understand the codebase more clearly. I also worked on bug fixes and even a new feature request for PatternFly’s micro-animations epic.

More recently, I’ve contributed to the chatbot and core PatternFly repositories, getting to work with Handlebars and more accessibility fixes. The entire experience over the past six months has been an amazing learning opportunity. The engineers on the PatternFly team have been incredibly helpful whenever I’ve gotten stuck. I want to give a special thank you to Eric, who was a constant source of support.

I encourage anyone interested in open source to contribute to PatternFly or any other project you like. It’s an experience that will add immense value to your skills and your journey as a developer.

The key to open source success

Successful open source experiences must value and seek to understand the experience of both sides of the street. Outside contributions are inherently meaningful for open source projects; they allow new perspectives and skillsets to reinforce the evolution of the project. They can offer that critical helping hand when roadmaps grow too long. But, the experience of the contributor ultimately decides if the project will actually see community support. If the contributor’s experience is painful and fruitless, open source projects can easily lose interest before it gets a chance to take off.

The experiences in this story highlight an invaluable lesson for the PatternFly team: contributing to our codespace is a two way street. By collaborating with maintainers, contributors have the potential to make a greater impact, learn crucial lessons, and function as an extension of the core team.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Disclaimer: This story was drafted with AI assistance. All insights and final edits are the author’s own.

Open source is a two-way street was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

PatternFly is an open source design system, dedicated to building consistent, usable enterprise software. We operate on principles of transparency and community contribution, making PatternFly accessible to everyone. Our primary goal is to empower designers and developers, enabling them to work more efficiently and build better user experiences together.

We demonstrate these core principles here on our Medium publication, where we publish medium-to-long format articles with project details and the stories behind new features. We also empower members of our community to share their experiences in the field of UX.

Our community thrives of diverse voices — we welcome and encourage anyone interested to write with us! Here are some guidelines to help you create PatternFly’s next great article.

Requirements

1. In order to submit an article, you must have a Medium account and be following our publication.
2. By submitting your article, you agree to collaborate with PatternFly editors to ensure that your story aligns with our publication style.
3. Ensure your story is appropriate for our publication:

• Audience: UX industry professionals, PatternFly users, Red Hatters, and anyone interested in UX or open source design.
• Content focus: To share expertise, educate readers, and start conversations with the community about UX, open source design, and PatternFly

Writing your article

Generally, a story should focus on one of the following topics:

• PatternFly: A story about your thoughts, ideas, research, or tips for using PatternFly. This includes details about how you’re using PatternFly, as well as PatternFly-related updates.
• Open source: Your perspective on the world of open source design and development.
• UX thought leadership: Insights on design, research, development, writing, or other UX fields.

To get a better idea of how an article should flow, we recommend first reading some of our recently published pieces.

A note on AI-assisted writing

Please do not use AI to generate your entire story. While it’s a great tool for brainstorming and polishing your draft, we want your unique voice and experience to be front and center.

Even if you don’t consider yourself a writer, we want to hear your story in your words. Our editors are here to help with the rest!

Formatting your article

All PatternFly articles share a few consistent design aspects:

• Title and subtitle: Each article needs an attention-grabbing title and a short, descriptive subtitle.
• Header image: Articles begin with a header image that also serves as the story’s thumbnail. This image will be created by the PatternFly team to ensure visual consistency. To request an image, please leave a bracketed comment in your draft with a clear description. For example, [Image: A Figma blueprint-style image, with a button at the center that a mouse is hovering over. The button has a ripple design to indicate the animation.]
• Structure: Format your article with an introduction, a body with multiple sections, and a conclusion.
• Introduction: Preview the story you’re going to tell and let the intro lead into the first body section.
• Body: Add a subtitle that describes the content. Include relevant screenshots and images that help tell your story.
• Conclusion: Summarize your story and include any next steps or calls to action that you have.

Submitting your draft

Once you’ve written your article, follow Medium’s guidelines to submit your draft to our publication.

After you submit your draft, the PatternFly, our editors will do their best to review it within two weeks. You’ll be notified of any requested changes or feedback from our editors.

If you have questions about the process, or run into any issues, please reach out to us on Slack. We can’t wait to read what you have to share!

PatternFly Medium submission guidelines was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you think of animation in UIs, what comes to mind?

It’s easy to dismiss motion as a pretty decoration, something that simply brings excitement to otherwise dull interactions. And while there’s value in livening up our software experiences, what if the most effective animations were the ones you barely noticed? What if motion, like typography and color, was simply another tool to make complex products more clear and usable?

On the PatternFly team, this is a question we’ve been exploring since 2022.

As we’ve worked to integrate motion into our design system, we knew it had to be more than just a fun addition. It needed a purpose, and it needed to be true to our principles and values.

By meticulously researching and observing animation implementation in other design systems, we deliberately chose a path that prioritized the performance and stability that our users expect from PatternFly. After years in the making, we’re excited to dive into our new motion system — one that is intentional, consistent, engaging, and, above all, inclusive.

Designing for everyone with an accessibility-first approach

Even when it’s used intentionally and carefully, motion in UIs isn’t for everyone.

For some users, animation is a distraction. But for others, it’s more than just distracting–it’s harmful. Motion-based effects can trigger debilitating vestibular disturbances, and certain types of flashing can induce seizures in individuals with photosensitive epilepsy. Our intention for adding motion to PatternFly was always to help our users, not hurt them, so we took the responsibility of accessible design incredibly seriously.

Initial research, led by Sarah Rambacher, uncovered a set of strict, safety-first considerations. We learned that parallax effects and movement that runs contrary to a user’s scroll direction are highly likely to be problematic. We learned that flashing content poses specific risks, especially flashes between 5 and 30Hz and saturated red flashes.

With these clear considerations, our motion system prioritizes accessibility at its core.

• We follow the W3C accessibility guidelines to enforce a limit of either using less than three flashes per second, or ensuring that the flash is below the general flash and red flash thresholds.
• We keep our animations minimal and reduce their contrast to avoid potential triggers.
• Most importantly, we embrace the prefers-reduced-motion media query as a clear path to let users reduce the presence of animations. To ensure consistent functionality for animated components, we often reduce the animation duration to be imperceptible, rather than completely disabled. This approach prioritizes user safety without inadvertently breaking the experience.

Motion with a mission

At the foundation of our motion design philosophy is our declaration that motion in PatternFly must always serve a purpose. Well-designed animations can be powerful tools for improving usability. They can guide a user’s focus to what’s important, clarify the relationship between UI elements, and provide immediate, reassuring feedback that the system is responding to their actions.

This led us to our four guiding principles:

• Intentional: Motion should guide our users without being a distraction. It must be purposeful and simple, helping users complete their tasks and focus only on what is most important.
• Consistent: Motion should create a familiar and predictable experience. It should be applied uniformly to unify interactions and connect the user’s journey across different products.
• Engaging: Motion should captivate users and add character to the interface. It can celebrate user accomplishments and make common interactions more expressive and interesting.
• Inclusive: Motion must empower users by respecting their preferences. It must always be optional and accommodating to ensure a comfortable and accessible experience for all.

Take our expansion animations, for example. When a user opens an accordion or an expandable section, the content doesn’t just pop into view. Instead, a gentle fade and slide transition draws their eye to the newly revealed information. It’s a subtle effect, but it aligns with our principle of being intentional by guiding the user’s focus and making the new content easier to process.

Anatomy of a PatternFly animation

To ensure our animations will be consistent and scalable we developed a system of semantic motion tokens for duration, delay, and easing.

Under the hood, we chose a CSS-first approach. By prioritizing CSS transitions and animations over JavaScript-based solutions, we’re able to benefit from better performance. Because browsers are highly optimized to handle CSS animations, our animations will have smoother rendering and less technical overhead. We also focus on animating only the most performant properties, like transform and opacity, avoiding less efficient properties like height and margin that can negatively impact the animation quality.

Our decision to use a CSS-first approach was informed by a careful analysis of other major design systems, where we saw a variety of philosophies. Some relied more heavily on JavaScript, while others used less performant properties.

By analyzing the different methods being used, we could solidify our path and focus on prioritizing performance and stability.

1. Most performant actions used: Refers to using CSS properties like transform and opacity that don’t force the browser to recalculate page layouts, resulting in smoother animations and better overall performance.
2. Orchestration: Describes how an animation is triggered. MUI uses JavaScript to manage the start and end states and orchestrate CSS transitions.
3. Generally performant: While MUI might favor performant properties, some components animate height and can still lead to less smooth animations.

Now we’re movin’ and groovin’

Bringing purposeful motion to PatternFly has been a multi-year, highly collaborative marathon. The foundational system we’ve built demonstrates how animation, when treated with care, can make an interface more intuitive, accessible, and engaging.

With our initial phase of micro-animations complete, we can look toward the next horizon, like assessing performance and usability, understanding user sentiment, or even exploring more complex animations. We also look forward to ensuring that all animations are supported by default in a future breaking change release, removing the need for any opt-ins.

See the result of this multi-year effort:

• Dive into the details in our motion guidelines and developer documentation.
• Interact with the different animations in our guided animations tour.
• And let us know what you think.

Your experience will help us define what comes next.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Motion with purpose was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Believe it or not, PatternFly just turned 11! It snuck up on us too, but it’s a moment to reflect on our journey. PatternFly started as a way to bring consistency to Red Hat’s diverse product lineup. While our community has grown beyond Red Hatters over the past decade, our core mission of keeping Red Hat products consistent remains.

Lately, the PatternFly team has been focused on streamlining and optimizing our team structure and processes to clarify responsibilities and build a stronger foundation for future growth. Amidst big plans on PatternFly’s horizon, we found this moment to be perfect for a bit of reflection. It felt right for us to consider why we’re still here and why PatternFly is still the go-to design system for Red Hat.

So we took that step back, and as a team, we put our heads together to craft an updated message for PatternFly. Here’s what we settled on.

PatternFly is tailored for Red Hat’s unique needs

PatternFly isn’t a generic design system; it’s purpose-built to meet the complex demands of Red Hat’s enterprise software and its technical users. We offer a robust design kit for creating mockups that quickly translate to code.

Unlike other systems, PatternFly offers highly customized components and extensions to support large data sets, complex workflows, and real-time insights — including unique solutions like Topology, quick starts, and ChatBot. This tailored approach enables us align Red Hat’s brand across many unique user experiences. It helps us advance the look and feel of our products while prioritizing accessibility, and drive cross-product consistency by elevating UI patterns.

PatternFly is built for Red Hat needs, not simply adapted, ensuring the best flexibility and functionality for our diverse product portfolio.

PatternFly’s philosophy is inherently open source

PatternFly’s philosophy is inherently open source, aligning with Red Hat’s foundational perspective. As an MIT-licensed project, we actively encourage collaboration and promote transparency in our development practices. This not only builds a unified “open source” brand across Red Hat products, but also directly facilitates access and contribution, empowering product teams and the wider community to submit issues, feature requests, and solutions.

This open collaboration is essential for supporting complex enterprise workflows across Red Hat’s diverse portfolio. It has enabled us to deliver tailored solutions for data-heavy dashboards in Red Hat Insights, intricate multi-level navigation in Red Hat Advanced Cluster Management, robust enterprise tables and charts in Red Hat Satellite, and seamless terminal integrations in Red Hat OpenShift Platform. Our direct design-engineering integration, built with widely adopted React implementations, further ensures efficiency and alignment with industry standards within our open framework.

PatternFly is engineered for speed and control

PatternFly operates independently, a practice that is crucial to our efficiency and responsiveness. This allows us to set priorities based on timely Red Hat product needs, avoiding dependency on external roadmaps and delivering custom solutions when they’re most needed. Our React implementation also ships with built-in accessibility features, making accessibility integral to our development process rather than an afterthought.

By maintaining this level of control over our development, we can ensure strong security and compliance and predictably manage breaking changes, providing more stability and confidence for products built with PatternFly.

This unified approach to speed and control enables rapid iteration, ensuring PatternFly consistently evolves in alignment with Red Hat’s strategic direction.

PatternFly empowers developers, designers, and project managers

PatternFly provides a foundation and shared language between designers, developers, and product managers, supporting better communication, understanding, and collaboration.

PatternFly is designed to be a powerful ally for front-end developers, with comprehensive documentation, native accessibility support, and the flexibility of multiple libraries (React and HTML). Even entry-level developers can build effective, beautiful, and inclusive interfaces.

Both designers and developers get to benefit from our extensive design guidelines. From simple components to more complex UI solutions, PatternFly expedites the work of product teams by providing well-documented shortcuts that save time and effort.

Our open source approach directly empowers product teams to easily contribute or request changes, fostering a truly collaborative environment where designers and developers can actively shape the very system they build with.

Reflecting on “Why PatternFly?” reinforces a powerful truth: our design system is deeply interwoven with Red Hat’s commitment to open source, delivering robust enterprise experiences, and developer empowerment. With tailored features, independent development, and a collaborative foundation, PatternFly directly provides the consistency, control, and agility demanded by Red Hat’s diverse product portfolio. It’s a testament to what we can achieve when we build together.

For the PatternFly team, the next steps involve actively integrating this defined narrative into our core documentation, onboarding materials, and internal training. This perspective will also inform an upcoming team-wide workshop, focused on more deeply defining and understanding our users. As PatternFly matures and we continue to meet our community where they are, we’ll continually refine and evolve this message to keep our story and purpose clear and relevant.

We invite you to explore PatternFly.org to dive deeper into its capabilities and strategic impact. More importantly, we encourage you to join our vibrant community, contribute to our evolution, and help shape the future of enterprise user experiences the open source way.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Why PatternFly? was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a development manager on the PatternFly team, I’ve been closely observing the recent rapid and transformative surge in the accessibility and application of large language models (LLMs) like ChatGPT and Gemini. Naturally, I began testing these models’ ability to generate UI code using PatternFly, using a process that’s often called “vibe coding.”

For those unfamiliar, PatternFly is the open source design system leveraged across the Red Hat product portfolio. Its latest major version was released in October 2024. Given its extensive use in hundreds of Red Hat codebases and the wealth of documentation available on PatternFly.org — including hundreds of well-formed code examples, design guidelines, and demos — PatternFly offers a rich dataset for LLM training.

However, a significant hurdle emerged as I tried to vibe code with PatternFly: many of these widely used LLMs had training data cutoff dates in mid-2024, predating PatternFly’s latest major release. Consequently, my initial attempts to generate PatternFly code with these models were not as successful as I’d hoped. The code being generated was outdated and inaccurate. It quickly became clear that, for PatternFly to keep pace with the industry, we needed to cover that gap and better support UI developers to more efficiently build out PatternFly UIs using AI.

To determine a path forward, I experimented with a few different ideas, leveraging AI tools like Cursor and MCP.

Generating code with Cursor

One of the first tools I began experimenting with was Cursor, an AI-powered integrated development environment (IDE).

After just a few days, once Cursor had indexed all of my cloned PatternFly repositories, understood where to find the latest PatternFly documentation, and learned from my development work, I had created a powerful local context for vibe coding.

To take this progress one step further, I attempted to build a proof-of-concept frontend for a Llama-stack playground using only Cursor’s code generation capabilities. In just a few hours, I had a scaffolded front end. I continued vibe coding the features, leveraging my PatternFly knowledge to smooth out issues and bugs. This felt like a very promising first experiment.

Creating a shareable context with Cursor “rules”

After creating my initial POC, I turned to one of Cursor’s features that I was most excited about: rules. Cursor rules, which let you control how the model behaves, allowed me to intentionally craft a powerful, shareable local context for writing and debugging PatternFly code. I published a rudimentary tool called patternfly-cursor-setup (since renamed to to patternfly-ai-coding) to bundle this local context as a Cursor rule, enabling other developers to load it themselves when they wanted to vibe code a PatternFly UI.

My Cursor rule was built to give LLMs some guidance on how to avoid common pitfalls. This included things like ensuring current PatternFly class names are used, avoiding custom CSS when possible, and correctly using PatternFly components (like popper props for dropdown menus). The rule also instructed the LLM to index PatternFly’s documentation and code repositories, to ensure up-to-date context.

To determine its effectiveness, I was able to share patternfly-cursor-setup with PatternFly team members and colleagues at Red Hat. In live demos, I’ve demonstrated Cursor’s ability to rapidly generate 144 lines of PatternFly code for a complex table feature with no custom CSS. Since my initial demos, a number of designers on Red Hat’s UXD team have begun experimenting with my tool and have even reported success in vibe coding a PatternFly UI as a working llama-stack frontend from scratch.

Experimenting with MCP servers

To more robustly support vibe coding, the logical next step for both the PatternFly team and myself was to explore how feasible it would be for PatternFly to deliver a Model Context Protocol (MCP) server. Doing so would offer a centralized, tool-agnostic way to provide developers with crucial contextual information for PatternFly code generation, moving beyond Cursor-specific rules.

So far, we’ve successfully included all of PatternFly’s most up-to-date documentation in the Context7 MCP server. Context7 can be set up in any environment that leverages an MCP client, such as Cursor, Claude Desktop, Windsurf, or Roo. This means anyone using Context7 will have direct access to current PatternFly code examples and documentation without needing to switch tabs or risk encountering outdated information or broken links due to old training data cutoff dates.

Setting up this MCP server was incredibly easy and proved remarkably effective in improving my attempts to quickly vibe code valid PatternFly.

Abstract coding rules and guidance for any environment

After experimenting with Cursor and MCP servers, I started hearing from various PatternFly users across Red Hat who were also experimenting with generating PatternFly UIs. But, they were using different code generation tools that I had experimented with.

To better understand how others were experimenting I reached out to Peter Double, a colleague and technical product manager within Red Hat’s AI space, to learn more about their AI-assisted engineering practices and gather feedback. Peter was enthusiastic to hear about my experiments and the patternfly-cursor-setup tool I’d been developing. He had a vision for empowering engineers with minimal frontend experience to generate web applications using PatternFly, both from scratch and by converting from other frontend frameworks.

My collaboration with Peter led to an evolution of the patternfly-cursor-setup tool, which has since been renamed patternfly-ai-coding. Its primary aim has expanded beyond offering PatternFly context via Cursor to now to offer a comprehensive, AI-friendly knowledge base and starting point for developing PatternFly applications with any tool.

By indexing relevant documentation and providing context files, this repository helps ensure that any AI model can deliver accurate, consistent, and best-practice guidance while you code. The core components of this repository include its README and additional markdown files throughout the project, which provide indexed documentation, guidelines, and best practices to support AI-assisted PatternFly development, regardless of which AI coding tool you use.

To test this updated patternfly-ai-coding tool, Peter and I began more experiments to determine how well it equipped AI agents with the knowledge needed to generate PatternFly UIs.

Peter integrated the tool into the codebase of a generic React application that wasn’t using PatternFly, then instructed Roo to convert the entire application to PatternFly, leveraging guidance contained within patternfly-ai-coding.

Meanwhile, I attempted to vibe code a new PatternFly starter application using React 19 and Vite as its build tool. I included all the documentation from patternfly-ai-coding directly within this seed application to explicitly support vibe coding workflows. The results from that experiment are available in my patternfly-vite-seed-app project.

Strategic vision and future work

While my initial experiments on vibe coding with PatternFly have been exciting and fruitful, it’s not something I’m quite done with.

For next steps, a key priority for the PatternFly team is building a proof-of-concept for our own MCP server to better package and deliver these kinds of resources. Fortunately, ongoing efforts to enhance the infrastructure supporting PatternFly’s documentation are perfectly aligning with this goal, making it possible to move forward sooner.

This improved documentation infrastructure will include a comprehensive REST API for querying information about PatternFly’s components and design system, which future MCP servers can leverage significantly. We’ve also been conducting user research on our website’s information architecture and navigation, which has already provided valuable insights into how our documentation better support AI-enabled rapid prototyping.

The PatternFly team is highly motivated to intentionally enhance PatternFly for AI-enabled development. I envision a future where non-UI data scientists are well-enabled to build potentially-incorporable code using PatternFly patterns. My experimentation so far has helped to ensure that AI-generated prototypes are aligned with engineering standards, proactively addressing concerns about AI-generated code and laying the groundwork for better practices related to AI coding.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Vibe coding and beyond was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.

I am on an engineering team, but I’m pretty far from understanding anything engineery. I studied public relations and advertising at my university, yet a few years after graduating I somehow found myself working as a UX content designer on an engineering team at a software company.

While nobody expects me to understand everything, it’s immensely helpful to have some understanding of the product you’re working on and its limitations. I work with some incredibly smart people, which means sometimes they speak way above my understanding. I’ve had to learn how to get help on all things technical.

Tips for working with people more technical than you:

1. Get a technical mentor

If your company offers mentorships, take advantage of it. If they don’t, ask your manager if they have anyone they could set you up with for an unofficial mentorship. I’ve gotten lucky with some amazing mentors. I like to use a mentorship rather than just asking my teammates all of my questions because my mentor signed up for this and has time dedicated to helping me. I’m sure my teammates would gladly answer a few questions, but this way I know I have time set aside to go over any questions I might have. I use my time with them to ask them to break down concepts into basic ideas.

2. Ask the dumb questions

Learning to give up my ego and just ask the “dumb” questions was hard. But more times than not, my question wasn’t actually dumb. Sometimes nobody even knew the answer. I also work with a lot of really smart people who are a lot more educated in these subjects than I am. Of course, I shouldn’t know as much as these experts– I haven’t spent nearly as much time learning and working with this technology. When I realized I’d rather do a good job on my work than appear smarter than I am, I started asking all of my questions.

3. Have Chat GPT explain it like you’re five

If there is a new subject matter that I can’t seem to figure out (documentation is often very technical and can be hard to understand if you don’t have basic knowledge), I will ask Chat GPT or another AI chatbot to explain it to me like I am a child. I also sometimes ask this to my mentor. Usually, the explanations are filled with analogies (and if they aren’t, I ask them to give me some) and those are really helpful.

4. Be corrected

Don’t be afraid to be wrong. As a content designer, I constantly send copy for people to look over and often they come back with, “This isn’t technically correct. It should be …”. Then, I know what I need to change it to.

5. Be transparent

Admit you might not know that much about a subject. I’ll begin a meeting by, “To be completely honest, I don’t come from a technical background and I don’t know much about this subject.” This sets the expectations that people might need to explain concepts to me and opens the door for questions.

If you work with people more technical than you, what are your tips?

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

Figuring out what people are talking about at work was originally published in PatternFly on Medium, where people are continuing the conversation by highlighting and responding to this story.