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

Global color tokens

Color
Ex. Token name Value Use case
--rh-color-white #ffffff Lightest surface (light theme) or primary text (dark theme)
--rh-color-black #000000 Brand black (avoid using)

Accent

Base
Ex. Token name Value Use case
--rh-color-accent-base-on-light #0066cc Inline link (light theme)
--rh-color-accent-base-on-dark #92c5f9 Inline link (dark theme)

Brand
Ex. Token name Value Use case
--rh-color-accent-brand-on-light #ee0000 Brand red (light theme)
--rh-color-accent-brand-on-dark #ee0000 Brand red (dark theme)

Brand

Red
Ex. Token name Value Use case
--rh-color-brand-red-lightest #fbc5c5 Lightest brand red
--rh-color-brand-red-lighter #f9a8a8 lighter brand red
--rh-color-brand-red-light #f56e6e Light brand red
--rh-color-brand-red-dark #a60000 Dark brand red/Brand red hover
--rh-color-brand-red-darker #5f0000 Darker brand red
--rh-color-brand-red-darkest #5f0000 Darkest brand red
--rh-color-brand-red-on-dark #ee0000 Brand red on dark background
--rh-color-brand-red-on-light #ee0000 Brand red on light background

Canvas
Ex. Token name Value Use case
--rh-color-canvas-white #ffffff Primary canvas (light theme)
--rh-color-canvas-black #151515 Primary canvas (dark theme)

Blue
Ex. Token name Value Use case
--rh-color-blue-10 #E0F0FF Alert - Info background
Color function variants
Ex. Token name Value Use case
--rh-color-blue-10-rgb rgb(224, 240, 255) To modify opacity
--rh-color-blue-10-hsl hsl(209.03225806451616 100% 93.92156862745098%) To modify opacity
--rh-color-blue-20 #B9DAFC Label - Filled (Blue) border color
Color function variants
Ex. Token name Value Use case
--rh-color-blue-20-rgb rgb(185, 218, 252) To modify opacity
--rh-color-blue-20-hsl hsl(210.44776119402988 91.78082191780825% 85.68627450980392%) To modify opacity
--rh-color-blue-30 #92C5F9 Inline link (dark theme)
Color function variants
Ex. Token name Value Use case
--rh-color-blue-30-rgb rgb(146, 197, 249) To modify opacity
--rh-color-blue-30-hsl hsl(210.29126213592232 89.56521739130436% 77.45098039215685%) To modify opacity
--rh-color-blue-40 #4394E5 Alert - Info accent
Color function variants
Ex. Token name Value Use case
--rh-color-blue-40-rgb rgb(67, 148, 229) To modify opacity
--rh-color-blue-40-hsl hsl(210 75.70093457943923% 58.03921568627452%) To modify opacity
--rh-color-blue-50 #0066CC Label - Filled (Blue) accent color
Color function variants
Ex. Token name Value Use case
--rh-color-blue-50-rgb rgb(0, 102, 204) To modify opacity
--rh-color-blue-50-hsl hsl(210 100% 40%) To modify opacity
--rh-color-blue-60 #004D99 Inline link hover (light theme)
Color function variants
Ex. Token name Value Use case
--rh-color-blue-60-rgb rgb(0, 77, 153) To modify opacity
--rh-color-blue-60-hsl hsl(209.80392156862746 100% 30%) To modify opacity
--rh-color-blue-70