@adobe/spectrum-design-data 3.3.0-beta.1 → 3.3.0

package/guidelines/grays.json

@@ -5,35 +5,62 @@
   "title": "Grays",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Grays" },
+    {
+      "type": "purpose",
+      "content": "Adding an extra shade in the low range allowed for us to make more incremental steps between background grays.\n\nThis update affects the layering system. The primary, secondary, and tertiary layers now use grays 25-75 instead of grays 50-100.\n\nField borders are currently the only objects that stay gray-300 in the default state."
+    },
+    {
+      "type": "guideline",
+      "content": "Gray-100 was previously the default background color. With Spectrum 2, gray-25 is the new default background color, which makes the UI brighter and have higher contrast than before."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 includes two new grays — gray-25 and gray-1000 — plus an update to the rest of the 11 grays. This means that there are 13 grays total in the system."
+    },
+    {
+      "type": "guideline",
+      "content": "The Spectrum team collected feedback from product teams across Adobe and determined that the 6.0.0 color system for light UI had an issue with the steps between gray-50 and gray-75. The difference between these two was so slight it was almost imperceivable, making it so that gray-75 was not very useful. Also, the grays from -100 to -400 had too much contrast between each step, making it so that each component state appeared too harsh. Gray-900 was solid black, which was too high of a contrast to be used in text components. Reading solid black text on a solid white background is not ideal; it creates optical strain for a significant number of users."
+    },
+    {
+      "type": "guideline",
+      "content": "Adding two new grays also allowed us to keep a solid black (in light UI) and solid white (in dark UI) without having to keep gray-900 so bright. Now gray-1000 can be used for borders with opacities."
+    },
+    {
+      "type": "guideline",
+      "content": "Adding an extra shade in the low range allowed for us to make more incremental steps between background grays."
+    },
+    {
+      "type": "guideline",
+      "content": "With the 6.0.0 gray system, users working in apps that support dark theme felt the colors were too light and muddy. And, users working in apps that support darkest theme felt the UI was too high-contrast, which makes it difficult to view the screen comfortably for long periods of time. The Spectrum 2 update addresses both issues by combining the dark and darkest themes into a new theme, with brightness values that are between the two existing themes."
+    },
+    {
+      "type": "guideline",
+      "content": "This update affects the layering system. The primary, secondary, and tertiary layers now use grays 25-75 instead of grays 50-100."
+    },
+    {
+      "type": "guideline",
+      "content": "There are no current WCAG or W3C guidelines about if every fill and stroke in every component of every state needs to be 3:1 in contrast. Another thing to consider is that it’s irresponsible to approach the topic of contrast with a “one-size-fits-all” approach: every user has different needs, and design should account for user preference and customization. While one user may need interfaces to be higher contrast to be able to more clearly read and interact with the content, others may prefer interfaces to be lower in contrast (for example, people who are prone to getting migraines)."
+    },
     {
       "type": "guideline",
-      "content": "Gray-25, -50, and -75 are reserved for background layers. Gray-100, -200, and -300 are used for lower contrast component background progressions or borders. Gray-800 and -900 are used for higher contrast component backgrounds such as text and active borders. This ensures that components are always visible, regardless of the background color."
+      "content": "Because of this, Spectrum designs all active states of UI components to be at least 3:1 in contrast in some way with the background (such as a text field’s active state border). And, all objects within components, such as icons, drag handles, and text, are also compliant with the 3:1 or 4.5:1 requirement. Other graphical objects also always use at least 3:1 contrast and are accompanied by textual descriptions. Products using Spectrum should be built in such a way that the interface contrast, coloring, sizing, motion, and more can all be adjustable by the user to fit their own specific needs."
     },
     {
       "type": "guideline",
-      "content": "In Spectrum, gray-25 is the default background color, which makes the UI bright and higher contrast."
+      "content": "The Spectrum 2 color update changed gray-900 (which is used by most heading or title text) to slightly lower contrast in both dark and light UI to ensure improved readability for as many users as possible."
     },
     {
       "type": "guideline",
-      "content": "Spectrum utilizes a simplified color theming system with a single dark mode. Spectrum’s dark theme is utilized for both the dark color theme (in light device mode) and for dark device mode."
+      "content": "Color updates are breaking changes, so you’ll need to use the following information to responsibly migrate to Spectrum 2 colors. If this isn’t done correctly, backgrounds and components will appear extra dark."
     },
     {
       "type": "guideline",
-      "content": "Adobe aims to be AA compliant for WCAG guidelines. The latest 2.2 guidelines require that text is at least 4.5:1 in contrast for small text. Spectrum never deviates from this. The World Wide Web Consortium (W3C) also requires active, non-text components to have a minimum of 3:1 in contrast against adjacent colors. Some elements are exempt from this (like disabled items, decorative items, user-set items, or logotypes). This relates to both UI components such as text fields and buttons, and to graphical objects like icons or illustrations. There are no current WCAG or W3C guidelines about if every fill and stroke in every component of every state needs to be 3:1 in contrast. Another thing to consider is that it’s irresponsible to approach the topic of contrast with a “one-size-fits-all” approach: every user has different needs, and design should account for user preference and customization. While one user may need interfaces to be higher contrast to be able to more clearly read and interact with the content, others may prefer interfaces to be lower in contrast (for example, people who are prone to getting migraines). Because of this, Spectrum designs all active states of UI components to be at least 3:1 in contrast in some way with the background (such as a text field’s active state border). And, all objects within components, such as icons, drag handles, and text, are also compliant with the 3:1 or 4.5:1 requirement. Other graphical objects also always use at least 3:1 contrast and are accompanied by textual descriptions. Products using Spectrum should be built in such a way that the interface contrast, coloring, sizing, motion, and more can all be adjustable by the user to fit their own specific needs. View the Inclusive design page for more information about accessibility and inclusivity in the design system."
+      "content": "Field borders are currently the only objects that stay gray-300 in the default state."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/grays",
-  "lastUpdated": "2026-08-07",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/grays/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "gray-system",
-    "neutral-grays",
-    "Gray-25",
-    "Gray-50",
-    "Gray-75",
-    "Gray-100",
-    "Gray-800",
-    "accessibility"
-  ]
+  "tags": ["designing"],
+  "related": [{ "ref": "attention-hierarchy" }, { "ref": "colors" }]
 }

