| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular |
--rh-font-weight-body-text-regular |
400
|
Regular font weight |
|
| medium |
--rh-font-weight-body-text-medium |
500
|
Medium font weight |
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular |
--rh-font-weight-code-regular |
400
|
Regular font weight |
|
| medium |
--rh-font-weight-code-medium |
500
|
Medium font weight |
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| light |
--rh-font-weight-heading-regular |
300
|
Regular font weight for headings |
|
| medium |
--rh-font-weight-heading-medium |
500
|
Medium font weight for headings |
|
| bold |
--rh-font-weight-heading-bold |
700
|
Bold font weight for headings |
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
--rh-line-height-heading |
1.3 |
Line height for headings |
|
|
--rh-line-height-body-text |
1.5 |
Line height for body text |
|
|
--rh-line-height-code |
1.5 |
Line height for code |
|
| 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 |
|
| 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 |
|
| 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 |
|
To learn more about our other libraries, visit this page.
To give feedback about anything on this page, contact us.
