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

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 300

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

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.
Edit this page on GitHub