<commit_before>---
id: Design
title: Design with PatternFly
section: get-started
---
import './get-started.css';

Whether you are converting from a PatternFly 3 application or starting fresh with the latest and greatest PatternFly design system, this document is intended to help provide designers with information regarding resources and support available.


## Getting the design kit

### Before you begin
The design kit is a collection of Sketch assets that make it easy for designers to create hi-fi mockups that accurately represent PatternFly components and layouts. It works with Sketch libraries.

To use it, you need to install [Sketch](https://www.sketch.com/) version 47 or above. For users who do not have access to Sketch (non-Mac users), a subset of functionality from our Sketch files, like symbols and fonts, can be imported and used in the free design tool, [Figma](https://www.figma.com/). Learn more about importing Sketch files in [the Figma documentation](https://help.figma.com/hc/en-us/articles/360041003114-Import-files-into-Figma).

### Download the template file
1. Access the [PatternFly template file](https://www.sketch.com/s/729c2eee-e8b6-4fcd-8a79-f6faa8c30f89) on Sketch cloud.
2. Click **Download Document** to open the file. Then, click **File** →  **Save as template**.

### Add the symbol library
3. Access the [PatternFly design library](https://www.sketch.com/s/2cf1063b-5283-4e0b-b8a6-cbb1ac07e29e) on Sketch cloud.
4. 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.

### Download the font
5. PatternFly currently uses Red Hat Text and Red Hat Display. To download these fonts, go to https://github.com/RedHatOfficial/RedHatFont and download the whole repository. Then select **all files in the "TTF" folder** and double-click. This will install them onto your computer locally.

### Looking for the Overpass design kit?

We still host the Patternfly 4 Overpass library and template files on Sketch Cloud, although support for updating these files ceased in October. This means that any updates that come along with PatternFly releases will not be mirrored in this kit.

You are able to access them here:

1. [Add the symbol library](https://www.sketch.com/s/92361fff-e23d-4d73-be75-3d9f8d43490a)
    - Make sure you download the Overpass font at https://overpassfont.org/ and select **Desktop OTF files**.
2. [Download the template file](https://www.sketch.com/s/93349c0d-5087-4428-8424-be174d7e3f67)

If you’d like to avoid out-of-date designs, we recommend moving to our Red Hat font and using the design kit supplied there!

## What's in the design kit?

### The template file

The template file contains complex components and demos like charts and forms that make it faster and easier for you to add common design patterns to your wireframes. To view template examples click [here](/components/about-modal/html-demos).
<commit_msg>Updating get started - design instructions (#2429)<commit_after>---
id: Design
title: Design with PatternFly
section: get-started
---
import './get-started.css';

Whether you are converting from a PatternFly 3 application or starting fresh with the latest and greatest PatternFly design system, this document is intended to help provide designers with information regarding resources and support available.

## Getting the design kit

The PatternFly design kit was originally developed for [Sketch users](#sketch-users), but is now available for use through [any design tool](#using-other-design-tools).

### Sketch users

#### Before you begin
The design kit is a collection of Sketch assets that make it easy for designers to create hi-fi mockups that accurately represent PatternFly components and layouts. It works with Sketch libraries. To use it, you need to install [Sketch version 68](https://www.sketch.com/) or above. 

#### Download the font
1. PatternFly currently uses Red Hat Text and Red Hat Display. To download these fonts, go to https://github.com/RedHatOfficial/RedHatFont and download the whole repository. Then select all files in the "TTF" folder and double-click. This will install them onto your computer locally.

#### Download the template file
2. Access the [PatternFly template file](https://www.sketch.com/s/729c2eee-e8b6-4fcd-8a79-f6faa8c30f89) on Sketch cloud.
3. Click **Download Document** to open the file. Then, click File → Save as template.

#### Add the symbol library
4. Access the [PatternFly design library](https://www.sketch.com/s/2cf1063b-5283-4e0b-b8a6-cbb1ac07e29e) on Sketch cloud.
5. 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.

### Using other design tools

#### Before you begin
For non-Sketch users, we have created a compatible version of the symbol library to fit with any design tool of choice. We recommend importing the SVG versions into your design tool. Download the SVG set in the patternfly-design-kit repo [here](https://github.com/patternfly/patternfly-design-kit/tree/master/Symbols-SVGs).

#### Download the font
PatternFly currently uses Red Hat Text and Red Hat Display. To download these fonts, go to https://github.com/RedHatOfficial/RedHatFont and download the whole repository. Then select all files in the "TTF" folder and double-click. This will install them onto your computer locally.

### Looking for the Overpass design kit?

We still host the Patternfly 4 Overpass library and template files on Sketch Cloud, although support for updating these files ceased in October. This means that any updates that come along with PatternFly releases will not be mirrored in this kit.

You are able to access them here:

1. [Add the symbol library](https://www.sketch.com/s/92361fff-e23d-4d73-be75-3d9f8d43490a)
    - Make sure you download the Overpass font at https://overpassfont.org/ and select **Desktop OTF files**.
2. [Download the template file](https://www.sketch.com/s/93349c0d-5087-4428-8424-be174d7e3f67)

If you’d like to avoid out-of-date designs, we recommend moving to our Red Hat font and using the design kit supplied there!

## What's in the design kit?

### The template file

The template file contains complex components and demos like charts and forms that make it faster and easier for you to add common design patterns to your wireframes. To view template examples click [here](/components/about-modal/html-demos).

{'fraction_non_alphanumeric': 0.07737824305871643, 'fraction_numerical': 0.029737520861781216, 'mean_word_length': 4.4479338842975205, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 18, 'lorem ipsum': 0, 'www.': 11, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6879386', 'n_tokens_mistral': 1908, 'n_tokens_neox': 1773, 'n_words': 879}