Color is deliberately used to reinforce meaning or content hierarchy.
There are two important considerations when deciding between using theme colors or static colors: what the color is going to be applied to and what the color's relationship will be with other colors or objects.
Make this choice in a way that ensures an appropriate level of contrast is given to an object and any text or iconography.
Theme-specific color tokens return color values for each color theme. Use theme-specific color tokens for most uses of color, such as when the color will be applied to text, icons, or the borders of a component. They should be used for anything that needs to meet the WCAG contrast minimum or non-text contrast when placed over a background color of gray-50 through gray-200.
Static color tokens have the same color value across all color themes. Use static color tokens when using color as a background, with text or icons on top of the color. These colors should be used with black or white text or icons, depending on which provides the best contrast. For example, when used as a background, static-blue-900 should be paired with white text, and static-yellow-300 should be paired with black text.
Spectrum provides three background layer color options for use in application framing: background layer 1, background layer 2, and background base. Background layer colors create dimension, hierarchy, and separation between content. Use these in large regions of layout — not for component backgrounds.
Background layer | Light theme | Dark and darkest themes |
---|---|---|
Background base | gray-200 | gray-50 |
Background layer 1 | gray-100 | gray-75 |
Background layer 2 | gray-50 | gray-100 |
Background base should only be used as empty space surrounding content or regions in professional editing applications. Placing components, icons, or text content directly on background base may not provide sufficient contrast in light theme.
Background layer colors are alias tokens in Spectrum’s design tokens. They reference different gray color tokens per theme, creating dimensionality that persists across themes.
Background layer colors create the scaffolding of a product’s user interface: the application frame. The level of scaffolding depth needed is dependent upon the product, content, users, and platform. Spectrum supports a variety of options using background layers to provide product flexibility.
One option for these types of applications is to use background layer 1 for the header, footer, toolbars, and paneling. Background layer 2 is used for content (excluding artboards). Background base is used for pasteboards or surrounding backgrounds in photography, video, 3D, or compositing apps.
Another option is to use background layer 2 for the header, footer, toolbars, and paneling. This puts the frame at the same level of dimension as the primary content. No part of this option uses the background layer 1. This is useful when needing to conform to platform conventions (e.g., the prominent usage of white for application frames in Android light mode).
These types of applications need less dimension to the application frame. The header, footer, toolbars, panels, and primary content all use the background layer 2. Areas that contain content (such as a gallery of cards) use the background layer 1. No part of this option uses background base.
Sometimes it’s necessary to use color for the background or fill of an object in an interface. Use color backgrounds sparingly, except for the following cases.
For these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and cyan while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette.
Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette.
Two color tokens of the same hue can be combined to create subtle background colors with colored icons or illustrations. These are used for actions or objects that need additional visual distinction in the interface.
To create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700.
Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users.
Spectrum components follow a consistent guideline for applying color tokens as interactive states.
Interactive states increase the color indices incrementally from default, to hover, and down. Keyboard focus state is equal to the presentation of the hover state with an additional focus indicator. Contrast should be relative to either the background of the application or the color of text (when using color as a background).
Theme-specific colors get darker in light themes and lighter in dark themes for each state. Static colors progressively get darker, regardless of the color theme.
The change in lightness from one state color to the next will appear to be the same amount of change whether the color is dark or light. This is due to the perceptually linear progression of lightness in Spectrum’s colors.
Every part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards.
Don’t use custom colors.
Spectrum’s colors are opaque and should not be replaced by using transparencies to achieve the same colors. There are only a few instances where it's acceptable to use transparency: for background overlays, drop shadows, and highlight selection styles.
When designing components to be placed over a colored background or image, refer to the transparent white and black color palette.
Use gray tokens.
Don’t use transparent colors.
In order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning.
Use text and icons with color.
Don’t use color alone to communicate.
Use background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes.
Use background layers for app framing
Don’t use global grays for app framing.
Use the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme.
Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product.
Use background layers and correct color tokens.
Don’t use global grays for backgrounds or use different color tokens than specified.
Avoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users.
Use static white or static black components instead of colored components on top of color or image backgrounds.
Change one of the element's colors to avoid hue contrast issues.
Don’t combine elements with contrasting hues of similar saturation and lightness.
Do not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors.
Use Spectrum colors as they are.
Don’t programmatically modify Spectrum colors.
Colors for data visualization are unique and should be used appropriately. Do not use theme-specific or static colors. View Color for data visualization for appropriate colors and guidelines.
Use data visualization colors.
Don’t use theme colors for data visualization.