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

package/guidelines/motion.json

@@ -7,36 +7,35 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Spectrum 2 builds on top of the Spectrum 1 motion guidelines for the design system: that motion is always purposeful, intuitive, and seamless. With this update, we also use motion to draw attention to areas where we want to add personality. No matter what, the usage of motion should be adding meaning to an experience. And, motion over large surface areas needs to support browser and system settings for reduced motion. Motion is also an important part of brand expression. Just like tone in language, tone in motion can range from formal and direct to lighthearted and subtle. Motion in Spectrum 2 is categorized into the areas of directional motion, interaction motion, and wayfinding motion. Wayfinding motion is still in development."
+      "content": "Spectrum 2 builds on top of the [existing motion guidelines for the design system](https://spectrum.corp.adobe.com/page/motion/): that motion is always purposeful, intuitive, and seamless. With this update, we also use motion to draw attention to areas where we want to add personality. No matter what, the usage of motion should be adding meaning to an experience. And, motion over large surface areas needs to support browser and system settings for reduced motion.\n\nMotion is also an important part of brand expression. Just like tone in language, tone in motion can range from formal and direct to lighthearted and subtle.\n\nMotion in Spectrum 2 is categorized into the areas of **directional** motion, **interaction** motion, and **wayfinding** motion. Wayfinding motion is still in development."
     },
     {
       "type": "guideline",
-      "content": "Linear motion indicates forward movement and a sentiment of progress. When emphasizing movement to a different section, page, or item (such as a button or link), the destination is readily clear and minimally disruptive. If you’re creating a custom animation, consider RTL (right-to-left) languages and also how the meaning of motion might differ depending on cultural context. Progress bars communicate forward progression. They work well to show determinate (finite) progress.Image: A labeled progress bar reading \"Progress bar label,\" approximately 60% filled in blue with the remaining portion shown in gray. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1410ad434da4df2e5f27e65cb39cf6e9dd762b988.png?width=750&format=png&optimize=medium)Image: A labeled progress bar reading \"Progress bar label,\" fully filled in blue from end to end, indicating 100% completion. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1976d0b4d46d779f561e43f584769fcdb1ee46257.png?width=750&format=png&optimize=medium)In this example of a button, a static arrow icon facing toward the right already indicates forward movement. When linear motion is added to the arrow upon hover, the movement is emphasized. Use this button option with motion sparingly, only on the most important action(s) on a page.Image: A black pill-shaped 'Next' button with a right arrow icon, shown with a cursor positioned just below it, before hover. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_13c1db2becccdae3e3c51faee90f9f0f7223a79ee.png?width=750&format=png&optimize=medium)Image: The same black 'Next' button, now with the cursor positioned directly on top of it in a hover or click state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_13780e91120d63ef14c91f7ca97c5e88d49481814.png?width=750&format=png&optimize=medium)"
+      "content": "Linear motion indicates forward movement and a sentiment of progress. When emphasizing movement to a different section, page, or item (such as a button or link), the destination is readily clear and minimally disruptive.\n\nIf you're creating a custom animation, consider [RTL (right-to-left) languages](https://spectrum.corp.adobe.com/page/bi-directionality/) and also how the meaning of motion might differ depending on cultural context.\n\nProgress bars communicate forward progression. They work well to show determinate (finite) progress.\n\nIn the example of a button, a static arrow icon facing toward the right already indicates forward movement. When linear motion is added to the arrow upon hover, the movement is emphasized. Use this button option with motion sparingly, only on the most important action(s) on a page."
     },
     {
       "type": "guideline",
-      "content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there’s a switch in context happening, like linking out to a different view or destination. In this example of a link, a static arrow icon facing the top right already indicates a potentially disruptive action. When diagonal motion is added to the arrow on hover, the meaning of the arrow is emphasized. Use this link option with motion sparingly, and only to communicate that there will be a switch in context.Image: Text reading 'For more information, visit the Adobe Help Center' with the link underlined in blue and a diagonal external-link arrow, cursor positioned below the link, before hover. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_16efc4fe0b70604bccaff2a9935bfcd487b64a73e.png?width=750&format=png&optimize=medium)Image: The same 'Adobe Help Center' link, now with the cursor positioned directly on the link text in a hover state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1824800b0d2b9ce2e5980fe39e3d526807ab0b7a5.png?width=750&format=png&optimize=medium)"
+      "content": "Diagonal motion indicates larger movement, and can be potentially disruptive. This type of motion can be used to emphasize that there's a switch in context happening, like linking out to a different view or destination.\n\nIn the example of a link, a static arrow icon facing the top right already indicates a potentially disruptive action. When diagonal motion is added to the arrow on hover, the meaning of the arrow is emphasized. Use this link option with motion sparingly, and only to communicate that there will be a switch in context."
     },
     {
       "type": "guideline",
-      "content": "Clockwise motion indicates a holding pattern that’s repetitive and doesn’t have clear forward momentum or progress. This is most often used for loading indicators. Progress circles have clockwise motion and work well to show indeterminate (infinite) progress.Image: A circular progress indicator on a light gray background, showing roughly 20% complete in blue against a gray track. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1113e169705ecbd524e5b138be65b9a4e595aaf6f.png?width=750&format=png&optimize=medium)Image: A circular progress indicator on a light gray background, showing roughly 85% complete in blue against a gray track. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1aa94bf6842145f9e11edf213d92ede35aeab5324.png?width=750&format=png&optimize=medium)"
+      "content": "Clockwise motion indicates a holding pattern that's repetitive and doesn't have clear forward momentum or progress. This is most often used for loading indicators.\n\nProgress circles have clockwise motion and work well to show indeterminate (infinite) progress."
     },
     {
       "type": "guideline",
-      "content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It’s not the only way to show feedback, but it helps objects to feel more dynamic and responsive. It also can help communicate meaning, or add emphasis that something is happening that requires attention. A microinteraction is a single action (like a click, tap, or swipe) which triggers a response (like a transition or animation). In Spectrum 2, microinteractions offer moments of personality that are reflective of product branding. In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened. Image: A black pill-shaped button labeled 'Button,' with a cursor positioned below it, before interaction. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1912db9847e2a13fa026399336088aadc29ab9886.png?width=750&format=png&optimize=medium)Image: The same 'Button' element, slightly larger and darker with a pointer/hand cursor overlapping its bottom edge, indicating a pressed or clicked state. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_16bedff0632adae2a74753d9064814716b15c1265.png?width=750&format=png&optimize=medium)"
+      "content": "Motion shows users feedback that, when interacting with the UI, their actions are registering with a system. It's not the only way to show feedback, but it helps objects to feel more dynamic and responsive. It also can help communicate meaning, or add emphasis that something is happening that requires attention."
+    },
+    {
+      "type": "guideline",
+      "content": "A [microinteraction](https://www.nngroup.com/articles/microinteractions/) is a single action (like a click, tap, or swipe) which triggers a response (like a transition or animation). In Spectrum 2, microinteractions offer moments of personality that are reflective of product branding."
+    },
+    {
+      "type": "guideline",
+      "content": "In this example, the button scales down on the down state, emphasizing that something — the action of selecting — happened."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/motion",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/motion/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Motion",
-    "Directional motion",
-    "Linear motion",
-    "Diagonal motion",
-    "Clockwise motion",
-    "Interaction motion",
-    "Wayfinding motion",
-    "Microinteractions"
-  ]
+  "tags": ["designing"]
 }

