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.

Browse design system kit assets Download Adobe XD

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.

Library name

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.

Turn on library

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.

Dragging and dropping design system kit components

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.

Responsive resizing design system kit components

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
Design system kit component states

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 kit best practices

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

Warning

When changes to a component are made, you must update that component in XD in order to see the changes.

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.

© 2021-2023 Red Hat, Inc. Deploys by Netlify