HomeAbout
About the Design System
RoadmapGet started
Overview
Designers
DevelopersFoundations
Overview
Color
Grid
Iconography
Spacing
TypographyTokens
Overview
Global color
box shadow
Typography
border
opacity
space
length
Icon
Breakpoints
Media QueriesElements
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
Popover
Planned
Progress steps
Planned
Site status
Skip link
Spinner
Statistic
Subnavigation
Surface
Switch
Table
Tabs
Tag
Tile
Timestamp
Tooltip
Video embedTheming
Overview
Color Palettes
Customizing
DevelopersPatterns
All Patterns
Card
Tabs
Filter
Form
Link
Link with icon
Logo wall
Search bar
Skip navigation
Sticky banner
Sticky card
Tile
Video thumbnailPersonalization
All Personalization Patterns
AnnouncementAccessibility
Fundamentals
Accessibility tools
Assistive technologies
CI/CD
Content
Contributors
Design
Development
Manual testing
Resources
Screen readers
Design/code status
Release notes
Get support
Typography tokens
Font familySizeFont weightsLine heightText colorFont familySizeFont weightsLine heightText color
RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif
Heading font family
var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-heading
Permalink to this token
Aa
Click to copy
--rh-font-family-body-text
RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif
Body text font family
var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-body-text
Permalink to this token
Aa
Click to copy
--rh-font-family-code
RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace
Code font family
var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-code
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-ar
'Noto Sans Arabic'
Arabic font family
var(--rh-font-family-lang-ar, 'Noto Sans Arabic')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-ar
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-he
'Noto Sans Hebrew'
Hebrew font family
var(--rh-font-family-lang-he, 'Noto Sans Hebrew')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-he
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-ja
'Noto Sans JP'
Japanese font family
var(--rh-font-family-lang-ja, 'Noto Sans JP')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-ja
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-ko
'Noto Sans KR'
Korean font family
var(--rh-font-family-lang-ko, 'Noto Sans KR')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-ko
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-hi
'Noto Sans Malayalam'
Malayalam font family
var(--rh-font-family-lang-hi, 'Noto Sans Malayalam')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-hi
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-th
'Noto Sans Thai'
Thai font family
var(--rh-font-family-lang-th, 'Noto Sans Thai')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-th
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-zh-cn
'Noto Sans SC'
Simplified Chinese font family
var(--rh-font-family-lang-zh-cn, 'Noto Sans SC')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-zh-cn
Permalink to this token
Aa
Click to copy
--rh-font-family-lang-zh-hk
'Noto Sans TC'
Traditional Chinese font family
var(--rh-font-family-lang-zh-hk, 'Noto Sans TC')
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-family-lang-zh-hk
Permalink to this token
var(--rh-font-size-body-text-xs, 0.75rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-xs
Permalink to this token
Aa
Click to copy
--rh-font-size-body-text-sm
0.875rem
14px font size
var(--rh-font-size-body-text-sm, 0.875rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-sm
Permalink to this token
Aa
Click to copy
--rh-font-size-body-text-md
1rem
16px font size
var(--rh-font-size-body-text-md, 1rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-md
Permalink to this token
Aa
Click to copy
--rh-font-size-body-text-lg
1.125rem
18px font size
var(--rh-font-size-body-text-lg, 1.125rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-lg
Permalink to this token
Aa
Click to copy
--rh-font-size-body-text-xl
1.25rem
20px font size
var(--rh-font-size-body-text-xl, 1.25rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-xl
Permalink to this token
Aa
Click to copy
--rh-font-size-body-text-2xl
1.5rem
24px font size
var(--rh-font-size-body-text-2xl, 1.5rem)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-2xl
Permalink to this token
var(--rh-font-weight-body-text-regular, 400)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-weight-body-text-regular
Permalink to this token
Aa
Click to copy
--rh-font-weight-body-text-medium
500
Medium font weight
var(--rh-font-weight-body-text-medium, 500)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-weight-body-text-medium
Permalink to this token
var(--rh-font-weight-heading-regular, 400)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-regular
Permalink to this token
Aa
Click to copy
--rh-font-weight-heading-medium
500
Medium font weight for headings
var(--rh-font-weight-heading-medium, 500)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-medium
Permalink to this token
Aa
Click to copy
--rh-font-weight-heading-bold
700
Bold font weight for headings
var(--rh-font-weight-heading-bold, 700)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-bold
Permalink to this token
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.
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.
var(--rh-color-text-primary, light-dark(var(--rh-color-text-primary-on-light, #151515), var(--rh-color-text-primary-on-dark, #ffffff)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-primary
Permalink to this token
Aa
Click to copy
--rh-color-text-primary-on-light
#151515
Primary text color for light theme
var(--rh-color-text-primary-on-light, #151515)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-primary-on-dark
#ffffff
Primary text color for dark theme
var(--rh-color-text-primary-on-dark, #ffffff)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-dark
Permalink to this token
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.
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.
var(--rh-color-text-secondary, light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d), var(--rh-color-text-secondary-on-dark, #c7c7c7)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-secondary
Permalink to this token
Aa
Click to copy
--rh-color-text-secondary-on-light
#4d4d4d
Secondary text color for light theme
var(--rh-color-text-secondary-on-light, #4d4d4d)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-secondary-on-dark
#c7c7c7
Secondary text color for dark theme
var(--rh-color-text-secondary-on-dark, #c7c7c7)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-dark
Permalink to this token
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.
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.
var(--rh-color-text-brand, light-dark(var(--rh-color-text-brand-on-light, #ee0000), var(--rh-color-text-brand-on-dark, #ee0000)))
Full CSS Variable
https://ux.redhat.com/tokens/color/#rh-color-text-brand
Permalink to this token
Aa
Click to copy
--rh-color-text-brand-on-light
#ee0000
Brand text color for light theme
var(--rh-color-text-brand-on-light, #ee0000)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-light
Permalink to this token
Aa
Click to copy
--rh-color-text-brand-on-dark
#ee0000
Brand text color for dark theme
var(--rh-color-text-brand-on-dark, #ee0000)
Full CSS Variable
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-dark
Permalink to this token
