Designers

Introduction

Welcome to the Red Hat Design System (RHDS) for digital experiences. If you need to design something using our design system, you have come to the right place.

Follow these steps to get started and e-mail design-system@redhat.com or connect with us on Slack if you have any questions along the way.

Explore brand standards

Our Brand standards are the source code of the Red Hat brand. Using brand standards as the starting point for every project ensures that every interaction with Red Hat reflects our brand personality, brand strategy, and consistent visual language. Consistency is how we create authentic relationships and credibility with our customers, partners, and contributors.

The text 'Brand Standards' with small illustrations of color swatches, dropdown element, and resizing an icon

Learn about our design system

Our design system libraries and the documentation website offer assets and guidance needed to create digital experiences. Please read through each section to have a better understanding of how to use our design system.

Foundations

Foundations are how we express our brand through color, space, typography, etc.

Design tokens

Design tokens are how we translate our design language decisions into code.

Elements and patterns

Our libraries include elements and patterns you can use to create digital experiences.

Accessibility

Designer-specific guidelines equip you with the information to create inclusive digital experiences.

Access Figma

You need a Figma license to access our libraries. When you are granted a license, use your Red Hat e-mail address to log in to Figma via SSO authentication. When you are logged in, you should be able to access our libraries and add them to all of your drafts or individual files.

Figma's Libraries modal showing the Red Hat Design System library is added'

Agency access

If you work with an agency and do not have a Red Hat e-mail address, e-mail design-system@redhat.com and we will invite you to view our libraries.

Use libraries

Our libraries are built and maintained in Figma, our primary design tool. By using our libraries, you will automatically receive notifications as we make updates to our foundational styles, elements, and patterns (as long as you do not detach them). This ensures that your designs are current and representative of the latest design system release.

Warning

We no longer support Adobe XD. You need to migrate to Figma in order to access and use our most up-to-date libraries. Do not continue to use Adobe XD for any kind of design work. If you need assistance migrating XD files to Figma, e-mail design-system@redhat.com.

Core and subsystem libraries

The RHDS library is our core library that includes our foundational styles, elements, and patterns needed to create digital experiences. We also offer access to subsystem libraries that include project- or team- specific patterns that pull from the RHDS library.

Library name Use case
RHDS Our core library for creating Red Hat digital experiences.
PatternFly A library for creating application interfaces.
Tier 1 Events A library for tier 1 events, like Summit and AnsibleFest.
Brand media A library for Red Hat original media like podcasts and video series.
Page builder A library with a boilerplate template and components specific to Drupal's page builder.

Work in Figma

Brand assets

If your project requires brand assets, the Brand standards website has links to assets including icons, fonts, photography, etc. Icons will be accessible via a subsystem Figma library very soon.

Inserting elements and patterns

To use an element or pattern in your design, select the Assets tab. Find your desired asset and drag it onto the canvas or frame. You can also preview an asset by selecting it. When you are satisfied with the preview, select the Insert instance button and the asset will appear on the canvas or frame. If you have questions about how to use an element or pattern correctly, review the documentation or connect with us on Slack.

Figma's asset preview dialog box for a card component with an 'Insert instance' button

Properties

Properties are changeable aspects of an element or pattern and you can see them in the right sidebar when the asset is selected. Properties change the appearance of an element or pattern so they can be used for different use cases. Some examples of properties include state, theme, variant, etc.

Diagram showing a blue primary button being changed to a destroy button with Figma's properties selector

Responsive resize

Most elements and patterns can be resized to fit different viewport sizes. You can change the height or width of an asset by dragging an edge or corner.

Screenshot of a progress steps element being resized by dragging the bottom right corner

You can also use Constraints to tell Figma how layers should respond when their frames are resized.

Screenshot of a selected progress steps element next to Figma's constraints settings

Instance swap

To speed up your design process, you can swap elements or patterns instead of dragging and dropping over and over again. Use the Instance menu to swap one element for another from any enabled library. Changing a property will not replace an element, but instance swapping will.

Diagram of a primary CTA being changed to a secondary CTA via the instance swap panel

Get familiar with GitHub

GitHub is how we maintain the design system. We also use it to track changes, update the documentation website, store design tokens, and more in our GitHub repo. To contribute to the design system, you will need to familiarize yourself with creating an issue using one of our templates, creating a discussion, and reviewing work in pull requests.

The GitHub Wiki can help you get started, and you can always chat with us for additional help.

Screenshot of the red-hat-design-system GitHub repo's Code tab

Best practices

Detaching an instance

Currently, you cannot add new items to an element or pattern instance that you pull from a library. You need to detach it if you want to add new assets, more slots, etc. If you believe that an element or pattern in any library needs more slots for new items, create an issue and we will try and prioritize building them in.

Warning

Detached instances will not receive style or other updates from any of the libraries if that element or pattern is updated.

Comparison of a linked and a detached accordion with their layers panel below

Alignment resources

Use these resources to help you stay aligned to our brand and design system while working.

Frequently asked questions

How can I get better at Figma?
Check out these resources if you want to improve your Figma skills.


How do foundational styles, elements, and patterns get updated?
The design system team meets regularly to discuss work in progress and new issues. 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 completed, the Figma libraries, documentation website, and repos are all updated. All updates are tracked in our changelog and listed on the Release notes page. Larger updates are sometimes communicated via a quarterly newsletter e-mail.


What if an element or pattern I need is missing?
If you think something is missing or you cannot find something, connect with us on Slack or create a discussion.


How can I contribute an idea?
If you have feedback or you would like to contribute an idea, create a discussion.


How can I report a bug?
If you find a bug, create an issue and describe it as thoroughly as possible. If something is broken, e-mail design-system@redhat.com or connect with us on Slack and we will investigate.

Roadmap

You can learn about our current release or future plans by going to the Roadmap page. If you need something created sooner rather than later, create an issue, or e-mail design-system@redhat.com, and we will discuss the priority and timeline.

Connect with us

For questions, additional support, or training, e-mail design-system@redhat.com or connect with us on Slack.

Additional resources

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