package/guidelines/principles.json

@@ -8,22 +8,23 @@
     { "type": "purpose", "content": "Principles" },
     {
       "type": "guideline",
-      "content": "Spectrum is based on real-world situations. Every component, pattern, and principle is informed by thoughtful consideration of environments, applications, and range of needs that Adobe products serve. Spectrum is not a rigid set of rules for how to build products, but rather a set of adaptable resources for making experiences feel contextual, cohesive, and performant."
+      "content": "Rational.\n\nSpectrum is based on real-world situations. Every component, pattern, and principle is informed by thoughtful testing. Every decision is backed by thorough interdisciplinary research.\n\nSpectrum is not a rigid set of rules for how to build products, but rather a set of adaptable resources for making experiences feel contextual, cohesive, and performant."
     },
     {
       "type": "guideline",
-      "content": "Spectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect. Spectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy. Image: Aperture/lens icon representing the Focused principle (source: https://preview.spectrum.adobe.com/getting-started/media_1d733c7a6b8739373a7b68306edb74b7c2ffe34b4.png?width=750&format=png&optimize=medium)Image: Two overlapping speech bubbles representing the Collaborative principle (source: https://preview.spectrum.adobe.com/getting-started/media_1289706018f1e7799026af8a56beeec33c163c2ee.png?width=750&format=png&optimize=medium)"
+      "content": "Human.\n\nSpectrum places people's needs first. It's deeply committed to a high standard of inclusivity, accessibility, honesty, and respect.\n\nSpectrum is adaptable to meet as many user expectations, platform requirements, and product visions as possible. It's always what it needs to be, accommodating a flexible range of expression. It balances the human needs of utility and joy."
     },
     {
       "type": "guideline",
-      "content": "Spectrum delivers what's needed, when it's needed. Every decoration is purposeful and meaningful. Every communication touchpoint is relevant. Spectrum experiences are built to a high standard of quality. Everything incorporates attention to details, and that creates experiences that look and feel well-crafted. Things are delightful to use because they balance functionality and expression."
+      "content": "Focused.\n\nSpectrum delivers what's needed, when it's needed. Every decoration is purposeful and meaningful. Every communication touchpoint is relevant.\n\nSpectrum experiences are built to a high standard of quality. Everything incorporates attention to details, and that creates experiences that look and feel well-crafted. Things are delightful to use because they balance functionality and expression."
     },
     {
       "type": "guideline",
-      "content": "Spectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively. Spectrum examines from multiple angles, then refines, then repeats. Constantly."
+      "content": "Collaborative.\n\nSpectrum belongs to everyone. It's a reflection of an ever-growing community that makes decisions thoughtfully, holistically, and collectively.\n\nSpectrum examines from multiple angles, then refines, then repeats. Constantly."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/getting-started/principles",
-  "lastUpdated": "2026-09-10",
-  "status": "published"
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/principles/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["fundamentals"]
 }

package/guidelines/resources.json

