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.
Components, like buttons and alerts, can be assembled together to build applications.
Layouts are generic tools that allow you to structure and organize the content on your pages.
Demos use components and layouts in combination to show you how to build more complex structures and application views.
Style guidelines define foundational elements of the design system, like color, typography, and spacing.
Usage and behavior guidelines communicate standards and best practices for common design patterns like navigation, dashboards, or forms.
Content guidelines provide principles and best practices around writing for user experience along with general voice and style guidance.
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.
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.