Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Typography tokens

Font familySizeFont weightsLine heightText colorFont familySizeFont weightsLine heightText color

Font family

Ex. Token name Value Use case
Aa --rh-font-family-heading RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif

Heading font family
Aa --rh-font-family-body-text RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif

Body text font family
Aa --rh-font-family-code RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace

Code font family
Aa --rh-font-family-lang-ar 'Noto Sans Arabic'

Arabic font family
Aa --rh-font-family-lang-he 'Noto Sans Hebrew'

Hebrew font family
Aa --rh-font-family-lang-ja 'Noto Sans JP'

Japanese font family
Aa --rh-font-family-lang-ko 'Noto Sans KR'

Korean font family
Aa --rh-font-family-lang-hi 'Noto Sans Malayalam'

Malayalam font family
Aa --rh-font-family-lang-th 'Noto Sans Thai'

Thai font family
Aa --rh-font-family-lang-zh-cn 'Noto Sans SC'

Simplified Chinese font family
Aa --rh-font-family-lang-zh-hk 'Noto Sans TC'

Traditional Chinese font family

Size

Font size (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

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

Font size (headings)

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

Font weights

Font weights (body)

Ex. Token name Value Use case
Aa --rh-font-weight-body-text-regular 400

Regular font weight
Aa --rh-font-weight-body-text-medium 500

Medium font weight

Font weights (code)

Ex. Token name Value Use case
Aa --rh-font-weight-code-regular 400

Regular font weight
Aa --rh-font-weight-code-medium 500

Medium font weight

Font weights (headings)

Ex. Token name Value Use case
Aa --rh-font-weight-heading-regular 400

Regular font weight for headings
Aa --rh-font-weight-heading-medium 500

Medium font weight for headings
Aa --rh-font-weight-heading-bold 700

Bold font weight for headings

Line height

Ex. Token name Value Use case
Line
height 		--rh-line-height-heading 1.3

Line height for headings
Line
height 		--rh-line-height-body-text 1.5

Line height for body text
Line
height 		--rh-line-height-code 1.5

Line height for code

Text color

Theme Tokens

Aa --rh-color-text-primary Aa --rh-color-text-secondary Aa --rh-color-text-brand Aa --rh-color-text-primary Aa --rh-color-text-secondary Aa --rh-color-text-brand

Primary

Responsive text-primary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-primary-on-light on a themable container with a light color palette and --rh-color-text-primary-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
Aa --rh-color-text-primary light-dark(var(--rh-color-text-primary-on-light, #151515), var(--rh-color-text-primary-on-dark, #ffffff))

Responsive text-primary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-primary-on-light on a themable container with a light color palette and --rh-color-text-primary-on-dark on a themable container with a dark color palette.
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

Responsive text-secondary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-secondary-on-light on a themable container with a light color palette and --rh-color-text-secondary-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
Aa --rh-color-text-secondary light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d), var(--rh-color-text-secondary-on-dark, #c7c7c7))

Responsive text-secondary color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-secondary-on-light on a themable container with a light color palette and --rh-color-text-secondary-on-dark on a themable container with a dark color palette.
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

Responsive text-brand color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-brand-on-light on a themable container with a light color palette and --rh-color-text-brand-on-dark on a themable container with a dark color palette.

Ex. Token name Value Use case
Aa --rh-color-text-brand light-dark(var(--rh-color-text-brand-on-light, #ee0000), var(--rh-color-text-brand-on-dark, #ee0000))

Responsive text-brand color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-text-brand-on-light on a themable container with a light color palette and --rh-color-text-brand-on-dark on a themable container with a dark color palette.
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.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify