Typography tokens

  1. Font family
  2. Size
  3. Font weights
  4. Line height
  5. Text color
  1. Font family
  2. Size
  3. Font weights
  4. Line height
  5. Text 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

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-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-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-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