Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe's applications more cohesive. It is utilized by every major product team at Adobe (>100 products in market), and is available to 3rd-party developers at spectrum.adobe.com.

The design system consists of design guidelines, components, patterns, UI kits and tools, and is available publicly via CSS and React implementations.

Origins
As with many things at Adobe, Spectrum started organically. In fact, prior to 2017 there were multiple simultaneous efforts to cultivate greater consistency and cohesion within certain areas of the company.

The Experience Cloud organization was one of the earliest proponents of a common design language. This makes sense when one takes a look at the products themselves: they are primarily web-based, and many of them are focused on managing or visualizing information. Tables, charts and forms permeate the products. This was fertile ground for systematizing the UI, and thus emerged a collection of patterns and a proprietary framework (known as Coral UI). This was arguably Adobe's first true design system, and for Experience Cloud products (and other web-based tools), this was a great solution.

But Adobe has other products for which this solution doesn't make quite as much sense. The suite of applications that comprises Creative Cloud and Document Cloud are drastically different from Experience Cloud. Creative Cloud products are, for the most part, desktop-based, and chock full of functional toolbars and panels. Instead of tables and charts, elements such as sliders, color pickers and on-canvas UI rule the day. Furthermore, these products don't share a common framework and are built on differing tech stacks.

Aligning a vast ecosystem
The natural approach to aligning across Adobe's vast array of professinal tools was to start with an audit, cataloging the various inconsistencies in Adobe's products and looking for opportunities to unify. But the similarities ended there. Whereas Experience Cloud products could accelerate the process of building consistently via a shared platform, the process with Creative Cloud relied more on negotiating with individual product teams to adopt up the new design system within their own domain. Tantalizing comps were created to demonstrate the potential of unifying the products, and, after a long and painstaking effort, some progress was made.

Design tokens: enabling flexibility and scale
The most powerful method of achieving visual and experiential consistency across Adobe's wide array of products was to rely on tokenization.

Spectrum is a highly tokenized design system, driving a multitude of customized implementations internally, and powering a set of automation tools that allow for push-button updates of components, UI kits and web documentation.

The team
Leading the Spectrum team was one of the most rewarding experiences during my time at Adobe.

The Spectrum team was groundbreaking in establishing a truly cross-functional center of innovation within the Adobe's design organization. UX design, visual design, design engineering and product management were all integrated into one team.

In addition to building and maintaining the design system, the Spectrum team included a strong sub-team working on design system Tools, which focused on automating production design tasks and integrating the design system more natively into Adobe's creative toolset.

Before Adobe XD launched officially, it was codenamed Comet. But before that, it existed under a different codename: Sparkler.

The story of what is now Adobe's premier digital design tool begins in late 2014 with a simple prototype created by two extremely talented engineers, Narciso "NJ" Jaramillo and Anirudh Sasikumar.

This prototype pointed in a bold new direction for Adobe's creative toolset: a lightning-fast layout and transformation engine, and a streamlined, focused feature set. This implicitly recognized a fundamental truth that was not yet widely acknowledged within Adobe at that time: that tools such as Photoshop and Illustrator, powerful though they are, do not meet the needs of designers creating experiences for web, mobile and other natively digital environments.

Companies like Bohemian Coding (Sketch) and Figma were racing ahead with modern functionality built for this very purpose. Adobe was at risk of missing this important opportunity.

I was the first designer attached to Project Sparker (so named because it aimed to be the reinvention of Fireworks, which, despite being sunsetted by Adobe the year prior, still had a cult following from its Macromedia days).

Working with NJ, Anirudh and a product manager (Tom Krcha), we set out to envision what this product could become. We were soon joined by another designer from my team, Talin Wadsworth. It's important to note that Talin deserves much of the credit for the amazing and powerful tool that Adobe XD has become. My role in those early days was primarily in helping get the project off the ground.

This team of five worked collaboratively to hone that prototype into a workable proof of concept, which eventually became the tool that was showcased at Adobe MAX in 2015: Project Comet.

Today, Adobe XD occupies a key place in Adobe's Creative Cloud offering, and, along with Sketch and Figma, is one of the most widely-utilized tools for creating modern interactive experences.

Adobe Stock is an online marketplace for royalty-free and rights-managed imagery, video and other creative assets.

Building a marketplace for users to buy and sell creative assets was a natural extension of Adobe's existing Creative Cloud ecosystem. The opportunity to integrate this market directly into Adobe's collection of professional-grade applications creates a defensible advantage, and allows users to work more efficiently than ever before. Furthermore, by creating an outlet for creatives to sell their work, Adobe is taking the first steps toward a sustainable solution for customers to support themselves financially by doing what they love.

I led the design of the initial Adobe Stock rollout in 2015, individually designing the first version of the Adobe Stock website while simultaneously hiring and bootstrapping the team that would eventually improve and expand the service. At the time I was also managing the Creative Cloud Experience design team, which is directly responsible for integrating the Adobe Stock service into Adobe's desktop products.