Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements 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 PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Developers

OverviewInstallationUsageTokensContributing
How to install tokensUsagePluginsHow to install tokensUsagePlugins

Design tokens are the source of truth for our design decisions. They provide the values needed to maintain our design system and are integral to consistently branded Red Hat digital experiences.

Developers are strongly encouraged to use our design tokens when writing CSS.

How to install tokens

Add one of the following <link> tags to your document's <head>:

Red Hat CDN
<link rel="stylesheet"
      href="https://www.redhatstatic.com/dssf-001/v2/@rhds/tokens@3.0.1/css/global.css">
Third party CDN

Public CDNs

jsDelivr and other public CDNs should not be used on corporate domains. Use them for development purposes only!

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@rhds/tokens@3.0.1/css/global.min.css">
NPM

If your project uses a bundler, run the following command in your terminal to install RHDS tokens:

npm install @rhds/tokens

Then reference the Tokens CSS file:

@import '@rhds/tokens@3.0.1/css/global.css';

Usage

We use style-dictionary to transform our tokens into multiple formats and helpers.

Use tokens in CSS

Apply defaults to the document root by importing the global stylesheet as seen above, then use our tokens in your CSS:

<style>
  :is(h1, h2, h3, h4, h5, h6) {
    color: var(--rh-color-text-primary);
    font-family: var(--rh-font-family-heading);
    margin-block-end: var(--rh-space-xl);
  }
</style>

Reset the shadowroot

Reset a component's styles (preventing inheritance) by adding resetStyles to its static Constructible Style Sheet list:

import { resetStyles } from '@rhds/tokens/css/reset.css.js';
import style from './rh-jazz-hands.css';

@customElement('rh-jazz-hands')
export class RhJazzHands extends LitElement {
  static readonly styles = [...resetStyles, style];
}

Import tokens as JavaScript objects

Note

We strongly recommend using CSS variables (and accompanying snippets), instead of importing tokens as JavaScript objects.

Import tokens as JavaScript objects:

import { tokens } from "@rhds/tokens";
const template = html` <span style="color: ${tokens.get("--rh-color-blue-300")}">I'm blue</span> `;

Or tree-shakable imports:

import { ColorBlue300 } from "@rhds/tokens/values.js";
const template = html` <span style="color: ${ColorBlue300}">I'm blue</span> `;

Plugins

Using editor snippets

Editor snippets complete prefixes like --rh-color-brand to their CSS custom properties, complete with fallback.

color: var(--rh-color-brand, #ee0000);

They also provide reverse lookup. For example, if you want to choose between all the tokens with the value #e00, you can do so by completing the prefix e00.

Load snippets in VSCode

Download the VSIX bundle that’s linked at the bottom of our “Release v1.0.0” page.

Load snippets in Neovim

Use LuaSnip to load snippets in Neovim:

require 'luasnip.loaders.from_vscode'.lazy_load { paths = {
  -- Path to the built project, perhaps in your `node_modules`
  '~/Developer/redhat-ux/red-hat-design-tokens/editor/vscode'
} }

Stylelint plugin

Install the stylelint plugin to automatically correct token values in your files.

See the Stylelint Plugin README for more info.

11ty plugin

The experimental 11ty plugin lets you display token values in an 11ty site.

vim-hexokinase

Vim users can load the vim-hexokinase plugin to display color swatches next to their encoded values in their editor.

Use the following config (lua syntax, for Neovim users) to configure hexokinase to display color values next to color aliases like {color.brand.red}.

vim.g.Hexokinase_optInPatterns = {
  'full_hex', 'triple_hex',
  'rgb', 'rgba',
  'hsl', 'hsla',
  'colour_names',
}

vim.g.Hexokinase_ftOptOutPatterns = {
  json = { 'colour_names' },
  yaml = { 'colour_names' },
}

vim.g.Hexokinase_palettes = {
  -- replace with path to the built tokens package on your drive
  vim.fn.expand'~/Developer/redhat-ux/red-hat-design-tokens/editor/neovim/hexokinase.json'
}

Designers

To get started using our design system as a designer, go to the Designers page.

© 2025 Red Hat Deploys by Netlify