package/guidelines/icon-fundamentals.json

@@ -5,7 +5,10 @@
   "title": "Icon fundamentals",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Icon fundamentals" },
+    {
+      "type": "purpose",
+      "content": "### Icons designed to balance personality with function\n\nSpectrum 2 icons are crisp, modern, and clean. They have more personality in the form of rounder corners and motion, and use more playful but modern metaphors when there's the need to have more brand expression (for example, in feature onboarding, marketing, and Learn content). The updated icon style picks up the clean and irreducible style of Spectrum and supports the efforts to bring a unified experience to all Adobe products.\n\n### What's been updated?\n\nMost noticeably, there's been a switch to an outline style from the previous style of icons as being filled. There's also an updated priority for using meaningful metaphors consistently, focusing on content, and helping users navigate across interfaces. This combines into a cohesive theme: **icons signal familiarity**. In a product portfolio as complex as Adobe's, this familiarity is expressed through a consistent and cohesive usage of UI elements, colors, patterns, and icon metaphors.\n\nThe purpose of the updated icon style isn't just about functionality or the Adobe brand: it's about how many intricate details add up to make a big difference in the user experience. Using icon metaphors consistently makes Adobe's products usable."
+    },
     {
       "type": "guideline",
       "content": "How the Spectrum 2 icon set was developed.\n\nSeveral teams collaborated on the overall Spectrum 2 design language updates. One goal for iconography was to build out the current style into a unified icon language, to more closely align with our multi-platform design approach and to look and feel cohesive with the iOS and Android iconography systems. Previous testing and the launch of the outline icon style for Acrobat Modern Viewer and Adobe Express provided insights that informed style refinements."
@@ -16,19 +19,27 @@
     },
     {
       "type": "guideline",
-      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping. We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes."
+      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping."
+    },
+    {
+      "type": "guideline",
+      "content": "We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes."
+    },
+    {
+      "type": "guideline",
+      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos)."
     },
     {
       "type": "guideline",
-      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos). Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical). Various examples of Spectrum 2 icons.Similarities of icon styles across Spectrum and Adobe Express.How icons have evolved over time."
+      "content": "Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical)."
     },
     {
       "type": "guideline",
-      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are clear, functional, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes. The shapes of the icons themselves are based on predefined key shapes to ensure a balanced look and feel across interfaces. Examples of key shapes."
+      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are **clear**, **functional**, and **additive to experiences**. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes.\n\nThe shapes of the icons themselves are based on predefined **key shapes** to ensure a balanced look and feel across interfaces."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/icon-fundamentals",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/icon-fundamentals/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": ["icons", "outline", "monochrome", "stroke-weight", "iconography"]
+  "tags": ["designing"]
 }

package/guidelines/illustrations.json