@@ -8,58 +8,52 @@
     { "type": "purpose", "content": "Resources" },
     {
       "type": "guideline",
-      "content": "Figma libraries.\n\nThe Spectrum 2 Figma libraries are the primary resource for Spectrum 2 components, styles, and variables. These libraries are stable, so you can use the designs in production. We’re continuing to work on exciting improvements as we expand Spectrum 2. Make sure to regularly review design documentation to keep up-to-date with releases. Familiarize yourself with the changes to components, patterns, styles, variables, and usage guidelines. And most importantly, read the release notes (posted in #spectrum-bulletin ). For any questions, view the FAQs or contact us. To provide feedback on the Spectrum 2 Figma libraries, please visit the #spectrum-design Slack channel and fill out the embedded Slack form. Your input is important and helps us prioritize updates accordingly. Assets, such as icons and illustrations, are published in separate libraries. Reach out to the Icons team to request product-specific icons that are not currently included in a library by submitting a request. For questions specific to the Spectrum 2 Figma icon libraries, post in #figma-icons-libraries on Slack. For general questions about icons, post in #icons. An example of the Spectrum 2 library: the action button page."
+      "content": "The Spectrum 2 Figma libraries are the primary resource for Spectrum 2 components, styles, and variables. These libraries are stable, so you can use the designs in production."
     },
     {
       "type": "guideline",
-      "content": "Access the Spectrum 2 web libraries:.\n\nS2 / Web with Variables: Formerly known as S2 / Variables, this library is now a single stop for all Spectrum 2 web design data and components, including typography styles, tokens, variables, and up-to-date component statuses S2 / Web (Deprecated): Formerly known as S2 / Web (Desktop scale), contained Spectrum 2 components and typography styles. This library will no longer receive updates but will remain available to use until further notice. S2/Icons, Global: Contains a set of commonly used Spectrum 2 icons S2/Illustrations: Contains a set of Spectrum 2 linear and gradient illustrations"
+      "content": "An example of the Spectrum 2 library: the action button page."
     },
     {
       "type": "guideline",
-      "content": "Access the Spectrum 2 iOS library:.\n\nS2/iOS: Contains Spectrum 2 components, typography styles, and variables for iOS If you don’t have access to Figma, you may be able to request view-only access through your product’s design team. Learn more at the Adobe Design Figma Usage: Guidelines and Resources wiki."
+      "content": "This GitHub repository houses Spectrum’s design tokens, which are primarily name-value pairs used to store design decisions and distributed in a way that platforms, implementations, and products can use across design tools and coding languages."
     },
     {
       "type": "guideline",
-      "content": "Spectrum Tokens repository.\n\nThis GitHub repository houses Spectrum’s design tokens, which are primarily name-value pairs used to store design decisions and distributed in a way that platforms, implementations, and products can use across design tools and coding languages. View Spectrum Tokens on GitHub"
+      "content": "This tool allows you to search for token names or values, filter values by scale and theme, and explore the relationship between Spectrum’s tokens by selecting tokens to see their connections."
     },
     {
       "type": "guideline",
-      "content": "Spectrum Token Visualizer tool.\n\nThis tool allows you to search for token names or values, filter values by scale and theme, and explore the relationship between Spectrum’s tokens by selecting tokens to see their connections. View the Spectrum 2 Token Visualizer"
+      "content": "To support this transition, S2/Color has been removed from the inheritance chain in the Figma libraries. Designers should update their files to replace color styles with color variables. Following the steps in the guide will help ensure your files remain stable and aligned with the Spectrum system moving forward."
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web Components 1.0 uses an approach to Spectrum 2 that applies the design system’s new colors, corner radii, and icons to its components without introducing breaking changes. For more detailed information about this approach, read the initial announcement on the Spectrum wiki. When Spectrum Web Components 2.0 releases, it will include the full Spectrum 2 implementation of its components. The team is currently defining the product strategy, and major announcements about its availability and timeline will be released through Slack channels ( #swc-announcements and #spectrum-web-components ), the Spectrum 2 Wiki, and e-mails to members of the DL GRP-SWC-OFFICEHOURS. Access to this DL is self-serve through Adobe’s IMS portal. View the Spectrum Web Components documentation site"
+      "content": "These changes are for Spectrum 2 libraries. They do not apply to Spectrum 1."
     },
     {
       "type": "guideline",
-      "content": "React Spectrum’s implementation of Spectrum 2 is available for use through the npm package @react-spectrum/s2, and automated migration assistance from React Spectrum V3 to Spectrum 2 is available through the migration wizard. Check the Spectrum 2 in React Spectrum page for more information, including which components are available and how to get started. Releases are announced in the #react-spectrum and #rsp-announcements Slack channels, and developers using the Spectrum 2 library can also request access to a dedicated support channel. View the React Spectrum documentation website"
+      "content": "To support the new font, we’ve updated our default line-height values and introduced symmetrical vertical padding token values to our design system. The Spectrum 2 typography guide includes details about what’s changing, what’s staying the same, and options for updating design files or implementations."
     },
     {
       "type": "guideline",
-      "content": "Spectrum iOS recently released an initial set of components and foundations in its 1.0 release. More information, including the projected components for future releases, are documented on the iOS project’s wiki. Announcements about releases are made in the #spios-announcements and #spectrum-ios Slack channels. For instructions on how to integrate Spectrum iOS into your project, please visit the following wiki page. View spectrum-ios on GitHub View documentation for spectrum-ios View documentation for spectrum-tokens-ios Sign up for access to the Catalog App on TestFlight to try Spectrum iOS on device."
+      "content": "These changes are for Spectrum 2 libraries and implementations. They do not apply to Spectrum 1 components."
     },
     {
       "type": "guideline",
-      "content": "Color variables migration guide.\n\nSpectrum 2 Figma libraries are officially moving from color styles to color variables. Now that Figma variables are fully supported, color styles are being phased out in favor of directly linked variables, from the S2/Variables library. This is now a public library, enabling everyone to connect directly to Spectrum’s source of truth. To support this transition, S2/Color has been removed from the inheritance chain in the Figma libraries. Designers should update their files to replace color styles with color variables. Following the steps in the guide will help ensure your files remain stable and aligned with the Spectrum system moving forward. These changes are for Spectrum 2 libraries. They do not apply to Spectrum 1. View the Spectrum 2 color variables migration guide"
+      "content": "Spectrum 2 includes two new grays — gray-25 and gray-1000 — plus an update to the rest of the 11 grays. The migration guide goes into more detail about what’s changing and what’s staying the same."
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Spectrum VF typography guide.\n\nSpectrum 2 uses a new default font, Adobe Clean Spectrum VF. Aesthetically, this font is the same glyphs as Adobe Clean, but it has an adjusted baseline to sit vertically centered in UI. It also includes modern variable technology for width and weight axes. To support the new font, we’ve updated our default line-height values and introduced symmetrical vertical padding token values to our design system. The Spectrum 2 typography guide includes details about what’s changing, what’s staying the same, and options for updating design files or implementations. These changes are for Spectrum 2 libraries and implementations. They do not apply to Spectrum 1 components. View the Spectrum 2 typography guide"
+      "content": "Creating interfaces that support right-to-left (RTL) and bi-directional (Bidi) languages is essential to ensuring that our products are inclusive of global audiences. These guides, created by the Adobe International team, offer comprehensive frameworks on how to design and build for both web and mobile components."
     },
     {
       "type": "guideline",
-      "content": "Right-to-left mirroring and bi-directional language formatting guides.\n\nCreating interfaces that support right-to-left (RTL) and bi-directional (Bidi) languages is essential to ensuring that our products are inclusive of global audiences. These guides, created by the Adobe International team, offer comprehensive frameworks on how to design and build for both web and mobile components. View the RTL and Bidi formatting guide View the Mirroring for RTL languages framework"
+      "content": "The Adobe Design Brand team has created Spectrum 2-inspired desktop and mobile backgrounds for you to download."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/resources",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/resources/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Figma libraries",
-    "Design tokens",
-    "Spectrum Web Components",
-    "implementation",
-    "guides",
-    "resources"
-  ]
+  "tags": ["support"],
+  "related": [{ "ref": "contact" }]
 }

