Red Hat design system

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	Full CSS Variable Permalink to this token
`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	Full CSS Variable Permalink to this token
`Aa`	--rh-font-family-code	`RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace`	Code font family	Full CSS Variable Permalink to this token

Size

Font size (text)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-size-body-text-xs	`0.75rem`	12px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-body-text-sm	`0.875rem`	14px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-body-text-md	`1rem`	16px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-body-text-lg	`1.125rem`	18px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-body-text-xl	`1.25rem`	20px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-body-text-2xl	`1.5rem`	24px font size	Full CSS Variable Permalink to this token

Font size (code)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-size-code-xs	`0.75rem`	12px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-code-sm	`0.875rem`	14px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-code-md	`1rem`	16px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-code-lg	`1.125rem`	18px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-code-xl	`1.25rem`	20px font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-code-2xl	`1.5rem`	24px font size	Full CSS Variable Permalink to this token

Font size (headings)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-size-heading-xs	`1.25rem`	h6 heading font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-heading-sm	`1.5rem`	h5 heading font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-heading-md	`1.75rem`	h4 heading font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-heading-lg	`2.25rem`	h3 heading font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-heading-xl	`2.5rem`	h2 heading font size	Full CSS Variable Permalink to this token
`Aa`	--rh-font-size-heading-2xl	`3rem`	h1 heading font size	Full CSS Variable Permalink to this token

Font weights

Font weights (body)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-weight-body-text-regular	`400`	Regular font weight	Full CSS Variable Permalink to this token
`Aa`	--rh-font-weight-body-text-medium	`500`	Medium font weight	Full CSS Variable Permalink to this token

Font weights (code)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-weight-code-regular	`400`	Regular font weight	Full CSS Variable Permalink to this token
`Aa`	--rh-font-weight-code-medium	`500`	Medium font weight	Full CSS Variable Permalink to this token

Font weights (headings)

Ex.	Token name	Value	Use case
`Aa`	--rh-font-weight-heading-regular	`300`	Regular font weight for headings	Full CSS Variable Permalink to this token
`Aa`	--rh-font-weight-heading-medium	`500`	Medium font weight for headings	Full CSS Variable Permalink to this token
`Aa`	--rh-font-weight-heading-bold	`700`	Bold font weight for headings	Full CSS Variable Permalink to this token

Line height

Ex.	Token name	Value	Use case
`Line height`	--rh-line-height-heading	`1.3`	Line height for headings	Full CSS Variable Permalink to this token
`Line height`	--rh-line-height-body-text	`1.5`	Line height for body text	Full CSS Variable Permalink to this token
`Line height`	--rh-line-height-code	`1.5`	Line height for code	Full CSS Variable Permalink to this token

Text color

Theme Tokens

Color Palette

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

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	Full CSS Variable Permalink to this token
`Aa`	--rh-color-text-primary-on-dark	`#ffffff`	Primary text color for dark theme	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
`Aa`	--rh-color-text-secondary-on-dark	`#c7c7c7`	Secondary text color for dark theme	Full CSS Variable Permalink to this token

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	Full CSS Variable Permalink to this token
`Aa`	--rh-color-text-brand-on-dark	`#ee0000`	Brand text color for dark theme	Full CSS Variable Permalink to this token

Typography tokens