PatternFly Design Kit

The PatternFly Design Kit is a collection of Figma components that make it easy for designers to create low and high-fidelity design mockups that accurately represent the PatternFly components and layouts.

The PatternFly 6 design kit gives you access to:

• Our complete component library
• Our design token system
• Demos and patterns of full-screen designs

The Figma design kit includes:

• PatternFly 6: Styles and Component library – includes all standard components, icons and design tokens
• PatternFly 6: Patterns & Extensions Library – provides several patterns, extensions and demos that solve common UI problems by grouping multiple PatternFly components into reusable layouts

6.5 Design Kit Updates:

We've aligned styles in the classic PatternFly experience (now referred to as our Default theme) more closely with the Red Hat Design System. These changes enhance brand consistency and usability:

• Links: Now feature a subtle gray dotted underline that becomes a solid, active color on hover/focus.
• Navigation: Active items now utilize a vertical "accent" line for better visual emphasis.
• Controls: Borders of controls are now more boldly outlined for better interaction indication.

We've added new variants to support our evolving visual language and Red Hat-specific user journeys:

• Iconography: We’ve updated our icon set to use Red Hat brand icons. This is an automatic change handled via a single class, ensuring cross-platform consistency without much manual lift.
• Hero: A new card-like component for attention-grabbing callouts at the top of pages.
• Docked navigation: A space-saving solution that minimizes navigation items to icons while remaining expandable.
• Compass: A conversational-first layout for generative UI, placing a ChatBot bar below content with surrounding toolbars.

Themes

We're excited to offer PatternFly's first major theme variant: the Project Felt theme. It targets more familiar Red-Hat experiences through red accent colors and pill-shaped radii. Best of all—Project Felt is built entirely with our design token system, meaning no breaking change is required to add it to your product.

Glass and High Contrast Mode

PatternFly 6.5 includes two different contrast modes -- High Contrast and Glass. Now fully released and supported across light and dark color schemes, high contrast mode improves product accessibility and provides users with more control over their experiences. Validated by user research, it utilizes an updated color palette and modified global border rules to meet enhanced WCAG AAA contrast ratios. Glass mode is a new contrast mode that can be used in both the Default and Project Felt themes. "Glass", enabled by an intentional set of design tokens, adds transparency and depth to specific components so UIs can feel more layered.

Updating the kit

The PatternFly team will release updates accordingly as part of their sprint schedule. Be sure to revisit our Figma community page in order to download the latest updates. If you are working in the main community file, Figma will automatically receive library updates. If you are working from a local file, you will not receive automatic updates and will need to update the PatternFly library manually.

Filing bugs

If you believe that you've come across a PatternFly Design Kit bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:

1. View the documentation for the feature to confirm that the behavior is not functioning as intended. Friendly Reminder: We try our best to match the component within Figma to what is represented on patternfly.org. Double check to verify that this is a Figma design kit bug vs. a general design enhancement.
2. Search open issues in this repo to see if a related issue already exists.
3. File an issue in this repo and label it with "bug". If something is wrong with any of the Figma libraries, please contact Lucia Boehling, Kayla Chumley or Bekah Stephens.

Contributing to the kit

We welcome contributions from our community of PatternFly designers. Reach out to the team within the patternfly.slack.com workspace via the #patternfly-design-kit channel, and our team will assist with questions on design kit enhancements.

Contributing a new or edited component, pattern, or extension

Follow these steps:

1. Create a copy of the PF6 Design Kit Figma file you are working from or create a new branch hosted in Figma.
2. If the concept you're working on fits within an existing design, add it to that existing component/pattern/layout page tab. If it doesn't fit into an existing component/pattern/layout, create a new page and then start fresh from there.
3. Copy a link to your Figma file or branch and attach it to the GitHub issue it is related to. Add your contribution or enhancement topic to the PatternFly & UXD Design Share agenda. Discuss your contribution idea with the broader team. Be sure to send a Slack message to the PatternFly design team for additional support.

Questions?

If you have any questions or concerns, please contact Lucia Boehling, Kayla Chumley, Bekah Stephens, or Andrew Ronaldson.