package/guidelines/states.json

@@ -8,32 +8,27 @@
     { "type": "purpose", "content": "States" },
     {
       "type": "guideline",
-      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive. Image: Disabled UI components shown in muted gray, including a circular avatar photo, a labeled button, a toggle switch with label, and a checkbox with label. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1044bea29bf18bd21503482c8c8fafb0102e36a22.png?width=750&format=png&optimize=medium)"
+      "content": "In Spectrum 2, some components use a change in size instead of color to communicate a down state. This gives the illusion of objects being pressed-in, and makes interactions more dynamic and responsive."
     },
     {
       "type": "guideline",
-      "content": "Disabled states generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state. Image: Two checkboxes with 'Label' text: the top one unchecked, the bottom one checked with a black background and white checkmark. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_1517894bfa23af029ad8122c0add356281be4bc2e.png?width=750&format=png&optimize=medium)"
+      "content": "[Disabled states](https://spectrum.corp.adobe.com/page/states/#Disabled) generally stay the same from Spectrum 1, but there have been some minor updates to specific components. For example, a text field retains the outline style when disabled, to more closely match its default state."
     },
     {
       "type": "guideline",
-      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there’s a single, clear call to action within a page (for example, a “Create” button). When there’s many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view Attention hierarchy. Image: A list view row being dragged, indicated by a grabbing-hand cursor above it, containing a checked checkbox, a circular avatar placeholder, truncated title text 'List view value with a longer la...', description text, two circular icons, and a chevron. (source: https://preview.spectrum.adobe.com/foundations/behavior/media_133f5d48851a7df5c96e90ea3d60494813467c2bb.png?width=750&format=png&optimize=medium)"
+      "content": "Selected states use a primary style by default, generally through a gray-800 fill. Some have an accent color option that can be used to draw emphasis. This is primarily helpful in contexts with a specific and narrowly-scoped goal (for example, in a dialog), or when there's a single, clear call to action within a page (for example, a \"Create\" button)."
     },
     {
       "type": "guideline",
-      "content": "A dragged state has a unique drop shadow to draw attention to the dragged object. Learn more about drop shadows."
+      "content": "When there's many groups of controls that require the same amount of attention (such as in a panel) the not emphasized option works best. For more details about this concept, view [Attention hierarchy](https://s2.spectrum.corp.adobe.com/page/attention-hierarchy/)."
+    },
+    {
+      "type": "guideline",
+      "content": "A dragged state has a unique drop shadow to draw attention to the dragged object. Learn more about [drop shadows](https://s2.spectrum.corp.adobe.com/page/object-styles/#drop-shadow)."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/behavior/states",
-  "lastUpdated": "2026-08-13",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/states/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "states",
-    "hover",
-    "down",
-    "keyboard focus",
-    "disabled",
-    "selected",
-    "dragged",
-    "drop shadow"
-  ]
+  "tags": ["designing"]
 }

package/guidelines/using-icons.json

