Color Tokens

Color tokens define the standardized color values used across the Clinical Design System. They support consistent, accessible, and predictable experiences across applications by providing a shared set of colors for interface elements, system states, and data visualizations.

These tokens are designed to help teams apply color intentionally, reduce ambiguity, and meet accessibility requirements in clinical contexts.

How to use color tokens

Getting started with our color tokens.

Source file location: ./dist/core/tokens/colors

Import as follow in your Sass file @use ‘@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/colors’ as colors

Please note: All of our color tokens live in the same file.

Theme color tokens

The VA Clinical Design System Core uses USWDS color tokens. USWDS theme color tokens provide flexible, accessible, customizable color choices for your project.

State color tokens

VACDS state color tokens use USWDS tokens. Their intention is to be useful and effective for any project that has states or alerts. Each state token is drawn from a system color token and we only use token-based colors in official components.

The state color palette is divided into five high-level role-based color families: info, error, warning, success, emergency, and disabled.

Each color family except emergency and disabled has five possible lightness grades, from lighter to darker, though not every family needs to include a color at each grade. Some grades may be set to false in your project’s theme settings.

Chart color tokens

Chart color tokens provide a standardized set of colors for data visualization across clinical applications. These colors are designed specifically for charts and graphs where color is used to differentiate data categories, trends, or comparisons.

Unlike theme or state colors, chart color tokens are optimized to be distinguishable when used together and to remain usable for users with visual impairments.

Chart color accessibility considerations

Chart color tokens were designed and tested to support users with common visual impairments, including color vision deficiencies.

All colors were evaluated in visual impairment simulations to ensure sufficient differentiation when displayed adjacent to one another. These tokens are intended to reduce ambiguity and improve data comprehension in clinical contexts.

Chart colors should never be used as the sole indicator of meaning and must be paired with labels, patterns, or annotations when communicating critical information.

Chart color design principles

• Perceptual distinguishability — Colors remain distinct under common visual impairment simulations.
• Consistency across applications — The same data concepts use the same colors wherever possible.
• Scalability — Tokens support small and large data sets without introducing ambiguity.
• Never color alone — Chart colors are designed to work alongside labels, patterns, and annotations.

Chart color palettes

Vibrant palette

A higher-contrast palette intended for primary data visualizations where strong differentiation is required.

Muted palette

A lower-saturation palette suitable for secondary data, dense dashboards, or supporting visualizations.