Adobe Spectrum

Spectrum earns its place in this directory on the strength of an idea most design systems only gesture at: behavior is a separate layer from styling, and it can be reused on its own. Adobe's products are dense professional tools, Photoshop, Illustrator, Acrobat, where a slider, a color picker, or a data table has to work by keyboard, by touch, and through a screen reader, in more than 30 languages. The system was built to carry that weight, and the parts of it that do the heavy lifting are available without the rest.

React Aria is the real story React Spectrum is the component library most teams adopt, but the more durable contribution is underneath it. React Aria is a set of hooks that implements the behavior of each component, keyboard interaction, focus management, screen reader announcements, without imposing any styling. React Stately does the same for component state. A team that wants its own visual language can build custom components on those hooks and inherit Adobe's accessibility work instead of re-deriving it. That separation is the reason Spectrum keeps coming up in conversations about accessible component architecture even among teams that never ship a Spectrum-styled pixel. It is also why the system matters beyond Adobe products: the hooks are a reference implementation for how accessible behavior should work, published as a library rather than locked inside one company's components.

Scale, theme, and locale are built in, not bolted on The parts of theming that other systems leave to the adopter are defaults here. A React Spectrum Provider sets a light or dark color scheme and a medium or large platform scale, and unless a team overrides them, the color scheme follows the operating system and the scale follows the device's pointer type, so a touch device gets larger targets without a media query in application code. The locale follows the browser or operating system, and components handle right-to-left layouts and locale-aware date and number formatting. None of this is exotic on its own; what stands out is that it arrives as the default configuration rather than as a set of recipes to assemble. The scale of the system is easy to underestimate: when Adobe introduced Spectrum in 2018, it counted 1,080 ways a button could display across its products, and the system exists because that variation had to be governed rather than designed case by case.

Three implementations, one system, and a generation change under way Spectrum is not a single codebase. Spectrum CSS styles components with classes and needs no JavaScript, React Spectrum is the React implementation at version 3.47.7, and Spectrum Web Components carries the system to framework-neutral projects. That breadth is a strength for a multi-stack organization and a real choice for a single-stack team, which has to pick the implementation that matches its stack and accept that the others are separate codebases to learn. The complication in 2026 is generational: documentation has moved to a new Spectrum Hub where the React and Web Components areas are in beta, and Spectrum 2 is documented alongside the v3 library. A team starting fresh should read the migration guidance before choosing, because picking v3 by habit and discovering the Spectrum 2 direction mid-project is the kind of rework that is cheap to avoid and expensive to fix.

The honest costs First, the React library is React only. Vue, Angular, and Svelte teams use Spectrum CSS or the Web Components, which are genuine implementations but not the same developer experience, and the community examples and issue answers skew heavily React. Second, Adobe's visual language is the default. The neutral professional look suits creative tools well, but a product that needs a distinct brand has to do deliberate theming work rather than getting character for free. Third, the system is large. The token set, the Figma libraries, and the sheer component count take longer to learn than a small kit, and that learning cost only pays off on a product complex enough to need it. A marketing site or a simple dashboard will not feel the benefit; a dense editor, a media manager, or an accessibility-critical application will.

For teams building creative tools, accessibility-first web applications, or a design system of their own on top of React Aria, Spectrum is the reference to measure against, with the generation question settled first. For everyone else, read it as the best-documented example in this directory of behavior separated from styling, and borrow that architecture even if you never adopt the components.