Theming

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes.

Key example of 11 components, each in 2 different themes: the default Spectrum theme and the Spectrum for Adobe Express theme.

Overview#

Theming allows for Spectrum to adapt to business-critical strategies by intentionally and systematically customizing specific visual attributes. Themes can help products to align with different audiences and user needs, provoke certain emotional responses, or meet specific branding requirements.

Key example of components in light and darkest color themes for Spectrum and Spectrum for Adobe Express. Accent button, label Submit. Action button with icon, label Delete. Unselected checkbox, label Border.

Theming and color themes#

A theme can encompass changes to any visual aspect of the Spectrum design language, such as colors, rounding, shadow, and typography. Component options and general dimensions stay the same across themes.

A color theme is a subset of a theme that only affects colors. View Color themes and modes for more information.

Available themes#

Key example of components Spectrum. Heading, Welcome. Accent button in blue, label Submit. Action button with icons and labels, label Edit and Delete. Checkbox, selected, label Fill. Checkbox, unselected, label Border. Switch, unselected, label Available offline. Text field, label Name, value Lisa Wilson. Tooltip, label Artboard. Slider, label Opacity, value 50%. Two swatches.

Spectrum (default)#

This is the foundational theme of Spectrum. It has a minimalist design, with thin borders and blue accents. It's designed for professional applications with enough flexibility to apply to broader needs, such as for marketing and documentation websites. This is the theme for the majority of Adobe experiences.

Key example of components Spectrum for Adobe Express. Heading, Welcome. Accent button in indigo, label Submit. Action button with icons and labels, label Edit and Delete. Checkbox, selected, label Fill. Checkbox, unselected, label Border. Switch, unselected, label Available offline. Text field, label Name, value Lisa Wilson. Tooltip, label Artboard. Slider, label Opacity, value 50%. Two swatches.

Spectrum for Adobe Express#

This is a theme of Spectrum designed specifically for the Adobe Express product suite. Some recognizable attributes are a friendlier visual tone, bolder typography, more rounding, and indigo accents. This theme is designed to accommodate the needs of a mainstream, creative consumer audience. Currently, only products in the Adobe Express suite use this theme.

Resources for Spectrum for Adobe Express#

UI kits#

Spectrum for Adobe Express UI kits are available for download on each component page, when available. These UI kits are available as XD files and contain resources for both scales (desktop and mobile) and all color themes.

Available implementations#

Currently, the Spectrum for Adobe Express theme is only available in the following implementations:

Spectrum CSS
Spectrum Web Components