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.

Adobe XD

The Design system kit is maintained in Adobe XD and Adobe Creative Cloud. They need to be installed if you want access to themed colors, character styles, and components. Once a license is granted, Associates can install their desired app(s) from within Adobe Creative Cloud. Contact your manager for further assistance if necessary.

Get started

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

1

Request an invite

Contact us and tell us about you and what you are working on in relation to the Design system kit.

2

Sync the library

When you accept the invite, the library will sync in XD. There are a lot of assets, so it might take some time.

3

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 the colors, character styles, and components for you to start working with.

If you do not see the library, click on the Manage libraries link in the Libraries panel. The library may need to be enabled by turning on the switch. It takes some time for XD to sync our libraries, so be patient. Remember that your Adobe account needs to be on the Adobe for Teams plan if you want to use this library.

Still not working? For further assistance, contact us.

Load the library

When fully synced, the library will appear in the Libraries panel in XD. Clicking on the library will load the assets.

4

Browse around

Browse this website to familiarize yourself with our Libraries, Foundations, and Components sections.

5

Read documentation

Read through documentation to learn everything there is to know about using our assets in your designs.

6

Create experiences

Create engaging experiences in XD by dragging and dropping components and using other features like Prototyping.

Working in Adobe XD

Dragging and dropping

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). Highlight the layer with a chain icon to the left, switch back to the Libraries panel, and drag and drop a different component on top of it. To reset a component back to the default, right-click on the layer with a chain icon to the left and select Reset to Main State.

Responsive resize

Some components are responsive if they need to be used on small screens. You can change the size in the Width field or by dragging the component to your desired size.

Component states

Some components feature Component States or options that you can toggle to show different kinds of specs or states. Toggling each component state will display interaction states or other custom options.

• Default State - The default appearance of a component
• Focus State - Represents an element that is selected to receive keyboard events or other user inputs
• Hover State - Represents an element that is being moused over without user activation
• Active State - Represents an element that is being activated by a user
• Spacing - Overlays the correct spacers in between each element according to the design system

Best practices

Our goal with the Design system kit is to enable users to design Red Hat web properties using themed assets. There are endless ways to create great designs using these assets. However, there are also endless ways to create designs that do not align to our brand standards and design system. When using the Design system kit, these resources will help you stay aligned.

• Design system Foundations or Components
• Brand standards like icons, illustrations, photography, etc.
• Existing pages so you can see how assets are being used to create cohesive experiences
• Home page
• Product page
• Resource page

Example of a design using Design system kit assets, but does not align to the design system

Contributing

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

• If you need a new color, character style, or component, describe what you want created and why
• If you need something that already exists to be added, tell us about it
• If you feel something you created or built should be added, send us an XD file or screenshot and we will review it
• If you think updates need to be made, describe which asset and the specific updates

Warning
When changes to a component are made in XD, you must update that component manually or drag and drop a new one to see the changes.

Frequently asked questions

How do colors, character styles, or components get updated?
The Design system team meets weekly to review new requests or updates. If you submit a new request or update, it is assigned a priority in our backlog. Once the priority is set and a schedule is agreed upon, design or development work begins. When the work is complete, the new request or update is implemented and you will be notified.

What if I want to report a bug?
Contact us and include screenshots or a detailed explanation. If something is broken or if the bug is high priority, chat with us in the Red Hat Digital Design System Google Chat group.

How can we contact you about something else?
For other questions, additional support, or to get training, contact us or chat with us in the Red Hat Digital Design System or PatternFly Elements - Web components Google Chat groups.