@@ -8,89 +8,100 @@
     { "type": "purpose", "content": "Using icons" },
     {
       "type": "guideline",
-      "content": "Only use approved icons.\n\nThe library currently only includes a subset of icons, and are for mock-up purposes only. If you need to create a mock-up with an icon that isn't available yet, just use a placeholder icon. Don't use unapproved icons in your work (for example, downloaded from Noun Project, or icons you've created yourself). If you have a question about icons, or would like to reach out to the Icons team directly, email icons@adobe.com or post in #icons on Slack."
+      "content": "Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They maintain a consistent size and style within each platform to ensure visual harmony and usability. While consistency is key, it is now fairly common to combine different icon scales to support hierarchy and context."
     },
     {
       "type": "guideline",
-      "content": "Workflow icons are graphical metaphors or symbols that users interact with to navigate and manipulate objects. They maintain a consistent size and style within each platform to ensure visual harmony and usability. While consistency is key, it is now fairly common to combine different icon scales to support hierarchy and context. Image: Various examples of workflow icons, such as file folder, favorite, and layer. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1d10bae814bb05da7b7b46367d624302ed39a31c2.png?width=750&format=png&optimize=medium)"
+      "content": "UI icons are atomic pieces — like arrows, crosses, or chevrons — that are part of a component. They aren’t metaphorical per se, but they’re an indication of how users interact with a component (for example, what happens when you click on a disclosure chevron or drag handle in a panel). Unlike workflow icons, UI icons come in assorted sizes."
     },
     {
       "type": "guideline",
-      "content": "UI icons are atomic pieces — like arrows, crosses, or chevrons — that are part of a component. They aren't metaphorical per se, but they're an indication of how users interact with a component (for example, what happens when you click on a disclosure chevron or drag handle in a panel). Unlike workflow icons, UI icons come in assorted sizes. Image: Various examples of UI icons, including asterisks, hold affordances, and checkmarks. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1b6478b096dd00f683f63c4dd0767a4b9b0f7e935.png?width=750&format=png&optimize=medium)"
+      "content": "Status badges are indicators that communicate a variety of statuses or states, such as presence, validity, completeness, and more. Premium badges indicate that a feature is only available to paying customers."
     },
     {
       "type": "guideline",
-      "content": "Badges (status and premium).\n\nStatus badges are indicators that communicate a variety of statuses or states, such as presence, validity, completeness, and more. Premium badges indicate that a feature is only available to paying customers. Image: Six cloud icons representing status badges: syncing, analytics, error, paused, warning, and connectivity, arranged in two rows. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a20308f3eaefeef8577fd927826d4cf6a2321863.png?width=750&format=png&optimize=medium)Image: Icons and buttons showcasing premium features, including a crown, image badge, and gradient (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_12493a804fe436690ad8ca706ad634857ab86168b.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum 2 workflow icons come in two sizes per platform, but with one stroke weight: 1.5 px."
     },
     {
       "type": "guideline",
-      "content": "Cursors and HUD.\n\nThe cursor style has also been updated to match the look and feel of the Spectrum 2 icons. Image: A grid of 8 cursor icons on a gray background, including arrow, move, rotate, selection, eyedropper, pen tool, and hand pointer. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14099da83300498315179665ee440523696123b68.png?width=750&format=png&optimize=medium)Image: Examples of HUD icons in an on-canvas experience, using an outlined style, such as a expand arrow set and a share action. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1fd0a2a267d8bd6d9dc6f20245d5303842cac457b.png?width=750&format=png&optimize=medium)"
+      "content": "The primary size for Desktop/Web is a canvas of 20 px with the icon being \\~18 px. There’s a secondary size for UI areas — like a layers panel, lists, or cards — which require smaller versions and come in a 16 px canvas with the icon being \\~14 px."
     },
     {
       "type": "guideline",
-      "content": "Workflow icon sizes.\n\nSpectrum 2 workflow icons come in two sizes per platform, but with one stroke weight: 1.5 px. The primary size for Desktop/Web is a canvas of 20 px with the icon being ~18 px. There's a secondary size for UI areas — like a layers panel, lists, or cards — which require smaller versions and come in a 16 px canvas with the icon being ~14 px. The equivalent for Mobile is the primary size of the canvas at 24 px with the icon being ~22 px. The secondary size canvas is 20 px with the icon being ~18px. Image: Desktop/Web UI sizing guide showing icon sizes (14px, 18px) and canvas sizes (16px, 20px) in 4px increments with labels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_15cc60a02f640367d13c152a58cef1ff79a0cff95.png?width=750&format=png&optimize=medium)Image: Mobile UI size guide showing icon sizes (18px, 22px) and canvas sizes (20px, 24px) with increments of 4px, labeled secondary and primary. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14ed11f913ff30997742935d9d2a54dffdc4a4f84.png?width=750&format=png&optimize=medium)"
+      "content": "The equivalent for Mobile is the primary size of the canvas at 24 px with the icon being \\~22 px. The secondary size canvas is 20 px with the icon being \\~18px."
     },
     {
       "type": "guideline",
-      "content": "T-shirt sizes.\n\nIn Spectrum components, workflow icons scale up or down slightly when they're used. For example: a 20 px icon in a medium-sized component will be slightly larger in a large-sized component, and smaller in a small-sized component. UI icons come in their respective size range, since Spectrum components treat these differently."
+      "content": "In Spectrum components, workflow icons scale up or down slightly when they’re used. For example: a 20 px icon in a medium-sized component will be slightly larger in a large-sized component, and smaller in a small-sized component. UI icons come in their respective size range, since Spectrum components treat these differently."
     },
     {
       "type": "guideline",
-      "content": "S2\" is the prefix for Spectrum 2 icons. Here's a breakdown of each part of the icon naming convention: Prefix identifies it as part of a larger group of assets. Type is the type of the asset: Icon, Ani-Icon, Ani-Illu, Illu, Cur, or Mock-Icon. Icon name is in Pascal case: there are no empty spaces or individual characters allowed. When names use multiple words, it utilizes a hierarchy to determine the word sequence. Icon canvas size is stated in pixel at @1x. Icon State indicator: normal state is \"_N\", selected state is \"_S\", and Dark UI theme adds a \"D\". Filetype suffix indicates the asset format, like SVG or PDF. Image: Key example of a naming convention for a Spectrum 2 icon, with parts differentiated by underscores in between. Prefix, S2. Type, Icon. Icon name in pascal case, TextAlignLeft. Size or hotspot, 20. State, N and UI theme, D. Period. File type suffix, SVG. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_17128a0efb9b1a8ebf9b7108b35d24fbf441a7864.png?width=750&format=png&optimize=medium)An example of the naming convention for Spectrum 2 (S2) icons."
+      "content": "“S2” is the prefix for Spectrum 2 icons."
     },
     {
       "type": "guideline",
-      "content": "Stroke border (weight).\n\nKeeping one stroke weight consistent within a size range helps to balance out and contrast the visual weight. For Web and Desktop platforms, icons are designed at a 20 px canvas as default with a 1.5 px stroke, resulting in a 1.64 px stroke when sized up to 24 px for mobile. This helps keep a unified look, and it builds icons efficiently since it's not necessary to redraw them for each platform. Image: Examples showing icon border width and in context of components. A Web or Desktop Edit icon has a size of 20 pixels and stroke width of 1.5 pixels, shown in selected and quiet variants of a button with icon, label Edit. A Mobile icon has a size of 24 pixels and a stroke width of 1.64 pixels, scaled, shown in selected and quiet variants of a button with icon, label Edit. The mobile buttons appear larger in size compared to the Web or Desktop buttons. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_14e9eaa9cdcd6e1c866e064a2bb5b7a32e2dd8687.png?width=750&format=png&optimize=medium)"
+      "content": "Here’s a breakdown of each part of the icon naming convention:"
     },
     {
       "type": "guideline",
-      "content": "Corner radius and shape rounding.\n\nAll icons with angles get a 1.5 px rounding treatment to achieve a rounder appearance. Inner corners are slightly rounded, and all stroke ends have rounded end caps. By default, the corner radius can be decreased in case a metaphor requires pointy edges. Image: Diagram showing an example of corner radius and shape rounding. A 20 pixel icon canvas shows an Add icon. The corner radius of the icon is 1.5 pixels, includes rounded end caps, and has a stroke weight of 1.5 pixels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_165556abe4570a4bdc841a3fb4dbc423215dcd3a5.png?width=750&format=png&optimize=medium)"
+      "content": "An example of the naming convention for Spectrum 2 (S2) icons."
     },
     {
       "type": "guideline",
-      "content": "Icon and badges placement.\n\nIcon designs include a safe area to ensure there's flexibility for finding the best positioning and balance in a layout. The main shape should be centered, and modifier placement is primarily at the bottom right corner of the canvas. Notification dots appear at the top right corner (these are mostly added programmatically). Image: Diagram showing how a badge and a modifier are placed together to create an Add People icon. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1d8b4fe0df6c9521ff637bd168e5eeae521ab32b9.png?width=750&format=png&optimize=medium)The intersections of badge/modifier placement. Image: Diagram showing icon safe area. On Desktop, an icon has a 32 pixel canvas. 20 pixels are the icon, with a 4 pixel rounding area. Within the 20 pixels, there's an additional 1 pixel of space as a safe area. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1f0ca21a964236194ffecb0681771b8464d42fe45.png?width=750&format=png&optimize=medium)Image: Diagram showing icon safe area. On Mobile, an icon has a 40 pixel canvas. 24 pixels are the icon, with a 5 pixel rounding area. Within the 24 pixels, there's an additional 1 pixel of space as a safe area. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1f4f1e381dc39f98e43f0c58ba6f4119628f0ad9b.png?width=750&format=png&optimize=medium)"
+      "content": "Keeping one stroke weight consistent within a size range helps to balance out and contrast the visual weight. For Web and Desktop platforms, icons are designed at a 20 px canvas as default with a 1.5 px stroke, resulting in a 1.64 px stroke when sized up to 24 px for mobile. This helps keep a unified look, and it builds icons efficiently since it’s not necessary to redraw them for each platform."
     },
     {
       "type": "guideline",
-      "content": "The vertical spacing between icons and text is adjusted to create balance. For example: in a medium-sized component, shifting the text box 1 px up and the icon box 1 px down inside a button better balances out the appearance and refines the relationship with text in Adobe Clean Medium. Image: Chart showing an example of how text and icons align. An icon is paired with a label, Overview. Total height, 32 pixels. Cap height, 11 pixels. Baseline, 12 pixels. Text box, 15 pixels. Icon frame, 20 pixels. Padding, between 6 and 9 pixels. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a1a05325502e3450a70939a2b073c2f2bf969695.png?width=750&format=png&optimize=medium)An example of icon and text alignment in a button. Image: Chart showing the alignment of quiet action buttons to avatar, and a label in Adobe Clean typeface, regular, size 14. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1703513907a96277954c3e03e0aac8f872b8bf967.png?width=750&format=png&optimize=medium)An example of a quiet action button with a 16 px icon."
+      "content": "All icons with angles get a 1.5 px rounding treatment to achieve a rounder appearance. Inner corners are slightly rounded, and all stroke ends have rounded end caps. By default, the corner radius can be decreased in case a metaphor requires pointy edges."
     },
     {
       "type": "guideline",
-      "content": "Advantages to the new SVG structure.\n\nOne SVG asset serves all states in all UI color themes Stable and easy creation and export workflows in Illustrator Streamlined SVG code for smaller file size Minimal effort to update any Spectrum color changes Allows for app-specific custom colors (a variable illustration accent color could be matched to the app color) Will become easier to add special colors for an app (for example, the brand red color used in Acrobat) Image: SVG code snippet with a clock icon and red exclamation mark, highlighting fill attributes for primary and red colors. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_11b0ae0f147f1a58206f16e4c4b4e662424b3d549.png?width=750&format=png&optimize=medium)Example of SVG code. The highlighted sections show that two dynamic colors will be changed programmatically, and that there's a white exclamation mark which should always be displayed in white."
+      "content": "Icon designs include a safe area to ensure there’s flexibility for finding the best positioning and balance in a layout. The main shape should be centered, and modifier placement is primarily at the bottom right corner of the canvas. Notification dots appear at the top right corner (these are mostly added programmatically)."
     },
     {
-      "type": "do-dont",
-      "content": "Don't resize icons",
-      "dont": "All icons are crafted with a specific stroke weight, size, and canvas to match a larger icon set. Resizing or scaling them can change the appearance, creating inconsistency within a product. Ask for more sizes by submitting a request to the Icons team."
+      "type": "guideline",
+      "content": "The intersections of badge/modifier placement."
     },
     {
-      "type": "do-dont",
-      "content": "Don't create your own icons",
-      "dont": "The Icons team works carefully to ensure that icon metaphors and style are consistent across Adobe products. When different product teams each decide to choose their own metaphors or build their own icons, this becomes a complex issue in Adobe's large product portfolio — and it shows our customers that we don't speak with a single brand voice. If you need a new icon for Spectrum 2, request it."
+      "type": "guideline",
+      "content": "The vertical spacing between icons and text is adjusted to create balance."
+    },
+    {
+      "type": "guideline",
+      "content": "For example: in a medium-sized component, shifting the text box 1 px up and the icon box 1 px down inside a button better balances out the appearance and refines the relationship with text in Adobe Clean Medium."
+    },
+    {
+      "type": "guideline",
+      "content": "An example of icon and text alignment in a button."
+    },
+    {
+      "type": "guideline",
+      "content": "An example of a quiet action button with a 16 px icon."
+    },
+    {
+      "type": "guideline",
+      "content": "The new SVG native format for icons allows for automatic tinting to match different states (hover, selected, etc.) and can programmatically switch depending on UI brightness or color theme. It’s not about tinting the whole SVG in one color, but tinting single elements inside the SVG. To do this, the new SVGs use named CSS variables to set color values for every element. There will be Spectrum tokens for this, so automatic tinting will work out-of-the-box in any product using Spectrum CSS."
+    },
+    {
+      "type": "guideline",
+      "content": "For other apps, it will be easier to add the needed color information to their own CSS. Transparencies will be used to achieve tints of the primary icon color, making it easy to use at least the gray tone when it’s not possible to work with CSS variables."
     },
     {
       "type": "guideline",
-      "content": "Semantic colors have specific meanings in the design system. Choose icons with metaphors that visually align with their corresponding semantic color. Ensure that any semantic color usage in icons is consistent with Spectrum's usage. If you're using icons to convey \"Success,\" \"Alert,\" \"Information,\" or \"Caution\" meanings (such as in an in-line alert ), use the appropriate colors. Image: Four status icons: green check, red warning triangle, blue info circle, orange caution diamond, each in colored square backgrounds. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1df99d2addc81b14078615e2c1ad60ecffc841fba.png?width=750&format=png&optimize=medium)Image: Four status icons: red checkmark, yellow warning triangle, green X, and gray exclamation mark, each in colored square backgrounds. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1836e417f2317442706e2227601a3001effe7d2b5.png?width=750&format=png&optimize=medium)"
+      "content": "Example of SVG code. The highlighted sections show that two dynamic colors will be changed programmatically, and that there's a white exclamation mark which should always be displayed in white."
     },
     {
       "type": "guideline",
-      "content": "Meeting contrast requirements.\n\nUsing the available Spectrum 2 colors with Spectrum 2 icons will ensure that your design is both visually appealing and meets the WCAG minimum contrast ratio of 3:1 for non-text contrast. If you diverge from Spectrum colors, you'll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes. The Stark plugin for Figma can help you check your contrast ratio. Consider three color combinations: A dark icon on a color background A light icon on a color background Tinted icons on a color background"
+      "content": "If you diverge from Spectrum colors, you’ll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes."
     },
     {
       "type": "guideline",
-      "content": "Meeting contrast requirements.\n\nUsing the available Spectrum 2 colors with Spectrum 2 icons will ensure that your design is both visually appealing and meets the WCAG minimum contrast ratio of 3:1 for non-text contrast. If you diverge from Spectrum colors, you'll need to make sure that your design has enough contrast between the icon and the background. Use subtle fills in light and dark themes to maintain legibility without overpowering the UI. Make sure that the icons remain legible and distinguishable across varied backgrounds and themes. Consider three color combinations: A dark icon on a color background A light icon on a color background Tinted icons on a color background Image: Use a background subtle fill style with a dark icon, to meet color contrast for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_185027330aebcab8aed239a510aab0080dc3f8db6.png?width=750&format=png&optimize=medium)Image: Don't combine colors. This is not visually appealing, nor does it meet the required contrast ratio for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1277a455948eb2526a0501b2072ca48d63e2a7c74.png?width=750&format=png&optimize=medium)Image: Use a light icon with a background bold fill style to meet color contrast for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1a737ea237c8b24fff7dd214063053f1bc7a6d29a.png?width=750&format=png&optimize=medium)Image: Don't combine colors in this way, because it is too bright and essentially unreadable. This also doesn't meet the required contrast ratio for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1aefdf8c18a9f3f5dc39c2c63958ee6e68eb93139.png?width=750&format=png&optimize=medium)Image: Use a background style with a tinted icon. This is both visually appealing and it meets the contrast requirements for accessibility. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1b9e4aba1a1e3481c94de4926252109d233197935.png?width=750&format=png&optimize=medium)Image: Don't combine colors in this way, because there is not enough contrast to meet accessibility requirements. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1878777b149c8958adbd5a46afd68a13d474f9011.png?width=750&format=png&optimize=medium)"
+      "content": "The library currently only includes a subset of icons, and are for mock-up purposes only. If you need to create a mock-up with an icon that isn’t available yet, just use a placeholder icon. Don’t use unapproved icons in your work (for example, downloaded from Noun Project, or icons you’ve created yourself)."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/using-icons",
-  "lastUpdated": "2026-08-14",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/using-icons/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "icons",
-    "Workfront",
-    "Icon Finder",
-    "Noun Project",
-    "naming convention",
-    "UI icons",
-    "workflow icons"
-  ]
+  "tags": ["designing"],
+  "related": [{ "ref": "icon-fundamentals" }, { "ref": "illustrations" }]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-design-data",
-  "version": "3.3.0-beta.2",
+  "version": "3.3.0",
   "description": "Spectrum design tokens in cascade format — the canonical source of truth for @adobe/spectrum-tokens",
   "type": "module",
   "repository": {
@@ -62,7 +62,7 @@
   "devDependencies": {
     "ajv": "^8.12.0",
     "ajv-formats": "^3.0.1",
-    "@adobe/design-data-spec": "4.2.0"
+    "@adobe/design-data-spec": "4.4.0"
   },
   "scripts": {}
 }

