About the Design System
We create Red Hat digital experiences
Red Hat teams work across the world in a range of disciplines, from UX research and digital design to web development and content strategy. The Red Hat Design System (RHDS) for digital experiences allows designers and developers to build branded user experiences consistently and to make every digital interaction with Red Hat reflect our core brand traits: open, authentic, helpful, and brave.
We’re guided by our core principles
User-centered
We focus on the people for which we are designing, and this advocacy extends beyond the customer to include the experience of Red Hat associates.
Co-creative
UX design is a team sport. Many people both within Red Hat, and with outside feedback, contribute to creating the user experience.
Holistic
We consider the end-to-end experience, not just a single moment, single website, service encounter, or journey stage.
Orchestrated
Processes, tools, and roles must be aligned to deliver and maintain an optimal Red Hat digital experience
We rely on our foundations
The Red Hat brand has a strong voice. To make our design system feel like Red Hat, we use foundations like color, space, and typography to enhance our elements and patterns and to align them to Red Hat’s design language standards.
Red Hat brand standards
Red Hat brand standards are the source code for our identity. They govern how we look and sound in all types of media. We follow brand standards to unify Red Hat digital experiences and stay up-to-date with our brand as it grows, improves, and adapts to meet new challenges.
Design tokens
Our foundations are implemented through design tokens, which are used in lieu of hard-coded values for color, text attributes, spacing, and more. Tokens help us keep web components flexible and scalable. Additionally, semantic token names help us assign consistent meanings that correspond with foundational guidelines.
We build Web Components
Our team is building an open source, Web Component-driven development system to build scalable UI elements and patterns. By using Web Components, it allows developers to use our code with encapsulated functionality and styles in any framework or platform.
We look for opportunities to align
PatternFly
In addition to RHDS, Red Hat uses PatternFly, an open source design system, for its products. We share design and foundations when possible by collaborating with the PatternFly team. When building a new component or updating an existing component, PatternFly is always our first source of inspiration.
By sharing ideas between the PatternFly and RHDS teams, we create a design language across all of Red Hat, for each stage of the customer lifecycle.
PatternFly Elements
The PatternFly Elements (PFE) project leverages the PatternFly design system and some code elements to create an accessible and open source Web Component library.
Like RHDS Web Components, PFE Web Components not only work in any application framework, they are evergreen. This means that the components themselves can be upgraded easily, allowing for consistency, scalability, and flexibility.
We provide support
Whether you are implementing an element or pattern or contributing to the design system, the RHDS team is here to help. Our Design/code status table shows where everything is available, including whether they’ve been added to the Red Hat Shared Libraries, which makes our Web Components ready for use in Drupal, React, plain HTML, and other frameworks. We also have multiple ways for you to reach our team about bugs, feature requests, and more.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Release Notes
To see what foundations, tokens, elements, or patterns have been released recently, check out our release notes.
