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?
Use theme tokens for best results.
That way, colours respond to their parents' color-palette
Without requiring custom CSS
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 | |
|---|---|---|---|---|
| Brand red on light background |
var(--rh-color-brand-red-on-light, #ee0000)
|
|||
| Brand red on dark background |
var(--rh-color-brand-red-on-dark, #ee0000)
|
|||
| 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)
|
| 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. Use the --rh-interactive-(blue|purple)-(normal|emphasized) theme
tokens in order to style content of themable containers like <rh-surface>
<rh-surface color-palette="lighter">
<p>Use <a href="#">theme tokens</a> for best results.<p>
<rh-card color-palette="darkest">
<p>That way, colours respond to their parents' <code>color-palette</code>
Without requiring <a href="#">custom CSS</a></p>
</rh-card>
</rh-surface>rh-surface {
& a {
color: var(--rh-color-interactive-primary-default);
&:hover { color: var(--rh-color-interactive-primary-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-focus); }
&:active { color: var(--rh-color-interactive-primary-active); }
&:visited {
color: var(--rh-color-interactive-primary-visited);
&:hover { color: var(--rh-color-interactive-primary-visited-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
&:active { color: var(--rh-color-interactive-primary-visited-active); }
}
}
}| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive - default (Light theme) |
var(--rh-color-interactive-primary-default-on-light, #0066cc)
|
|||
| Primary interactive - default (Dark theme) |
var(--rh-color-interactive-primary-default-on-dark, #92c5f9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive - hover (Light theme) |
var(--rh-color-interactive-primary-hover-on-light, #003366)
|
|||
| Primary interactive - hover (Dark theme) |
var(--rh-color-interactive-primary-hover-on-dark, #b9dafc)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive - active (Light theme) |
var(--rh-color-interactive-primary-active-on-light, #003366)
|
|||
| Primary interactive - active (Dark theme) |
var(--rh-color-interactive-primary-active-on-dark, #b9dafc)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive - focus (Light theme) |
var(--rh-color-interactive-primary-focus-on-light, #003366)
|
|||
| Primary interactive - focus (Dark theme) |
var(--rh-color-interactive-primary-focus-on-dark, #b9dafc)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive visited - default (Light theme) |
var(--rh-color-interactive-primary-visited-default-on-light, #5e40be)
|
|||
| Primary interactive visited - default (Dark theme) |
var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive visited - hover (Light theme) |
var(--rh-color-interactive-primary-visited-hover-on-light, #21134d)
|
|||
| Primary interactive visited - hover (Dark theme) |
var(--rh-color-interactive-primary-visited-hover-on-dark, #ece6ff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive visited - active (Light theme) |
var(--rh-color-interactive-primary-visited-active-on-light, #21134d)
|
|||
| Primary interactive visited - active (Dark theme) |
var(--rh-color-interactive-primary-visited-active-on-dark, #ece6ff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Primary interactive visited - focus (Light theme) |
var(--rh-color-interactive-primary-visited-focus-on-light, #21134d)
|
|||
| Primary interactive visited - focus (Dark theme) |
var(--rh-color-interactive-primary-visited-focus-on-dark, #ece6ff)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive - default (Light theme) |
var(--rh-color-interactive-secondary-default-on-light, #4d4d4d)
|
|||
| Secondary interactive - default (Dark theme) |
var(--rh-color-interactive-secondary-default-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive - hover (Light theme) |
var(--rh-color-interactive-secondary-hover-on-light, #4d4d4d)
|
|||
| Secondary interactive - hover (Dark theme) |
var(--rh-color-interactive-secondary-hover-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive - active (Light theme) |
var(--rh-color-interactive-secondary-active-on-light, #4d4d4d)
|
|||
| Secondary interactive - active (Dark theme) |
var(--rh-color-interactive-secondary-active-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive - focus (Light theme) |
var(--rh-color-interactive-secondary-focus-on-light, #4d4d4d)
|
|||
| Secondary interactive - focus (Dark theme) |
var(--rh-color-interactive-secondary-focus-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive visited - default (Light theme) |
var(--rh-color-interactive-secondary-visited-default-on-light, #4d4d4d)
|
|||
| Secondary interactive visited - default (Dark theme) |
var(--rh-color-interactive-secondary-visited-default-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive visited - hover (Light theme) |
var(--rh-color-interactive-secondary-visited-hover-on-light, #4d4d4d)
|
|||
| Secondary interactive visited - hover (Dark theme) |
var(--rh-color-interactive-secondary-visited-hover-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive visited - active (Light theme) |
var(--rh-color-interactive-secondary-visited-active-on-light, #4d4d4d)
|
|||
| Secondary interactive visited - active (Dark theme) |
var(--rh-color-interactive-secondary-visited-active-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Secondary interactive visited - focus (Light theme) |
var(--rh-color-interactive-secondary-visited-focus-on-light, #4d4d4d)
|
|||
| Secondary interactive visited - focus (Dark theme) |
var(--rh-color-interactive-secondary-visited-focus-on-dark, #c7c7c7)
|
| 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, #ece6ff)
|
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, #ffe3d9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Caution status surface color (light theme) |
var(--rh-color-surface-status-caution-on-light, #ffe8cc)
|
|||
| Caution status surface color (dark theme) |
var(--rh-color-surface-status-caution-on-dark, #ffe8cc)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning status surface color (light theme) |
var(--rh-color-surface-status-warning-on-light, #fff4cc)
|
|||
| Warning status surface color (dark theme) |
var(--rh-color-surface-status-warning-on-dark, #73480b)
|
| 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, #f2f2f2)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Neutral status surface color (light theme) |
var(--rh-color-surface-status-neutral-on-light, #f2f2f2)
|
|||
| Neutral status surface color (dark theme) |
var(--rh-color-surface-status-neutral-on-dark, #f2f2f2)
|
| 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, #ece6ff)
|
| 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, #e9f7df)
|
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 status color (light theme) |
var(--rh-color-status-danger-on-light, #b1380b)
|
|||
| Danger status color (dark theme) |
var(--rh-color-status-danger-on-dark, #f0561d)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Caution status color (light theme) |
var(--rh-color-status-caution-on-light, #ca6c0f)
|
|||
| Caution status color (dark theme) |
var(--rh-color-status-caution-on-dark, #f5921b)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Warning status color (light theme) |
var(--rh-color-status-warning-on-light, #dca614)
|
|||
| Warning status color (dark theme) |
var(--rh-color-status-warning-on-dark, #ffcc17)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Neutral accent color (light theme) |
var(--rh-color-status-neutral-on-light, #4d4d4d)
|
|||
| Neutral accent color (dark theme) |
var(--rh-color-status-neutral-on-dark, #c7c7c7)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Note/tip status color (light theme) |
var(--rh-color-status-note-on-light, #5e40be)
|
|||
| Note/tip status color (dark theme) |
var(--rh-color-status-note-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Info status color (light theme) |
var(--rh-color-status-info-on-light, #5e40be)
|
|||
| Info status color (dark theme) |
var(--rh-color-status-info-on-dark, #b6a6e9)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Success status color (light theme) |
var(--rh-color-status-success-on-light, #3d7317)
|
|||
| Success status 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@500;700&family=Noto+Sans+JP:wght@500;700&family=Noto+Sans+KR:wght@500;700&family=Noto+Sans+Malayalam:wght@500;700&family=Noto+Sans+SC:wght@500;700&family=Noto+Sans+TC:wght@500;700&family=Noto+Sans+Tamil:wght@500;700&family=Noto+Sans+Thai:wght@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', Helvetica, Arial, sans-serif)
|
||
| Aa | Body text font family |
var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif)
|
||
| Aa | Code font family |
var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace)
|
||
| Aa | Arabic font family |
var(--rh-font-family-lang-ar, 'Noto Sans Arabic')
|
||
| Aa | Hebrew font family |
var(--rh-font-family-lang-he, 'Noto Sans Hebrew')
|
||
| Aa | Japanese font family |
var(--rh-font-family-lang-ja, 'Noto Sans JP')
|
||
| Aa | Korean font family |
var(--rh-font-family-lang-ko, 'Noto Sans KR')
|
||
| Aa | Malayalam font family |
var(--rh-font-family-lang-hi, 'Noto Sans Malayalam')
|
||
| Aa | Thai font family |
var(--rh-font-family-lang-th, 'Noto Sans Thai')
|
||
| Aa | Simplified Chinese font family |
var(--rh-font-family-lang-zh-cn, 'Noto Sans SC')
|
||
| Aa | Traditional Chinese font family |
var(--rh-font-family-lang-zh-hk, 'Noto Sans TC')
|
| 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 | |
|---|---|---|---|---|
| Aa | Regular font weight |
var(--rh-font-weight-body-text-regular, 400)
|
||
| Aa | Medium font weight |
var(--rh-font-weight-body-text-medium, 500)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Regular font weight |
var(--rh-font-weight-code-regular, 400)
|
||
| Aa | Medium font weight |
var(--rh-font-weight-code-medium, 500)
|
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa | Regular font weight for headings |
var(--rh-font-weight-heading-regular, 400)
|
||
| Aa | Medium font weight for headings |
var(--rh-font-weight-heading-medium, 500)
|
||
| Aa | 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)
|
| 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 | |
|---|---|---|---|---|
| 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 | |
|---|---|---|---|---|
| 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)
|
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))
|
