Design system kit

Overview

The design system kit is an Adobe XD library of themed colors, character styles, and components used to design Red Hat web properties. Based on the foundations of PatternFly and the Red Hat Brand Standards, the design system kit enables users to design consistent experiences that reflect the Red Hat brand digitally.

Get started

If necessary, complete any XD trainings before requesting an invite to access the design system kit library.

1

Request an invite

Contact us about what you are working on and then we will send you an invite to access the library.

2

Sync the library

Once you accept the invite, a library of components will sync in XD. There are a lot, so this might take some time.

3

Load the library

When syncing is done, the library will appear in the Libraries panel. Selecting this library will load all of the assets.

About the Libraries panel

Load the library

When the design system kit library is done syncing, it should appear in the Libraries panel in XD. You can view the Libraries panel by pressing Shift+Command+Y (or Shift+Control+Y on Windows). Clicking on the library will load all of the colors, character styles, and components for you to work with.

If you do not see the library, click on the Manage libraries link in the Libraries panel. The library might be turned off for you. To turn it on, toggle the switch as pictured below. It does take some time for XD to sync our libraries, so be patient. Remember that our libraries require access to Adobe Creative Cloud through a Red Hat account.

Still need assistance? No problem, just contact us and we will make sure you get connected.

4

Browse around

Take some time to familiarize yourself with our libraries, foundations, and components by browsing around.

5

Read the documentation

Read the documentation on this website if you need to educate yourself about using our components.

6

Create experiences

Create designs and experiences by dragging and dropping components and using other features like prototyping.

Working in XD

Dragging and dropping

To use components in XD, find your desired component in the Libraries panel and add it to your design by dragging and dropping. To replace a component, switch to the Layers panel by pressing Command+Y (or Control+Y on Windows). Select the component (the layer with a chain icon on the left), switch back to the Libraries panel, and drag and drop a new component on top of it. To reset a component, right-click on the component and select Reset to Main State.

Responsive resize

Some components are responsive if you need to use them on small breakpoints. You can change the width of components in the Width field or by dragging them to your desired size.

Component states

Some components include Component States which are states you can toggle to display various specs or design options. Some examples of component states include the following.

• Collapsed or expanded states
• Color options
• Interaction states
• Light and dark themes
• Spacing guidance

Best practices

When creating the design system kit library, our goal is to give users tools to create on-brand and on-system Red Hat experiences for the web and beyond. There are lots of ways to create high-quality experiences using the assets included in this library. However, there are also lots of ways to stray off-brand and off-system. When working with the assets in this library, the following resources should help you stay aligned.

• Design system foundations, elements, and patterns
• Brand standards like icons, illustrations, photography, etc.
• Reference existing pages so you can see how brand and design system assets are being used
• Home page
• Product page
• Resource page

This example uses brand and design system assets, but does not align to brand standards or the design system

Contributing

We welcome any feedback regarding the design system kit library and we want you to contribute to its growth. Feel free to contact us about any of the following.

• If you would like to request a new foundation or component, describe what you would like created and why
• If you need something that already exists added to the library, tell us about it
• If you feel something you created should be added, send us your designs and we will review them
• If you think something needs to be updated, describe which asset and what the updates are

Frequently asked questions

How do foundations and components get updated in the library?
The design system team meets regularly to discuss new requests or updates. All requests or updates are assigned a priority in our GitHub backlog. Once a priority is set and a schedule is agreed upon, design or development work begins. When the work is complete, the design system kit library, this website, and our repos are updated. All updates are then communicated to the team via e-mail.

How can I report a bug?
Contact us or submit a Usersnap ticket. If something is broken or if the bug is high priority, create a new topic in the Red Hat Design System Google Chat group.

How can I contact the team about something else?
For other questions, additional support, or to get training, contact us or create a new topic in the Red Hat Design System or PatternFly Elements - Web components Google Chat groups.