Skip to main content

An official website of the United States government

Here's how you know

Design System

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

What's new?

View code on GitHub

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

Standardizing theme colors in v7

We've updated theme colors by removing non-semantic colors red, gold, green and coolblue and standardizing colors across themes.

What this changes

With the expansion of the design system themes to include a fourth theme (CMS.gov), we noticed theme variables were inconsistent. In some cases colors and whole color palettes weren't being used and needed to be removed. We've cleaned up and reorganized these colors using design tokens and theming to provide a more intentional approach to color.

Brand colors

Primary

We've updated the primary color to complete the spectrum from lightest to darkest. There are now more primary color values to use.

BeforeAfter
--color-primary-lightestocean 50
--color-primary-lightestocean 50
did not exist
--color-primary-lighterocean 100
did not exist
--color-primary-lightocean 300
--color-primaryocean 500
--color-primaryocean 500
did not exist
--color-primary-darkocean 600
--color-primary-darkerocean 700
--color-primary-darkerocean 700
--color-primary-darkestocean 800
--color-primary-darkestocean 800

Secondary

One major shift with color standardization is updating the secondary color to use green system color tokens in the core and healthcare themes. In addition, we created the info status color and secondary colors have moved to the info color palette for informational components such as alerts, badges, and icons.

Warning: What to do: If you are using secondary colors in your design, you'll need to re-evaluate if that color should be remapped to a different theme color.
BeforeAfter
--color-secondary-lightestsky 50
--color-secondary-lightestspring 50
--color-secondary-lightersky 100
--color-secondary-lighterspring 200
--color-secondary-lightsky 300
--color-secondary-lightspring 400
--color-secondarysky 500
--color-secondaryspring 500
--color-secondary-darksky 600
--color-secondary-darkspring 600
--color-secondary-darkersky 700
--color-secondary-darkerspring 700
--color-secondary-darkestsky 800
--color-secondary-darkestspring 800

Status colors

Status colors are used to communicate error, success, warning, or info statuses.

Informational

We added an informational color palette for informational alerts, badges, and icons.

Warning: What to do: If you are using secondary colors for informational elements, you'll need to update them to use info colors from the theme colors..
BeforeAfter
did not exist
--color-info-lightestsky 50
did not exist
--color-info-lightersky 100
did not exist
--color-info-lightsky 300
did not exist
--color-infosky 500
did not exist
--color-info-darksky 600
did not exist
--color-info-darkersky 700
did not exist
--color-info-darkestsky 800

Green

Green is removed and was a non-semantic duplicate of success.

Warning: What to do: If you are using green colors for success states, you'll need to update to use success colors from the theme colors.
BeforeAfter
--color-green-lightestspring 50
removed
--color-green-lighterspring 200
removed
--color-green-lightspring 400
removed
--color-greenspring 500
removed
--color-green-darkspring 600
removed
--color-green-darkerspring 700
removed
--color-green-darkestspring 800
removed

Gold

Gold is removed and was a non-semantic duplicate of warn.

Warning: What to do: If you are using gold colors for warning states, you'll need to update to use warn colors from the theme colors.
BeforeAfter
--color-gold-lightestgoldenrod 50
removed
--color-gold-lightergoldenrod 200
removed
--color-gold-lightgoldenrod 400
removed
--color-goldgoldenrod 500
removed
--color-gold-darkgoldenrod 600
removed
--color-gold-darkergoldenrod 700
removed
--color-gold-darkestgoldenrod 800
removed

Red

Red is removed and was a non-semantic duplicate of error.

Warning: What to do: If you are using red colors for error states, you'll need to update to use error colors from the theme colors.
BeforeAfter
--color-red-lightestrose 50
removed
--color-red-lighterrose 100
removed
--color-red-lightrose 200
removed
--color-redrose 500
removed
--color-red-darkrose 600
removed
--color-red-darkerrose 700
removed
--color-red-darkestrose 800
removed

Neutral colors

Grays have been standardized and use the same naming structure as other color palettes.

Warning: What to do: If you are using gray colors that have been removed, you'll need to remap to a new neutral color from the theme colors.
BeforeAfter
--color-gray-cool-lightocean 50
removed
--color-gray-warm-lightgranite 50
removed
--color-gray-lightestgranite 50
--color-gray-lightestgranite 50
--color-gray-lightergranite 100
--color-gray-lightergranite 100
--color-gray-lightgranite 300
--color-gray-lightgranite 300
--color-graygranite 700
--color-graygranite 500
--color-gray-darkgranite 800
--color-gray-darkgranite 700
did not exist
--color-gray-darkergranite 800
did not exist
--color-gray-darkestgranite 900
--color-gray-mediumgranite 600
removed
--color-gray-warm-darkgranite 800
removed

Color shift of neutrals

Both --color-gray and --color-gray-dark are now lighter.

Warning: What to do: You'll need to evaluate if you need to adjust thegray color you are using to use a different neutral color from the theme colors.
BeforeAfter
--color-graygranite 700
--color-graygranite 500
--color-gray-darkgranite 800
--color-gray-darkgranite 700

Coolblue

Coolblue was unused in the design system and is removed.

Warning: What to do: If you are using coolblue colors, you'll need to update to use a new theme color instead.
BeforeAfter
--color-coolblue-lightestsapphire 50
removed
--color-coolblue-lightersapphire 200
removed
--color-coolblue-lightsapphire 500
removed
--color-coolbluesapphire 600
removed

Components impacted

Alert

The alert component has been updated to use info colors for the left border color and background color. This change does not result in visual changes.

Autocomplete items

The hover/selected state for autocomplete items in core and healthcare changed from using the secondary (now info) blue to the primary blue used in buttons.

BeforeAfter
--autocomplete-item__background-color--activesky 800
--autocomplete-item__background-color--activeocean 800

Calendar picker button

Previously, gray-cool-light was mapped to the same system color token for all themes.

When removing gray-cool-light, we remapped the background color for the hover state of calendar picker buttons to primary-lightest. On all but the core theme, this results in a slight color shift for the background color of those day-picker buttons when hovered.

BeforeAfter
--color-gray-cool-lightocean 50
--color-primary-lightestocean 50

Filter chip

The secondary to info color shift in most themes forced us to make a decision about border and background colors for the filter chip. Previously most themes had a mismatch between these two colors. While the chosen colors depend on the brand, we've made sure the border and background match now.

BeforeAfter
--filter-chip__background-colorsky 50
--filter-chip__background-colorocean 50
--filter-chip__border-colorocean 500
--filter-chip__border-colorocean 500

On this page

Have ideas?