PatternFly’s foundations and styles lay the groundwork for all components and extensions that we offer. These visual and structural frameworks describe how all of our components should be built and designed, with additional standards and guidance to help designers and developers work together more efficiently and create clear and consistent product experiences.
How do I use foundations and styles?
Our foundations and styles are the “atoms” of our design system, so their usage is typically built into PatternFly features. There are a variety of ways that this plays out in PatternFly, some of the most common being:
- Design tokens: Foundational design choices like color, spacing, and typography are implemented as reusable semantic variables for consistency.
- Components: Multiple foundations and styles are built into components to ensure visual and interactive consistency across UI screens.
- Patterns: Components are combined within foundational layouts to solve common design problems.
- Accessibility: Foundations of color contrast, typography, and focus states influence the rules and guidance for building accessible products.
Although many of these design decisions are already made in PatternFly, there might be instances where you need to adjust some of these smaller, foundational design decisions to better fit your use case. You can find specific guidance for usage and customization in the documentation for each foundation or style.
Explore foundations and styles
The supported color palettes that all PatternFly features use to ensure accessible contrast and enable flexible, effective visual communication.
The semantic variables that store and manage all visual design attributes to ensure consistency across products, including color, typography, and spacing.
The set of simple, visual symbols used to represent common concepts and quickly indicate functionality.
The structural options used to arrange and align components on a page, managing spacing, ordering, and flow to provide support for responsive design.
The framework and rules for component animations that ensures motion in PatternFly is intentional, engaging, consistent, and inclusive.
The set of dimension design tokens that define padding and margins between UI elements to ensure that designs are visually balanced.
Pre-made combinations of design tokens that adjust the visual appearance of all UI elements at a global level to support different stylistic and accessibility needs.
The rules and font choices that define text size, weight, and hierarchy. They ensure consistent legibility and a strong visual hierarchy across screens.
A defined set of CSS classes that allow developers to quickly and safely apply further customizations or modifications to UI elements in their product.
