About Spectrum
Overview
Spectrum is Adobe's design system, created to keep the company's applications visually cohesive. It provides product teams with components and tools so they can work more efficiently while maintaining a consistent experience across Adobe's software.
The system organizes its offering around three areas. Principles lays out foundational thinking and how it is applied. Resources provides downloadable design assets, and Implementations offers open-source code libraries for building with Spectrum.
Key Benefits
- Establishes shared design principles that guide consistent product decisions
- Provides an Adobe XD plugin to speed up design workflows
- Offers downloadable UI kits, fonts, and icons
- Ships open-source implementations for CSS, React, and web components
- Keeps Adobe applications visually cohesive across products
How It Works
Teams start with the Principles section to understand the system's foundational thinking. They then download resources such as the Adobe XD plugin, UI kits, fonts, and icons, or adopt one of the open-source implementations — Spectrum CSS, React Spectrum, or Spectrum Web Components — paired with the detailed usage guidelines.
Use Cases
- Product designers using the Adobe XD plugin and UI kits to produce designs faster
- CSS developers styling components with Spectrum CSS
- React developers building interfaces from React Spectrum
- Web developers assembling components with Spectrum Web Components
- Product teams aligning multiple Adobe applications around one cohesive system
Key Features
Design principles
Foundational thinking that guides how the design system is applied across products.
Adobe XD plugin
A downloadable plugin that speeds up design work within Adobe XD.
UI kits
Downloadable UI kits that help designers build with Spectrum faster.
Fonts
Downloadable fonts used across the design system.
Icons
Downloadable icon resources for use in product designs.
Spectrum CSS
An open-source CSS implementation of the design system.
React Spectrum
An open-source React implementation of Spectrum components.
Web components
An open-source implementation of Spectrum as web components.
Spectrum Pricing
Pricing extracted from the product website and may change. Check the source for current details.