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

Typography tokens

Font

Family
Ex. Token name Value Use case
Aa --rh-font-family-heading RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif Heading font family
Aa --rh-font-family-body-text RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif Body text font family
Aa --rh-font-family-code RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace Code font family

Size

Body text
Ex. Token name Value Use case
Aa --rh-font-size-body-text-xs 0.75rem 12px font size
Aa --rh-font-size-body-text-sm 0.875rem 14px font size
Aa --rh-font-size-body-text-md 1rem 16px font size
Aa --rh-font-size-body-text-lg 1.125rem 18px font size
Aa --rh-font-size-body-text-xl 1.25rem 20px font size
Aa --rh-font-size-body-text-2xl 1.5rem 24px font size

Code
Ex. Token name Value Use case
Aa --rh-font-size-code-xs 0.75rem 12px font size
Aa --rh-font-size-code-sm 0.875rem 14px font size
Aa --rh-font-size-code-md 1rem 16px font size
Aa --rh-font-size-code-lg 1.125rem 18px font size
Aa --rh-font-size-code-xl 1.25rem 20px font size
Aa --rh-font-size-code-2xl 1.5rem 24px font size

Heading
Ex. Token name Value Use case
Aa --rh-font-size-heading-xs 1.25rem h6 heading font size
Aa --rh-font-size-heading-sm 1.5rem h5 heading font size
Aa --rh-font-size-heading-md 1.75rem h4 heading font size
Aa --rh-font-size-heading-lg 2.25rem h3 heading font size
Aa --rh-font-size-heading-xl 2.5rem h2 heading font size
Aa --rh-font-size-heading-2xl 3rem h1 heading font size

Weight

Body text
Ex. Token name Value Use case
regular --rh-font-weight-body-text-regular 400 regular Regular font weight
medium --rh-font-weight-body-text-medium 500 medium Medium font weight

Code
Ex. Token name Value Use case
regular --rh-font-weight-code-regular 400 regular Regular font weight
medium --rh-font-weight-code-medium 500 medium Medium font weight

Heading
Ex. Token name Value Use case
light --rh-font-weight-heading-regular 300 light Regular font weight for headings
medium --rh-font-weight-heading-medium 500 medium Medium font weight for headings
bold --rh-font-weight-heading-bold 700 bold Bold font weight for headings

Line height
Ex. Token name Value Use case
--rh-line-height-heading 1.3 Line height for headings
--rh-line-height-body-text 1.5 Line height for body text
--rh-line-height-code 1.5 Line height for code

Text

Primary
Ex. Token name Value Use case
Aa --rh-color-text-primary-on-light #151515 Primary text color for light theme
Aa --rh-color-text-primary-on-dark #ffffff Primary text color for dark theme

Secondary
Ex. Token name Value Use case
Aa --rh-color-text-secondary-on-light #4d4d4d Secondary text color for light theme
Aa --rh-color-text-secondary-on-dark #c7c7c7 Secondary text color for dark theme

Brand
Ex. Token name Value Use case
Aa --rh-color-text-brand-on-light #ee0000 Brand text color for light theme
Aa --rh-color-text-brand-on-dark #ee0000 Brand text color for dark theme

Other libraries

To learn more about our other libraries, visit the getting started page.
© 2021-2024 Red Hat, Inc. Deploys by Netlify