Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Color

Overview Usage Accessibility
  1. Introduction
  2. Color system
  1. Introduction
  2. Color system

Introduction

Color helps unify Red Hat digital properties, from website experiences to application interfaces.

Color system

Our color system provides comprehensive guidelines on use, definition, and role of color in branded digital experiences.

Role of color

Our color palette is designed with brand, usability, and accessibility in mind and is used for all projects across Red Hat. Applying color thoughtfully and consistently helps us create cohesive, recognizable, and engaging experiences for our users.

Color relationships

When colors are used together, they form relationships that communicate brand, hierarchy, state, and more.

Variants of several elements

Color design tokens

Design tokens are the source of truth of our design decisions. They allow for changes at scale, making design language updates easy to implement.

To learn more about our color design tokens, go to the Tokens section.

"Crayon" and semantic colors

Our design system includes multiple sets of colors known as "crayon" colors. Crayon colors reference hard-coded values, but offer no information about usage. Semantic colors reference crayon colors and define how a color is used. Semantic naming is essential not just for color, but for all foundational styles.

Example of how crayon color tokens are aliased to semantic tokens, which are used to style a button

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.

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