Design with PatternFly

Before you begin, check out our overview of PatternFly 4 to get acquainted with the basic elements of the design system.

Get set up

Download and install the PatterFly 4 design kit

The design kit is a collection of assets that make it easy for you to create high-fidelity design mockups using PatternFly 4 components.

The design kit works with Sketch libraries. To use it, you can get Sketch version 47 or above. For users who do not have access to Sketch, a subset of functionality from our Sketch files, like symbols and fonts, can be imported and used in the free design tool, Figma. Learn more about importing Sketch files in the Figma documentation.

Download the design kit file:

Add the Sketch library

  1. Access the PatternFly 4 design library on Sketch cloud.
  2. Click Add library to Sketch on the bottom right to add the library. You'll be prompted with a modal. Click Add library to Sketch again. Sketch will show you the library in your preferences window. You're all set!

Start designing

PatternFly is made up of modular components that can be assembled in a variety of ways to build applications and interfaces, along with styles, standards, and design guidelines to help you choose and use the right components for your project.

Start with styles.

What typography should you be using? What about colors? Spacing? Check out styles to learn everything you need to know about our foundational design elements.

View styles

Get familiar with usage and behavior guidelines.

Should you use a wizard or a form to solve this problem? How do you write a good button label? Which navigation makes the most sense? Check out our design guidelines to choose and use the right components for your use case.

View usage and behavior

Start building with components.

What does a toolbar look like? What about a filter chip? Components are the building blocks of the design system. Check out individual component pages to view examples, understand states and behaviors, and check out the code samples (if you’re into that kind of thing).

View HTML/CSS components

View React components

Still feeling unsure? See all the pieces working together with demos.

What does it look like when you combine all the ingredients? Demos provide examples of a few common ways you might combine layouts and components to give you an idea what’s possible.

View HTML/CSS demos

View React demos