package/registry/platform-implementations.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "platform-implementation",
+  "description": "Machine-readable ids for platform-manifest implementations (repos or in-monorepo directories that own a Layer 2 platform manifest.json). Distinct from platforms.json, which enumerates device targets (desktop/mobile/web/ios/android) referenced by token names — this registry enumerates concrete implementation projects a manifest's `platform` field may declare (spec/manifest.md#identity-fields). Referencing an id here is a SHOULD, not a MUST: a manifest may declare a `platform` value not yet listed while a new implementation is incubating.",
+  "values": [
+    {
+      "id": "react-spectrum",
+      "label": "React Spectrum",
+      "description": "Adobe's React implementation of Spectrum, incubating its platform manifest at platforms/react-spectrum/ ahead of an eventual hand-off to the React Spectrum team.",
+      "repository": "https://github.com/adobe/react-spectrum"
+    },
+    {
+      "id": "web-components",
+      "label": "Spectrum Web Components",
+      "description": "Adobe's Web Components implementation of Spectrum, incubating its platform manifest at platforms/web-components/ ahead of an eventual hand-off to the Spectrum Web Components team.",
+      "repository": "https://github.com/adobe/spectrum-web-components"
+    },
+    {
+      "id": "ios",
+      "label": "Spectrum iOS",
+      "description": "Adobe's iOS implementation of Spectrum, with its platform manifest already externalized (see epic h890.22).",
+      "repository": "https://github.com/GarthDB/spectrum-ios-design-data"
+    },
+    {
+      "id": "android",
+      "label": "Spectrum Android",
+      "description": "Adobe's Android implementation of Spectrum. No platform manifest exists yet (see epic h890.22.6, follow-up to the iOS work)."
+    }
+  ]
+}

