About PatternFly 4

PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences.

Basic structure

Components

Components, like buttons and alerts, can be assembled together to build applications.

Layouts

Layouts are generic tools that allow you to structure and organize the content on your pages.

Demos

Demos use components and layouts in combination to show you how to build more complex structures and application views.

View components, layouts, and demos in HTML/CSS

View components, layouts, and demos in React

Design guidelines

Styles

Style guidelines define foundational elements of the design system, like color, typography, and spacing.

Usage and behavior

Usage and behavior guidelines communicate standards and best practices for common design patterns like navigation, dashboards, or forms.

Content

Content guidelines provide principles and best practices around writing for user experience along with general voice and style guidance.

View design guidelines

Additional tools

CSS variables

You can customize PatternFly for your project using the CSS variable system, which enables you to change style elements like color across your project. The CSS variable system is a two-layer theming system where global variables inform component variables.

Global variables Global variables define and enforce style elements (like global values for color, spacing, and font size) across the entire system.

Component variables Component variables are used to define custom properties at the component level. Component variables are always defined by global variables.

Learn more and view CSS variables

Utilities

Utilities are a set of classes that enable you to further customize and modify elements in your project without having to write any custom CSS.

For example, you might use a utility class to add additional spacing between elements, align content in a layout, or even add a box shadow to an element.

View utilities