Design tokens are a way of naming, defining, categorizing, and sharing values in a design system. Doing so helps us produce uniform user experiences across platforms and teams. Tokens are defined once using a standard syntax, and can be transformed by software into a variety of formats and helpers, for multiple platforms.
An example token is
--rh-color-brand-red-on-dark,
the version of “Red Hat red” for use on dark backgrounds.
It has the value #FF442B.
Tokens are for designers and developers. They aid designers by limiting the pool of available style values to the brand standards and by standardizing their names and uses. They aid developers in making it easier to implement the designers’ specification by referencing well-defined token names.
A designer might access the tokens in an XD template or via a figma plugin. We are researching the best way to make this available across teams and are eager for feedback.
A developer might use them by referencing preloaded CSS custom properties, using SCSS variables, or by using editor snippets and lint rules to auto-complete variable names in CSS files.
We want your feedback on our tokens! Are there missing values? Do you have an idea for an output format or tool integration?
Color helps create consistent experiences across web properties. Various colors are available in two themes, light and dark.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Lightest surface (light theme) or primary text (dark theme) |
var(--rh-color-white, #ffffff)
|
|||
| Brand black (avoid using) |
var(--rh-color-black, #000000)
|
The primary brand color is red, it brings boldness and helps guide the eye or highlight important information. To learn more about how the red color is used, visit the Brand standards page.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Lightest brand red |
var(--rh-color-brand-red-lightest, #fbc5c5)
|
|||
| lighter brand red |
var(--rh-color-brand-red-lighter, #f9a8a8)
|
|||
| Light brand red |
var(--rh-color-brand-red-light, #f56e6e)
|
|||
| Dark brand red/Brand red hover |
var(--rh-color-brand-red-dark, #a60000)
|
|||
| Darker brand red |
var(--rh-color-brand-red-darker, #5f0000)
|
|||
| Darkest brand red |
var(--rh-color-brand-red-darkest, #5f0000)
|
|||
| Brand red on dark background |
var(--rh-color-brand-red-on-dark, #ee0000)
|
|||
| Brand red on light background |
var(--rh-color-brand-red-on-light, #ee0000)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link (light theme) |
var(--rh-color-accent-base-on-light, #0066cc)
|
|||
| Inline link (dark theme) |
var(--rh-color-accent-base-on-dark, #92c5f9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Brand red (light theme) |
var(--rh-color-accent-brand-on-light, #ee0000)
|
|||
| Brand red (dark theme) |
var(--rh-color-accent-brand-on-dark, #ee0000)
|
Each theme features two shades of blue, one for Link and Focus states and one for Hover and Active states.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link hover (dark theme) |
var(--rh-color-interactive-blue-lightest, #b9dafc)
|
|||
| Inline link (dark theme) |
var(--rh-color-interactive-blue-lighter, #92c5f9)
|
|||
| Inline link (light theme) |
var(--rh-color-interactive-blue-darker, #0066cc)
|
|||
| Inline link hover (light theme) |
var(--rh-color-interactive-blue-darkest, #003366)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Inline link visited hover (dark theme) |
var(--rh-color-interactive-purple-lightest, #ece6ff)
|
|||
| Inline link visited (dark theme) |
var(--rh-color-interactive-purple-lighter, #b6a6e9)
|
|||
| Inline link visited (light theme) |
var(--rh-color-interactive-purple-darker, #5e40be)
|
|||
| Inline link visited hover (light theme) |
var(--rh-color-interactive-purple-darkest, #21134d)
|
The canvas tokens should be used for page backgrounds only. To add a background to contained sections, use a surface token.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary canvas (light theme) |
var(--rh-color-canvas-white, #ffffff)
|
|||
| Primary canvas (dark theme) |
var(--rh-color-canvas-black, #151515)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary surface (light theme) |
var(--rh-color-surface-lightest, #ffffff)
|
|||
| Tertiary surface (light theme) |
var(--rh-color-surface-lighter, #f2f2f2)
|
|||
| Secondary surface (light theme) |
var(--rh-color-surface-light, #e0e0e0)
|
|||
| Tertiary surface (dark theme) |
var(--rh-color-surface-dark, #383838)
|
|||
| Alternative tertiary surface (not available for use with context provider) |
var(--rh-color-surface-dark-alt, #292929)
|
|||
| Secondary surface (dark theme) |
var(--rh-color-surface-darker, #1f1f1f)
|
|||
| Primary surface (dark theme) |
var(--rh-color-surface-darkest, #151515)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Danger status surface color (light theme) |
var(--rh-color-surface-status-danger-on-light, #ffe3d9)
|
|||
| Danger status surface color (dark theme) |
var(--rh-color-surface-status-danger-on-dark, #731f00)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning status surface color (light theme) |
var(--rh-color-surface-status-warning-on-light, #ffe8cc)
|
|||
| Warning status surface color (dark theme) |
var(--rh-color-surface-status-warning-on-dark, #732e00)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Default status surface color (light theme) |
var(--rh-color-surface-status-default-on-light, #f2f2f2)
|
|||
| Default status surface color (dark theme) |
var(--rh-color-surface-status-default-on-dark, #292929)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Info status surface color (light theme) |
var(--rh-color-surface-status-info-on-light, #ece6ff)
|
|||
| Info status surface color (dark theme) |
var(--rh-color-surface-status-info-on-dark, #3d2785)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Success status surface color (light theme) |
var(--rh-color-surface-status-success-on-light, #e9f7df)
|
|||
| Success status surface color (dark theme) |
var(--rh-color-surface-status-success-on-dark, #204d00)
|
Avoid using any red color token for danger or error messaging.
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
var(--rh-color-red-10, #FCE3E3)
|
||||||||||||||
|
||||||||||||||
| Lightest brand red |
var(--rh-color-red-20, #FBC5C5)
|
|||||||||||||
|
||||||||||||||
| Lighter brand red |
var(--rh-color-red-30, #F9A8A8)
|
|||||||||||||
|
||||||||||||||
| Light brand red |
var(--rh-color-red-40, #F56E6E)
|
|||||||||||||
|
||||||||||||||
| Brand red (light and dark theme) |
var(--rh-color-red-50, #EE0000)
|
|||||||||||||
|
||||||||||||||
| Dark brand red |
var(--rh-color-red-60, #A60000)
|
|||||||||||||
|
||||||||||||||
| Darker brand red |
var(--rh-color-red-70, #5F0000)
|
|||||||||||||
|
||||||||||||||
The red orange color is reserved for danger or error states. Do not use it anywhere else.
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
var(--rh-color-red-orange-10, #FFE3D9)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-20, #FBBEA8)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-30, #F89B78)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-40, #F4784A)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-50, #F0561D)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-60, #B1380B)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-red-orange-70, #731F00)
|
||||||||||||||
|
||||||||||||||
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Label - Filled (Orange) background color |
var(--rh-color-orange-10, #FFE8CC)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-orange-20, #FCCB8F)
|
||||||||||||||
|
||||||||||||||
| Label - Filled (Orange) border color |
var(--rh-color-orange-30, #F8AE54)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) accent color |
var(--rh-color-orange-40, #F5921B)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Orange) accent color |
var(--rh-color-orange-50, #CA6C0F)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-orange-60, #9E4A06)
|
||||||||||||||
|
||||||||||||||
| Label - Filled (Orange) text color |
var(--rh-color-orange-70, #732E00)
|
|||||||||||||
|
||||||||||||||
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Warning background |
var(--rh-color-yellow-10, #FFF4CC)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-yellow-20, #FFE072)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-yellow-30, #FFCC17)
|
||||||||||||||
|
||||||||||||||
| Alert - Warning accent |
var(--rh-color-yellow-40, #DCA614)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-yellow-50, #B98412)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-yellow-60, #96640F)
|
||||||||||||||
|
||||||||||||||
| Alert - Warning title text |
var(--rh-color-yellow-70, #73480B)
|
|||||||||||||
|
||||||||||||||
The green color is primarily used to indicate a success state, but it can also be used sparingly in other situations where green is needed.
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - success background |
var(--rh-color-green-10, #E9F7DF)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Green) border color |
var(--rh-color-green-20, #D1F1BB)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-green-30, #AFDC8F)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-green-40, #87BB62)
|
||||||||||||||
|
||||||||||||||
var(--rh-color-green-50, #63993D)
|
||||||||||||||
|
||||||||||||||
| Alert - Success accent |
var(--rh-color-green-60, #3D7317)
|
|||||||||||||
|
||||||||||||||
| Alert - Success title text |
var(--rh-color-green-70, #204D00)
|
|||||||||||||
|
||||||||||||||
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Default background |
var(--rh-color-teal-10, #DAF2F2)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-teal-20, #B9E5E5)
|
||||||||||||||
|
||||||||||||||
| Label (Cyan) border color |
var(--rh-color-teal-30, #9AD8D8)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-teal-40, #63BDBD)
|
||||||||||||||
|
||||||||||||||
| Alert - Default accent |
var(--rh-color-teal-50, #37A3A3)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-teal-60, #147878)
|
||||||||||||||
|
||||||||||||||
| Alert - Default title text |
var(--rh-color-teal-70, #004D4D)
|
|||||||||||||
|
||||||||||||||
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alert - Info background |
var(--rh-color-blue-10, #E0F0FF)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Blue) border color |
var(--rh-color-blue-20, #B9DAFC)
|
|||||||||||||
|
||||||||||||||
| Inline link (dark theme) |
var(--rh-color-blue-30, #92C5F9)
|
|||||||||||||
|
||||||||||||||
| Alert - Info accent |
var(--rh-color-blue-40, #4394E5)
|
|||||||||||||
|
||||||||||||||
| Label - Filled (Blue) accent color |
var(--rh-color-blue-50, #0066CC)
|
|||||||||||||
|
||||||||||||||
| Inline link hover (light theme) |
var(--rh-color-blue-60, #004D99)
|
|||||||||||||
|
||||||||||||||
| Alert - Info title text |
var(--rh-color-blue-70, #003366)
|
|||||||||||||
|
||||||||||||||
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Label - Filled (Purple) background color |
var(--rh-color-purple-10, #ECE6FF)
|
|||||||||||||
|
||||||||||||||
| Inline link visited hover (dark theme) |
var(--rh-color-purple-20, #D0C5F4)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-purple-30, #B6A6E9)
|
||||||||||||||
|
||||||||||||||
| Inline link visited (dark theme) |
var(--rh-color-purple-40, #876FD4)
|
|||||||||||||
|
||||||||||||||
var(--rh-color-purple-50, #5E40BE)
|
||||||||||||||
|
||||||||||||||
| Inline link visited (light theme) |
var(--rh-color-purple-60, #3D2785)
|
|||||||||||||
|
||||||||||||||
| Inline link visited hover (light theme) |
var(--rh-color-purple-70, #21134D)
|
|||||||||||||
|
||||||||||||||
In addition to white and black, each theme features various shades of gray. Be mindful of accessibility when using text or components on top of shades of gray.
| Ex. | Token name | Value | Use case | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tertiary surface (light theme) |
var(--rh-color-gray-10, #F2F2F2)
|
|||||||||||||
|
||||||||||||||
| Secondary surface (light theme) |
var(--rh-color-gray-20, #E0E0E0)
|
|||||||||||||
|
||||||||||||||
| Subtle borders (light theme) |
var(--rh-color-gray-30, #C7C7C7)
|
|||||||||||||
|
||||||||||||||
| Subtle icon (hover state) |
var(--rh-color-gray-40, #A3A3A3)
|
|||||||||||||
|
||||||||||||||
| Subtle icon |
var(--rh-color-gray-50, #707070)
|
|||||||||||||
|
||||||||||||||
| Secondary text (light theme) |
var(--rh-color-gray-60, #4D4D4D)
|
|||||||||||||
|
||||||||||||||
| Tertiary surface (dark theme) |
var(--rh-color-gray-70, #383838)
|
|||||||||||||
|
||||||||||||||
| Alternative tertiary surface (not available for use with context provider) |
var(--rh-color-gray-80, #292929)
|
|||||||||||||
|
||||||||||||||
| Secondary surface (dark theme) |
var(--rh-color-gray-90, #1F1F1F)
|
|||||||||||||
|
||||||||||||||
| Primary surface (dark theme) or primary text (light theme) |
var(--rh-color-gray-95, #151515)
|
|||||||||||||
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Danger accent color (light theme) |
var(--rh-color-status-danger-on-light, #b1380b)
|
|||
| Danger accent color (dark theme) |
var(--rh-color-status-danger-on-dark, #f4784a)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning accent color (light theme) |
var(--rh-color-status-warning-on-light, #ca6c0f)
|
|||
| Warning accent color (dark theme) |
var(--rh-color-status-warning-on-dark, #f5921b)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Default accent color (light theme) |
var(--rh-color-status-default-on-light, #4d4d4d)
|
|||
| Default accent color (dark theme) |
var(--rh-color-status-default-on-dark, #a3a3a3)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Info accent color (light theme) |
var(--rh-color-status-info-on-light, #5e40be)
|
|||
| Info accent color (dark theme) |
var(--rh-color-status-info-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Success accent color (light theme) |
var(--rh-color-status-success-on-light, #3d7317)
|
|||
| Success accent color (dark theme) |
var(--rh-color-status-success-on-dark, #87bb62)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Small box shadow |
var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2))
|
|||
| Medium box shadow |
var(--rh-box-shadow-md, 0 4px 6px 1px rgba(21, 21, 21, 0.25))
|
|||
| Large box shadow |
var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3))
|
|||
| Extra large box shadow |
var(--rh-box-shadow-xl, 0 8px 24px 3px rgba(21, 21, 21, 0.35))
|
To learn more about how to use text, visit the typography page.
Red Hat Fonts, designed by Jeremy Mickel and released under Open Font License, form the typographic basis for the Red Hat Design System. Pages using non-latin characters should fall back to Noto Sans. By loading language-specific Noto Sans fonts, RHDS can accomodate mixed-language content including العربية, עברית, 日本語, 조선말, മലയാളം, 汉语, 漢語, or ภาษาไทย.
Users may load those fonts from Google Fonts, for example with this HTML snippet pasted
into the <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;500;700&family=Noto+Sans+JP:wght@300;500;700&family=Noto+Sans+KR:wght@300;500;700&family=Noto+Sans+Malayalam:wght@300;500;700&family=Noto+Sans+SC:wght@300;500;700&family=Noto+Sans+TC:wght@300;500;700&family=Noto+Sans+Tamil:wght@300;500;700&family=Noto+Sans+Thai:wght@300;500;700&display=swap" rel="stylesheet">| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Heading font family |
var(--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)
|
||
| Aa | Body text font family |
var(--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)
|
||
| Aa | Code font family |
var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | 12px font size |
var(--rh-font-size-body-text-xs, 0.75rem)
|
||
| Aa | 14px font size |
var(--rh-font-size-body-text-sm, 0.875rem)
|
||
| Aa | 16px font size |
var(--rh-font-size-body-text-md, 1rem)
|
||
| Aa | 18px font size |
var(--rh-font-size-body-text-lg, 1.125rem)
|
||
| Aa | 20px font size |
var(--rh-font-size-body-text-xl, 1.25rem)
|
||
| Aa | 24px font size |
var(--rh-font-size-body-text-2xl, 1.5rem)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | 12px font size |
var(--rh-font-size-code-xs, 0.75rem)
|
||
| Aa | 14px font size |
var(--rh-font-size-code-sm, 0.875rem)
|
||
| Aa | 16px font size |
var(--rh-font-size-code-md, 1rem)
|
||
| Aa | 18px font size |
var(--rh-font-size-code-lg, 1.125rem)
|
||
| Aa | 20px font size |
var(--rh-font-size-code-xl, 1.25rem)
|
||
| Aa | 24px font size |
var(--rh-font-size-code-2xl, 1.5rem)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | h6 heading font size |
var(--rh-font-size-heading-xs, 1.25rem)
|
||
| Aa | h5 heading font size |
var(--rh-font-size-heading-sm, 1.5rem)
|
||
| Aa | h4 heading font size |
var(--rh-font-size-heading-md, 1.75rem)
|
||
| Aa | h3 heading font size |
var(--rh-font-size-heading-lg, 2.25rem)
|
||
| Aa | h2 heading font size |
var(--rh-font-size-heading-xl, 2.5rem)
|
||
| Aa | h1 heading font size |
var(--rh-font-size-heading-2xl, 3rem)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular | Regular font weight |
var(--rh-font-weight-body-text-regular, 400)
|
||
| medium | Medium font weight |
var(--rh-font-weight-body-text-medium, 500)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular | Regular font weight |
var(--rh-font-weight-code-regular, 400)
|
||
| medium | Medium font weight |
var(--rh-font-weight-code-medium, 500)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| light | Regular font weight for headings |
var(--rh-font-weight-heading-regular, 300)
|
||
| medium | Medium font weight for headings |
var(--rh-font-weight-heading-medium, 500)
|
||
| bold | Bold font weight for headings |
var(--rh-font-weight-heading-bold, 700)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
Line height |
Line height for headings |
var(--rh-line-height-heading, 1.3)
|
||
|
Line height |
Line height for body text |
var(--rh-line-height-body-text, 1.5)
|
||
|
Line height |
Line height for code |
var(--rh-line-height-code, 1.5)
|
Each theme features two shades of gray for text, Primary and Secondary.
Contrast is important when choosing colors for UI elements for visitors. Awareness of standards and best practices is the key to an accessible color palette. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios. We choose colors that support usability by ensuring sufficient color contrast between elements so that visitors with low vision can browse our web properties.
Black text should be used on light backgrounds and vice versa. If a page features both light and dark themes, UI elements and text should be placed on contrasting background colors. Layouts with colored backgrounds or a photo changes the rules regarding the placement of text, so use white or black text for body copy applications.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Primary text color for light theme |
var(--rh-color-text-primary-on-light, #151515)
|
||
| Aa | Primary text color for dark theme |
var(--rh-color-text-primary-on-dark, #ffffff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Secondary text color for light theme |
var(--rh-color-text-secondary-on-light, #4d4d4d)
|
||
| Aa | Secondary text color for dark theme |
var(--rh-color-text-secondary-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Brand text color for light theme |
var(--rh-color-text-brand-on-light, #ee0000)
|
||
| Aa | Brand text color for dark theme |
var(--rh-color-text-brand-on-dark, #ee0000)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 1px border width; Example: Secondary CTA or Button |
var(--rh-border-width-sm, 1px)
|
|||
| 2px border width: Example: Alert |
var(--rh-border-width-md, 2px)
|
|||
| 3px border width: Example: Expanded Accordion panel |
var(--rh-border-width-lg, 3px)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Border radius reset |
var(--rh-border-radius-sharp, 0.0px)
|
|||
| 3px border radius; Example: Card |
var(--rh-border-radius-default, 3px)
|
|||
| Pill border radius; Example: Label |
var(--rh-border-radius-pill, 64px)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Strong border color (light theme) |
var(--rh-color-border-strong-on-light, #151515)
|
|||
| Strong border color (dark theme) |
var(--rh-color-border-strong-on-dark, #ffffff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Subtle border color (light theme) |
var(--rh-color-border-subtle-on-light, #c7c7c7)
|
|||
| Subtle border color (dark theme) |
var(--rh-color-border-subtle-on-dark, #707070)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Interactive border color (light theme) |
var(--rh-color-border-interactive-on-light, #0066cc)
|
|||
| Interactive border color (dark theme) |
var(--rh-color-border-interactive-on-dark, #92c5f9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Danger status border color (light theme) |
var(--rh-color-border-status-danger-on-light, #f0561d)
|
|||
| Danger status border color (dark theme) |
var(--rh-color-border-status-danger-on-dark, #f4784a)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning status border color (light theme) |
var(--rh-color-border-status-warning-on-light, #ca6c0f)
|
|||
| Warning status border color (dark theme) |
var(--rh-color-border-status-warning-on-dark, #f5921b)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Default status border color (light theme) |
var(--rh-color-border-status-default-on-light, #4d4d4d)
|
|||
| Default status border color (dark theme) |
var(--rh-color-border-status-default-on-dark, #a3a3a3)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Info status border color (light theme) |
var(--rh-color-border-status-info-on-light, #5e40be)
|
|||
| Info status border color (dark theme) |
var(--rh-color-border-status-info-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Success status border color (light theme) |
var(--rh-color-border-status-success-on-light, #3d7317)
|
|||
| Success status border color (dark theme) |
var(--rh-color-border-status-success-on-dark, #87bb62)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 0% opacity |
var(--rh-opacity-0, 0%)
|
|||
| 10% opacity |
var(--rh-opacity-10, 10%)
|
|||
| 20% opacity |
var(--rh-opacity-20, 20%)
|
|||
| 30% opacity |
var(--rh-opacity-30, 30%)
|
|||
| 40% opacity |
var(--rh-opacity-40, 40%)
|
|||
| 50% opacity |
var(--rh-opacity-50, 50%)
|
|||
| 60% opacity |
var(--rh-opacity-60, 60%)
|
|||
| 70% opacity |
var(--rh-opacity-70, 70%)
|
|||
| 80% opacity |
var(--rh-opacity-80, 80%)
|
|||
| 90% opacity |
var(--rh-opacity-90, 90%)
|
|||
| 100% opacity |
var(--rh-opacity-100, 100%)
|
Spacers are visual cues used to define fixed amounts of space between elements. They make it easy for designers to maintain consistent spacing across components and patterns as well as simplify the handoff process between designers and developers. Consistent spacing helps maintain balance and rhythm across the system.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 4px spacer |
var(--rh-space-xs, 4px)
|
|||
| 6px spacer |
var(--rh-space-sm, 6px)
|
|||
| 8px spacer |
var(--rh-space-md, 8px)
|
|||
| 16px spacer |
var(--rh-space-lg, 16px)
|
|||
| 24px spacer |
var(--rh-space-xl, 24px)
|
|||
| 32px spacer |
var(--rh-space-2xl, 32px)
|
|||
| 48px spacer |
var(--rh-space-3xl, 48px)
|
|||
| 64px spacer |
var(--rh-space-4xl, 64px)
|
|||
| 80px spacer |
var(--rh-space-5xl, 80px)
|
|||
| 96px spacer |
var(--rh-space-6xl, 96px)
|
|||
| 128px spacer |
var(--rh-space-7xl, 128px)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 1px length token |
var(--rh-length-4xs, 1px)
|
|||
| 2px length token |
var(--rh-length-3xs, 2px)
|
|||
| 3px length token |
var(--rh-length-2xs, 3px)
|
|||
| 4px length token |
var(--rh-length-xs, 4px)
|
|||
| 6px length token |
var(--rh-length-sm, 6px)
|
|||
| 8px length token |
var(--rh-length-md, 8px)
|
|||
| 16px length token |
var(--rh-length-lg, 16px)
|
|||
| 24px length token |
var(--rh-length-xl, 24px)
|
|||
| 32px length token |
var(--rh-length-2xl, 32px)
|
|||
| 48px length token |
var(--rh-length-3xl, 48px)
|
|||
| 64px length token |
var(--rh-length-4xl, 64px)
|
|||
| 80px length token |
var(--rh-length-5xl, 80px)
|
|||
| 96px length token |
var(--rh-length-6xl, 96px)
|
|||
| 128px length token |
var(--rh-length-7xl, 128px)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 16px icon box |
var(--rh-size-icon-01, 16px)
|
|||
| 24px icon box |
var(--rh-size-icon-02, 24px)
|
|||
| 32px icon box |
var(--rh-size-icon-03, 32px)
|
|||
| 40px icon box |
var(--rh-size-icon-04, 40px)
|
|||
| 48px icon box |
var(--rh-size-icon-05, 48px)
|
|||
| 64px icon box |
var(--rh-size-icon-06, 64px)
|
|||
| 80px icon box |
var(--rh-size-icon-07, 80px)
|
|||
| 96px icon box |
var(--rh-size-icon-08, 96px)
|
|||
| 128px icon box |
var(--rh-size-icon-09, 128px)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
var(--rh-color-icon-primary-on-light, #ee0000)
|
||||
var(--rh-color-icon-primary-on-dark, #ee0000)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
var(--rh-color-icon-secondary-on-light, #151515)
|
||||
var(--rh-color-icon-secondary-on-dark, #ffffff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
var(--rh-color-icon-subtle, #707070)
|
||||
var(--rh-color-icon-subtle-hover, #a3a3a3)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Danger status icon color (light theme) |
var(--rh-color-icon-status-danger-on-light, #f0561d)
|
|||
| Danger status icon color (dark theme) |
var(--rh-color-icon-status-danger-on-dark, #f4784a)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning status icon color (light theme) |
var(--rh-color-icon-status-warning-on-light, #ca6c0f)
|
|||
| Warning status icon color (dark theme) |
var(--rh-color-icon-status-warning-on-dark, #f5921b)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Default status icon color (light theme) |
var(--rh-color-icon-status-default-on-light, #4d4d4d)
|
|||
| Default status icon color (dark theme) |
var(--rh-color-icon-status-default-on-dark, #a3a3a3)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Info status icon color (light theme) |
var(--rh-color-icon-status-info-on-light, #5e40be)
|
|||
| Info status icon color (dark theme) |
var(--rh-color-icon-status-info-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Success status icon color (light theme) |
var(--rh-color-icon-status-success-on-light, #3d7317)
|
|||
| Success status icon color (dark theme) |
var(--rh-color-icon-status-success-on-dark, #87bb62)
|
When layouts change in size responding to screen size, visual elements may adjust their size, hide, or otherwise adapt to compensate for gains or losses in screen real estate.
Red Hat's breakpoint tokens represent the minimum
CSS pixel width of a device's
screen, corresponding to the min-width media query so for example a device with a
screen width less than the --rh-breakpoint-xs token is considered a mobile
device in portrait mode, whereas a device with a screen width greater than the
--rh-breakpoint-xl token is considered a desktop with a large screen.
Since CSS currently does not allow custom properties in media queries, these tokens must be uses in preprocessors or templating systems, or imported into JavaScript modules. We recommend against importing these token values directly into components. In Red Hat's Design System, we import them into a reactive controller which exposes information about the screen size through a JavaScript API.
See also media queries.
static styles = css`
@media (max-width: ${Breakpointxs}) {
/* ... mobile portrait styles */
}
`;| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
Mobile portrait (max-width) |
var(--rh-breakpoint-2xs-max, 575px)
|
||
|
Mobile portrait |
var(--rh-breakpoint-xs, 576px)
|
||
|
Mobile landscape (max-width) |
var(--rh-breakpoint-xs-max, 767px)
|
||
|
Mobile landscape |
var(--rh-breakpoint-sm, 768px)
|
||
|
Mobile landscape (max-width) |
var(--rh-breakpoint-sm-max, 991px)
|
||
|
Tablet portrait |
var(--rh-breakpoint-md, 992px)
|
||
|
Tablet portrait (max-width) |
var(--rh-breakpoint-md-max, 1199px)
|
||
|
Tablet landscape |
var(--rh-breakpoint-lg, 1200px)
|
||
|
Tablet landscape (max-width) |
var(--rh-breakpoint-lg-max, 1439px)
|
||
|
Desktop small |
var(--rh-breakpoint-xl, 1440px)
|
||
|
Desktop small (max-width) |
var(--rh-breakpoint-xl-max, 1679px)
|
||
|
Desktop large |
var(--rh-breakpoint-2xl, 1680px)
|
For use in templating systems and JavaScript modules. We recommend against importing tokens directly into components. These are directly derived from breakpoints.
<link rel="stylesheet"
href="large-screen.css"
media="{{ tokens.get('--rh-media-lg') }}"| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Mobile portrait |
var(--rh-media-xs, (min-width: 576px))
|
|||
| Mobile landscape |
var(--rh-media-sm, (min-width: 768px))
|
|||
| Tablet portrait |
var(--rh-media-md, (min-width: 992px))
|
|||
| Tablet landscape |
var(--rh-media-lg, (min-width: 1200px))
|
|||
| Desktop small |
var(--rh-media-xl, (min-width: 1440px))
|
|||
| Desktop Large |
var(--rh-media-2xl, (min-width: 1680px))
|
