Developers
On this page
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>:
<link rel="stylesheet"
href="https://www.redhatstatic.com/dssf-001/v2/@rhds/tokens@3.0.2/css/global.css">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.2/css/global.min.css">If your project uses a bundler, run the following command in your terminal to install RHDS tokens:
npm install @rhds/tokensThen reference the Tokens CSS file:
@import '@rhds/tokens@3.0.2/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'
}AI Tooling
Asimonim is a design tokens multitool that provides AI-powered editor features for RHDS tokens. It gives your editor and AI assistant structured knowledge of design tokens, including their names, values, types, and descriptions.
Asimonim offers two integration modes:
- LSP (Language Server Protocol) adds autocomplete, hover documentation, diagnostics, and code actions for design tokens in CSS, HTML, JavaScript, and TypeScript files
- MCP (Model Context Protocol) gives AI assistants direct access to token definitions for searching, validating, and converting tokens
Install Asimonim
Install using npm:
npm install -g @pwrs/asimonimOr using Go:
go install bennypowers.dev/asimonim@latestVerify the installation:
asimonim versionClaude Code
The Asimonim plugin for Claude Code provides both LSP and MCP support. Install the plugin with two commands:
/plugin marketplace add bennypowers/asimonim
/plugin install asimonimOnce installed, Claude Code gains:
- Editor intelligence for CSS, HTML, and JavaScript files, with autocomplete and diagnostics for RHDS tokens
- AI-native token understanding, so Claude can search, validate, and convert design tokens directly
No additional configuration is needed. The plugin discovers token files
in your project and in node_modules automatically.
Cursor
Cursor supports MCP servers for AI-assisted development. Add Asimonim to your Cursor MCP configuration:
{
"mcpServers": {
"asimonim": {
"command": "asimonim",
"args": ["mcp"]
}
}
}See the Cursor MCP docs for the configuration file location on your platform.
VS Code
Install the Design Tokens Language Server extension from the VS Code marketplace. The extension bundles the language server and works out of the box.
For MCP support, add Asimonim to your MCP configuration the same way as Cursor (above).
Neovim
For Neovim 0.11+ with native LSP support, create
~/.config/nvim/lsp/asimonim.lua:
return {
cmd = { 'asimonim', 'lsp' },
root_markers = { '.git', 'package.json' },
filetypes = { 'css', 'html', 'twig', 'php',
'javascript', 'javascriptreact',
'typescript', 'typescriptreact',
'json', 'yaml' },
}Learn more
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Designers
To get started using our design system as a designer, go to the Designers page.