@@ -0,0 +1,111 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/illustrations.json",
+  "name": "illustrations",
+  "title": "Illustrations",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Illustrations" },
+    {
+      "type": "guideline",
+      "content": "The illustrations and graphics in Spectrum 2 have been completely reworked to reflect the significant update of our design system."
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences."
+    },
+    {
+      "type": "guideline",
+      "content": "Please note that parts of this illustration system are still in exploration, and will be added to these guidelines once they’re more defined. Animation is also currently being explored."
+    },
+    {
+      "type": "guideline",
+      "content": "Here’s a summary of the main updates that you’ll notice with Spectrum 2 illustrations, compared to the style of Spectrum 1:"
+    },
+    {
+      "type": "guideline",
+      "content": "Linear illustrations are monochromatic. They use the same color token as the icons (S2 / gray 800), and switch colors according to dark and light UI."
+    },
+    {
+      "type": "guideline",
+      "content": "Linear illustrations use the following naming convention:"
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations are new to our design system with the update to Spectrum 2. Compared to linear illustrations, they’re much bolder. They can help users understand a message more quickly, or motivate them to perform a specific action."
+    },
+    {
+      "type": "guideline",
+      "content": "There are two gradients that can be used for surfaces that show different products, or that are not product-specific. The other gradients are tied to specific products or clouds. For example, blue is tied to the photography and digital imaging category (such as Photoshop, Lightroom, and Fresco), while green represents the 3D category (such as Substance 3D Stager and Substance 3D Designer). It’s essential to use the appropriate illustration colors according to the product categories. If the application is for multiple products, use one of the gradient swatches that incorporate the Adobe brand red."
+    },
+    {
+      "type": "guideline",
+      "content": "Do not use the category gradient sets as semantic colors to communicate meanings like errors (red), warnings (yellow), or successes (green)."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations use the following naming convention:"
+    },
+    {
+      "type": "guideline",
+      "content": "Linear illustrations are elements that communicate lower attention, as they blend in well with the rest of the UI. They can be used multiple times in a layout without drawing too much attention."
+    },
+    {
+      "type": "guideline",
+      "content": "Errors or critical messages should only use linear illustrations."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations use colors that can be misunderstood as semantic colors (e.g., green for positive, red for negative). They also have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work."
+    },
+    {
+      "type": "guideline",
+      "content": "The linear illustration style works well for layouts that feature a number of illustrations together (such as a collection of cards). Linear illustrations draw a lower level of attention and blend in well with the UI, so it’s appropriate to use them in a collection of elements. Gradient illustrations draw a lot of attention in multiples, so they need to be used sparingly and sparsely."
+    },
+    {
+      "type": "guideline",
+      "content": "Don’t scale or resize linear illustrations. The stroke weight and the corner radii are already set to work best in the given canvas sizes."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations are high attention elements in the layout. Use them strategically and thoughtfully to draw the user’s attention and to provoke a delightful moment."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations draw more attention because they’re very colorful. Using more then one in a given view will make the UI too busy and too loud. Use gradient illustrations sparingly to guide a user’s attention to engaging, high-value actions such as uploads, starting projects, or commenting."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradient illustrations incorporate product category colors, and also include colors that have semantic meanings in Spectrum: red, orange, or green. It creates inconsistency and confusion to have an error message or a critical alert in green (a color has a positive semantic meaning)."
+    },
+    {
+      "type": "guideline",
+      "content": "Use gradient illustrations when you want to emphasize positive actions. Gradient illustrations have an upbeat and inspirational tone, which isn’t appropriate in situations where a user may be frustrated by something that’s an inconvenience or is disruptive to them in accomplishing their work."
+    },
+    {
+      "type": "guideline",
+      "content": "The colors in gradient illustrations are connected to the product categories. For example, an illustration for a Substance 3D product should use the Substance 3D green colors."
+    },
+    {
+      "type": "guideline",
+      "content": "Do not use different colors than those of your product category. Reach out to the Spectrum Brand team for guidance about the appropriate colors for your use case."
+    },
+    {
+      "type": "guideline",
+      "content": "It’s highly recommended to test gradient illustrations as you’re designing your layout. They’re very expressive and colorful, so it’s important to determine how they complement (or don’t) different communication points (e.g., user-generated content, onboarding, feature banners, upsells, and more)."
+    },
+    {
+      "type": "guideline",
+      "content": "If gradient illustrations are making the layout too noisy, use linear illustrations instead."
+    },
+    {
+      "type": "guideline",
+      "content": "Thematic banners are descriptive and represent a specific topic or feature. Similar to the gradient illustrations, they’re either connected to the product brand categories by color, or they use the generic gradient swatches."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/illustrations/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "using-icons" }, { "ref": "motion" }]
+}

package/guidelines/introduction.json

@@ -23,8 +23,8 @@
       "content": "Spectrum is Adobe's design system. It belongs to all of us, and is shaped according to our customers' needs. We'd like to thank everyone who participated in shaping and testing Spectrum 2 for their hard and thoughtful work."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/getting-started/introduction",
-  "lastUpdated": "2026-09-17",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/introduction/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
   "tags": ["fundamentals"],
   "related": [{ "ref": "home" }, { "ref": "principles" }]