Color system
Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system.
Table of contents#
Grays#
Spectrum uses 11


Each color theme uses gray-100 as the default background color (except when using
Gray backgrounds#

Grays 50 through 200 are used for
Gray borders#

Grays 200 and 300 are used for decorative borders and application framing. These grays are used for subtle contrast when applied decoratively or in non-essential elements.
Gray-400 is used for field borders (which includes components such as
Gray-600 is used for control borders (such as in a
When used on an interactive component, the progression of
Gray text#

Grays 700 through 900 are for text content. These color values provide sufficient contrast against gray-100 in order to meet WCAG contrast minimums. Gray-500 is reserved for disabled text, which does not need to meet contrast minimums. Disabled text is lower in contrast from non-disabled text in order to clearly signify that it is unavailable for user interaction.
When used for interactive text, the progression of
Gray icons and illustrations#

Grays 600 through 900 are for icon content, and provide sufficient contrast against gray-100 (as well as gray-200) to meet contrast minimums.
Gray-500 is reserved for line illustrations. Gray-400 is reserved for disabled icons, which do not need to meet contrast minimums. Disabled icons are lower in contrast from non-disabled icons in order to clearly signify that they are unavailable for user interaction.
When used for interactive icons, the progression of
Colors#
Spectrum uses 13


Colors give users context within their workflow and create a hierarchy of actions within the UI. Items in a selected or keyboard focus state are given visual importance since they relate to a user’s immediate actions.
Colors can also be used to show relationships between content types (e.g., categorization, labels in data visualizations). The
For more information on using colors, view
Color backgrounds#

Static color 900 is used for most
Static colors 300 through 600 are reserved for specific
When used on an interactive component, the progression of

Theme-specific color 100 is used for
When used on an interactive component, the progression of
Color borders#

Colors 600 through 800 are used for
When used on an interactive component, the progression of
Color text#

Color 900 is used for colored text content, but Spectrum only supports the use of colored text for the accent and negative semantics.
When used for interactive text, the progression of
Color icons and illustrations#

Colors 700 through 1100 are used for icon and illustration content. Specific
When used on an interactive component, the progression of
Decorative colors#

Colors 400 through 600 can be used for nonessential UI decoration. These colors have lower contrast with gray-100 and should be used sparingly and with caution. They should never be used to communicate essential information to users.
Transparent white and black#
Spectrum offers a set of 8


The transparent white and transparent black colors are only for use in components that support a transparent color option (such as an
Use the transparent white colors when the background color or image has a
Use the transparent black colors when the background color or image has a
Transparent white or black backgrounds#

Transparent-white-200 or transparent-black-200 are used for component backgrounds. In some cases, a component will use a transparent background for the default state.
Transparent-white-800 or transparent-black-800 are used for component backgrounds in a selected state.
When used on an interactive component, the progression of
Transparent white or black borders#

Transparent-white-400 and transparent-black-400 are used for field borders (which includes components such as the
Transparent-white-200 and transparent-black-200 are used for disabled component borders.
When used on an interactive component, the progression of
Transparent white or black text and icons#

Transparent-white-900 and transparent-black-900 are used for text and icon content to ensure sufficient contrast on variable background colors. Variable background colors are colors that are determined at the product implementation level, and are not controlled by the Spectrum color system.
When used for interactive text or icons, text and icon colors do not change.