package/guidelines/ai-resource-guide.json

@@ -1,50 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/ai-resource-guide.json",
-  "name": "ai-resource-guide",
-  "title": "AI resource guide",
-  "category": "support",
-  "documentBlocks": [
-    { "type": "purpose", "content": "AI resource guide" },
-    {
-      "type": "guideline",
-      "content": "For component specs, anatomy, usage guidelines, design tokens, and Figma resources. View the Spectrum 2 Design Data website View the Figma MCP (connects Claude to Figma libraries)"
-    },
-    {
-      "type": "guideline",
-      "content": "Protopack is the Design Technology team's streamlined prototyping foundation. Protopack simplifies setup, includes production-ready Spectrum components, integrates with Adobe services, and supports easy deployment. It removes much of the configuration overhead so you can focus on designing, iterating, and exploring ideas.\" View the AD AI Prototyping Quick Start wiki View the Awesome Deployment Platform wiki Join the Protopack Slack channel"
-    },
-    {
-      "type": "guideline",
-      "content": "Protopack for React Spectrum.\n\nDownload Protopack and view the RSP template View the React Spectrum Starter template in the Protopack app View the React Spectrum AI integration overview View the React Spectrum website"
-    },
-    {
-      "type": "guideline",
-      "content": "Protopack for Spectrum Web Components.\n\nDownload Protopack and view the SWC template View the Spectrum 2 Web Components Starter template in the Protopack app View the Spectrum Web Components AI documentation View the Spectrum Web Components website"
-    },
-    {
-      "type": "guideline",
-      "content": "React Spectrum.\n\nView the React Spectrum AI integration overview View the React Spectrum website View the React Spectrum GitHub repository"
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum Web Components.\n\nView the Spectrum Web Components AI documentation View the Spectrum Web Components website View the Spectrum Web Components GitHub repository"
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum design data.\n\nView the Spectrum 2 Design Data AI resources View the Spectrum 2 Design Data website View the Spectrum 2 Design Data tools overview View the Spectrum 2 Design Data GitHub repository"
-    }
-  ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/ai-resource-guide",
-  "lastUpdated": "2026-08-27",
-  "status": "published",
-  "tags": [
-    "AI tooling",
-    "Protopack",
-    "Design data",
-    "Figma",
-    "Claude Enterprise",
-    "Prototyping",
-    "design-to-code"
-  ]
-}