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.
If necessary, complete any XD trainings before requesting an invite to access the design system kit library.
Request an invite
Contact us about what you are working on and then we will send you an invite to access the library.
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.
Load the library
When syncing is done, the library will appear in the Libraries panel. Selecting this library will load all of the assets.
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.
Read the documentation
Read the documentation on this website if you need to educate yourself about using our components.
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.
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.
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
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
This example uses brand and design system assets, but does not align to brand standards or the design system
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
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 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.