Adobe unveils Spectrum 2 design system, reimagining user experience for Adobe applications

suff Composite image showing mockups of what the Spectrum 2 design system may eventually look like in Adobe applications, including Acrobat, Adobe Journey Optimizer, and the Creative Cloud “Your Files” page.

If you’ve used more than one Adobe tool over the years, you’ve probably noticed similarities: application layout, icon design, and color palettes, to name a few. These are all components of our design system, Spectrum, first introduced over ten years ago. That system is what makes all Adobe experiences “feel like Adobe”.

Today, we unveil Spectrum 2, the most significant update to our design system yet. Adobe’s core audience is growing, with generative AI via Adobe Firefly expanding our reach to new users. At the same time, Adobe continues to serve professionals with tools they need for creative work, marketing work, and beyond. Spectrum 2 is intended to make Adobe tools even more intuitive, inclusive, and joyful to use across platforms, while supporting our mission of enabling Creativity for All.

Here’s a look at why we’re updating our design system now and what you can expect as it rolls out across Adobe experiences in 2024 with a sneak peek at the end of this post.

Where Spectrum began and why we’re updating it now

Much has changed since we first implemented Spectrum across Adobe products and experiences in 2013. Adobe Creative Cloud is now multi-platform across web, mobile, desktop, and mixed reality. We’ve launched Adobe Express, which enables everyone from educators to social influencers to create. And Adobe Document Cloud and Adobe Experience Cloud have both fundamentally changed their products and grown their customer bases.

And with the release of Firefly, powerful generative AI capabilities have transformed workflows across several Adobe applications. In short, we’re serving a much broader audience than we were a decade ago. Adobe has evolved and our design system needed to as well.

Composite image on a colorful background showing abstracted Spectrum 2 components, including color gradients, a toolbar, a text formatting window, a content tile, an analytics chart, button styles, and alert bar, and a download prompt, in anonymized product user interfaces.

Spectrum 2 is a comprehensive update that covers every design element including iconography, typography, color, brand, illustration, accessibility, product equity, personalization, data visualization, and more. This update will offer three major improvements for our users. It will make our products:

The first updates will roll out across Adobe web products in early 2024.

More inclusive and accessible

Spectrum 2 needed to meet a high bar for accessibility so the widest possible group of people can use Adobe tools. The World Health Organization estimates that 2.2 billion people around the world experience some form of visual impairment. For Spectrum 2, our definitive starting point for making our web tools more inclusive and accessible is the Web Content Accessibility Guidelines (WCAG) — which Adobe also contributes to.

Success in accessibility means many things: Adequate contrast ratios of text and other controls and containers relative to their backgrounds, accessibility tags, keyboard controls, focus states, and other execution details. Meeting fundamental accessibility requirements was a great first step, but we wanted to go further. Every person is different, and we want future Adobe products to flex and adapt to personal needs and preferences.

We emphasized three main areas in Spectrum 2:

Our efforts dovetail with Adobe Design’s Product Equity practice, which further partners with design, product, and engineering teams to ensure that every person, regardless of human difference, can access and harness the full power of our products, without bias, harm, or limitation.

Side-by-side composite of an anonymized product user interface, showing adjustable controls for dark mode, density, and contrast.

Spectrum 2 will accommodate a wider range of personal preferences and needs, for example, by offering customizable density and contrast options (shown above), making Adobe products more accessible and inclusive.

More approachable and expressive

The first version of Spectrum was minimal, with a gray color palette designed to recede. Spectrum 2 reimagines icons, typography, and more to make the Adobe experience more approachable and bolder in design.

The Spectrum team began experimenting with a more welcoming design in a single product: Adobe Express, our all-in-one creativity tool made for a broad audience. In collaboration with the Express design team, we created a new UI theme that previewed key components of Spectrum 2: Adobe Express was made to be lighter, bolder, and rounder. Icons and typography were more friendly, strokes were a bit thicker, colors were brighter, and in general, it was a lot more approachable.

A screenshot of the Adobe Express logged-in homepage with the greeting text “Welcome Shawn, What do you want to make?” and features including text to image and generative fill, with examples of outputs from each.

The work we’d done for Adobe Express became our starting point for Spectrum 2.

The sum of these changes made a big impact in how the application looked and felt to consumers. The work with Express became a crucial starting point, informing the new set of principles in Spectrum 2. These more expressive and approachable design elements will be foundational across Adobe applications, as Spectrum 2 gets rolled out in 2024.

More “at home” across any platform

Spectrum 2’s appearance will vary between platforms. Because Adobe develops products across a variety of platforms (including macOS, Windows, iOS, Android, and web), we’ve had to think about the right balance between cross-platform consistency (where people can learn to use a tool on one platform, then transfer that knowledge to another) while also adhering to the conventions of each platform. Using a tool like Adobe Lightroom on, say, your work MacBook is different than using it on your personal Android-powered phone — but it still feels like Lightroom.

When Spectrum was first designed, mobile platforms were evolving rapidly and the user experience from app to app varied between operating systems, so we initially leaned into making Spectrum as consistent as we could across platforms. Spectrum 2 will supply specific variants for each, making Adobe tools feel “at home” on the device and platform where you want to use them.

Side-by-side composite of an anonymized product user interface. First, how some Spectrum 2 components may look in a mobile interface. Then, in mixed reality.

Spectrum 2 will follow each platform’s conventions, from mobile (left) to mixed reality (right).

Rethinking icons, colors, illustrations, and shapes

To support the vision of Spectrum 2, our team made changes across multiple underlying components in our design system. This includes rethinking icons to be more clean, friendly, adaptable, playful and familiar.

Side-by-side composite. First, the current Spectrum icons. Next, the new Spectrum 2 icons. Both including arrow, image, lightbulb, smiley face, and a paperclip, among others. The new Spectrum 2 icons have more contrast, thicker strokes, and rounded edges than the current Spectrum icons.

A closer look at icons, before (left) and after (right).

We adjusted our gray system to provide more contrast — and rebuilt our color system to utilize Adobe’s brand colors, laying the foundation for us to more organically integrate our brand into our product experiences. Aligning Spectrum 2’s color system with brand colors makes it easier to harmonize interfaces across products.

A column of six Adobe product logo tiles including Illustrator, SpeedGrade, Photoshop, After Effects, Dreamweaver, and InDesign, each with a row of their related color gradients.

Spectrum 2 includes a rebuilt color system, drawing from Adobe’s brand colors.

Illustrations take many forms in Adobe experiences. They range from simple line work to more robust, full-color editorial styles with colors keyed to the brand color of the product they’re supporting. The Brand Design team developed a new toolkit of geometric shapes that can be combined in infinite ways to create illustrations, banners, and other assets.

The Spectrum 2 user interface of Adobe Lightroom for desktop, with new illustrations previously described, which indicate the actions “There aren’t any comments yet: Start the conversation”, “Drag and drop your video files or select a file from your computer”, and “No files yet. Select a file to get started.”

Adobe’s Brand Design team created an updated illustration system for Spectrum 2.

What to expect with Spectrum 2

You’ll start to see Spectrum 2 roll out across Adobe tools and experiences over the next year, starting with our web products. It's been a journey to bring Spectrum 2 from our original vision to reality, but we're only just getting started — like any design system, Spectrum is ever-changing. We’re currently hard at work developing the future direction of our desktop and mobile products, which will each get their own focused version of Spectrum.

Visit the Spectrum 2 site for a closer look at the system and what’s to come, and get a sneak peek at changes to familiar tools below:

The Spectrum 2 design for the Creative Cloud “Your files” page logged-in view, featuring examples of user folders and files of images from different Creative Cloud apps, including Photoshop and Illustrator.

The Spectrum 2 design for the Creative Cloud “Your files” page has clearer visual hierarchy and a lighter, brighter, more expressive and approachable appearance.

The Spectrum 2 design for Adobe Photoshop on web, showing an in-progress user edit of a photo illustration of hot air balloons over a mythical mountain landscape.

In Adobe Photoshop on web, rounded corners on panels and toolbars are paired with rounder and more playful icons that are still crisp, clean, and readily recognizable. Hints of the brand color help with wayfinding for users who switch between multiple apps.

The Spectrum 2 design for the Adobe Acrobat document editor on web, showing a illustrative example of an open PDF form entitled “Bodea Leasing Inc. Emergency Info”.

The Adobe Acrobat document editor on web has introduced a host of new functionalities over the past several years. The Spectrum 2 visual design provides greater contrast and readability for icons, text, and components (like buttons and text inputs).

The Spectrum 2 design for the Adobe Acrobat home page on web with the user greeting “Hi, Alexander” and prompts to take document actions like “Export a PDF” and “Combine Files”

The Spectrum 2 design for the Adobe Acrobat home page on web provides a flexible and adaptable illustration system across icons, spot illustrations, and banners. It also takes a modular approach to grouping parts of the interface and brings a sense of depth through layered colors and subtle shadows.

The Spectrum 2 design for Adobe Journey Optimizer showing an open project workflow for a user journey.

In the Spectrum 2 design for the Adobe Journey Optimizer, added contrast and simplified navigation bring focus to what’s most important on the page, and make a complex user experience easier to parse.

An abstracted composite of color and black-and-white Spectrum 2 icons, including a cloud, a clipboard, and an open folder.