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

package/guidelines/brand.json

@@ -8,27 +8,15 @@
     { "type": "purpose", "content": "Brand" },
     {
       "type": "guideline",
-      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. You can find app icons within the App Icons library."
+      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons. You can find app icons within the [App Icons library](https://www.figma.com/file/8or0zCnGc5fiTnQ1NeIRnh/Product-App-icons?type=design\\&node-id=501%3A685\\&mode=design\\&t=BCgDXidUN5VZiBwu-1)."
     },
     {
       "type": "guideline",
-      "content": "Product logos, app icons, and lockups.\n\nA product logo or tile color does not change, even if the background is dark. One-color product logos are for usage as workflow icons."
+      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders.\n\nDesktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don't open instantaneously, are required to have a splash screen. This is so a user can understand that there's a loading process happening.\n\nFollow OS-specific conventions for mobile loading screens. View more information about using [Android loading screens](https://wiki.corp.adobe.com/display/AdobeDesign/Android+Launch+Screens)."
     },
     {
       "type": "guideline",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens. View more information about using Android loading screens."
-    },
-    {
-      "type": "guideline",
-      "content": "Loading screens include desktop splash screens, mobile loading screens, and web loaders. Desktop splash screens celebrate artwork from the Adobe community and are updated at least once a year. All desktop products that have a loading time of longer than 2 seconds, or don’t open instantaneously, are required to have a splash screen. This is so a user can understand that there’s a loading process happening. Follow OS-specific conventions for mobile loading screens."
-    },
-    {
-      "type": "guideline",
-      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors. The Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the Brand wiki under individual product delivery pages. View web folders and file types."
-    },
-    {
-      "type": "guideline",
-      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience. Primary file types always utilize brand colors, since they’re often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors."
+      "content": "File type and folder illustrations.\n\nOn desktop, product folder icons are branded to help users find any product-related settings. For web and mobile, folders use Spectrum colors to fit better in the experience.\n\nPrimary file types always utilize brand colors, since they're often file formats proprietary to the product (for example, PSD to Photoshop, or AEP to AE). Secondary filetypes are shared across many products, so they take a neutral palette using Spectrum 1 colors.\n\nThe Brand team creates desktop versions of these icons in ICNS (for Mac) and ICO (for Windows) files, while web versions are delivered most often as SVGs. Desktop folders and file types can be found on the [Brand wiki](https://wiki.corp.adobe.com/pages/viewpage.action?spaceKey=AdobeDesign\\&title=Adobe+Design+Brand) under individual product delivery pages. View [web folders and file types](https://wiki.corp.adobe.com/pages/viewpage.action?pageId=1994851879)."
     },
     {
       "type": "guideline",
@@ -36,11 +24,11 @@
     },
     {
       "type": "guideline",
-      "content": "Document Cloud’s colors align to Spectrum. There’s three primary product colors plus Adobe red, as well as six secondary colors."
+      "content": "Document Cloud's colors align to Spectrum. There's three primary product colors plus Adobe red, as well as six secondary colors."
     },
     {
       "type": "guideline",
-      "content": "Experience Cloud’s colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
+      "content": "Experience Cloud's colors align to Spectrum. The foundational apps use cool colors, while the functional apps use warm colors."
     },
     {
       "type": "guideline",
@@ -48,23 +36,15 @@
     },
     {
       "type": "guideline",
-      "content": "Gradients are a significant characteristic of Spectrum 2 and a very noticeable part of how the Adobe brand is expressed in UI contexts. They help communicate product differentiation across our brand portfolio, and also allow for individual products to have a wider range of expression. Both of these aspects heavily contribute to the bolder, more colorful visual language of Spectrum 2. Because gradients are very expressive, they’re always placed intentionally and with a strategic meaning. They should not distract from the main content in an experience. They’re only used in specific areas in order to create a system, feature the product brand, and support visual hierarchy. And, their colors are directly tied to product brand color palettes."
+      "content": "Premium and Generative AI gradients.\n\n\\[See embedded content on website]"
     },
     {
       "type": "guideline",
-      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don’t make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product’s strategy and timing. Any new Spectrum 2 assets must be requested directly from the Brand team. It’s very important that you do not create your own. To view existing S2 Illustrations, visit the S2 / Illustrations library in Figma. If you need a new illustration, make a request using Workfront."
+      "content": "Request assets from the Brand team.\n\nBrand considerations are highly strategic, and coherence is a priority. Don't make your own illustrations, colors, gradients, logos, or other assets. The Brand team will work with you to create assets that align to your product's strategy and timing.\n\nAny new Spectrum 2 assets must be requested directly from the Brand team. It's very important that you do not create your own.\n\nTo view existing S2 Illustrations, visit the [S2 / Illustrations library](https://www.figma.com/design/xGhSI7y1ewp2fEiX5eNOKv/S2-%2F-Illustrations?node-id=1508-8563\\&t=T5G2KGbuUHuqGUnA-0) in Figma. If you need a new illustration, [make a request using Workfront](https://experience.adobe.com/#/@wfadoberm/so:adoberm-Production/workfront/requests/new?activeTab=tab-new-helpRequest\\&projectID=6780593b001a3fa9fe20195fcec6c39a\\&path=)."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/brand",
-  "lastUpdated": "2026-09-10",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/brand/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Brand assets",
-    "Product logos",
-    "App icons",
-    "Loading screens",
-    "Brand colors",
-    "Gradients",
-    "Creative Cloud"
-  ]
+  "tags": ["designing"]
 }

package/guidelines/colors.json

@@ -5,76 +5,58 @@
   "title": "Colors",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Colors" },
     {
-      "type": "guideline",
-      "content": "Accessible.\n\nSpectrum colors are purposefully chosen and combined with one another to create accessible experiences that work for all users across different products, devices, and settings."
-    },
-    {
-      "type": "guideline",
-      "content": "Scalable.\n\nSpectrum uses structured relationships between colors, grays, themes, and contrast ratios so it can work consistently across Adobe’s many apps, surfaces, and modes."
-    },
-    {
-      "type": "guideline",
-      "content": "Purposeful.\n\nColor is used to create hierarchy, signal meaning, and guide attention. Spectrum avoids unnecessary color so important actions, states, and messages stand out."
+      "type": "purpose",
+      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors.\n\nWe also needed a couple of darker shades to work for our data visualization palettes (available soon)."
     },
     {
       "type": "guideline",
-      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color."
+      "content": "This update to the color palette improves how colors appear on the solid white primary background, includes brand colors in the palette, and makes our data visualization colors more color vision deficiency-safe."
     },
     {
       "type": "guideline",
-      "content": "Brand colors may differ from Spectrum colors"
+      "content": "The 6.0.0 color system didn’t account for any Adobe product brand colors, despite the colors being so close in hue and saturation. With the Spectrum 2 color update, we’ve shifted some previous colors to be able to include brand colors in the new palette."
     },
     {
       "type": "guideline",
-      "content": "Key colors (shown in hue).\n\nThe Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
+      "content": "The Leonardo tool generated the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors."
     },
     {
       "type": "guideline",
-      "content": "Solid color background with black or white.\n\nFor these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and celery while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette. Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette."
+      "content": "Once the color scale is determined, lightness stops are input for each color in order to get aliased colors."
     },
     {
       "type": "guideline",
-      "content": "Two-tone color pairing.\n\nTo create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700. Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users."
+      "content": "Brand colors are used to generate the Spectrum colors, but brand colors aren’t used one-to-one in the Spectrum palette. Branding is not strictly tied to using Spectrum colors, despite this alignment for Spectrum 2."
     },
     {
       "type": "guideline",
-      "content": "Don’t create your own colors.\n\nEvery part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards."
+      "content": "In Spectrum 2, colors have shifted blue to be more indigo. This is so we can continue using “blue” aliases but can have an updated, more approachable blue hue that leans more indigo. Moving forward, all products will use blue for the informative and accent semantics. This will help better unify all of Adobe’s products, including Adobe Express."
     },
     {
       "type": "guideline",
-      "content": "Communicating with color.\n\nIn order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning."
+      "content": "This change works nicely with the new integration with brand colors. For example, Photoshop’s blue is somewhere in between the current Spectrum blue and cyan. Pushing blue to be more indigo creates space for cyan to lean more blue and accommodate Photoshop’s blue. Similarly, pushing blue more indigo also means pushing indigo to be more purple, which allows for After Effect’s purple to fit nicely in the new indigo range."
     },
     {
       "type": "guideline",
-      "content": "Create hierarchy with background layer colors.\n\nUse background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes."
+      "content": "The lightest shades of yellow and chartreuse were extra-saturated in Spectrum 6.0.0 colors, despite being the same 1.08:1 contrast with all the other colors. The Spectrum 2 update for colors desaturates these shades to keep them more uniform in style."
     },
     {
       "type": "guideline",
-      "content": "Provide sufficient contrast.\n\nUse the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme. Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product."
+      "content": "Spectrum 2 now uses solid white as the primary background for light UI. There’s also new variants of components, like the in-line alert, that use color-100 as the background. Having this lighter background introduced the need for a lighter shade for components, so the contrast of the lightest value (color-100) was lowered from 1.08:1 to 1.06:1."
     },
     {
       "type": "guideline",
-      "content": "Hue and Saturation contrast.\n\nAvoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users. Use static white or static black components instead of colored components on top of color or image backgrounds."
+      "content": "We also needed a couple of darker shades to work for our data visualization palettes (available soon)."
     },
     {
       "type": "guideline",
-      "content": "Programmatic color changes.\n\nDo not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors."
+      "content": "The color update for Spectrum 2 also aimed to fix some general issues with the previous color palette. Colors have become brighter and more saturated, contrast has been lightened where possible, and some shades like orange, yellow, and chartreuse have been fixed to appear less muddy."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/colors",
-  "lastUpdated": "2026-08-13",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/colors/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "color system",
-    "accessibility",
-    "WCAG contrast",
-    "Leonardo color tool",
-    "brand colors",
-    "key colors",
-    "hue ranges",
-    "contrast ratios",
-    "two-tone color pairing"
-  ]
+  "tags": ["designing", "design-tokens", "color"],
+  "related": [{ "ref": "grays" }, { "ref": "background-layers" }]
 }

package/guidelines/containers.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/containers.json",
+  "name": "containers",
+  "title": "Containers",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box.\"\n\nAll containers share a set of defined styles.\n\nInternal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns.\n\nThis medium card uses spacing-300 for internal padding.\n\nNote that specific components might have different options and states.\n\nExample of an app frame with a side navigation."
+    },
+    {
+      "type": "guideline",
+      "content": "Containers separate concepts with distinct purposes."
+    },
+    {
+      "type": "guideline",
+      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container."
+    },
+    {
+      "type": "guideline",
+      "content": "Examples of containers: two cards with different sizes and layout options, and a select box."
+    },
+    {
+      "type": "guideline",
+      "content": "All containers share a set of defined styles."
+    },
+    {
+      "type": "guideline",
+      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns."
+    },
+    {
+      "type": "guideline",
+      "content": "This medium card uses spacing-300 for internal padding."
+    },
+    {
+      "type": "guideline",
+      "content": "In this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
+    },
+    {
+      "type": "guideline",
+      "content": "Note that specific components might have different options and states."
+    },
+    {
+      "type": "guideline",
+      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of an app frame with a side navigation."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [{ "ref": "states" }, { "ref": "s2-app-frame" }]
+}

package/guidelines/developer-overview.json

@@ -8,44 +8,28 @@
     { "type": "purpose", "content": "Developer overview" },
     {
       "type": "guideline",
-      "content": "React Spectrum (RSP).\n\nSpectrum 2 for React Spectrum is now Generally Available. Over 70 components matching the Spectrum 2 Figma designs are now production-ready and available in the new @react-spectrum/s2 package. The Spectrum 2 package supports both new projects and those already on React Spectrum v3, with the ability to migrate portions of an application independently. Migration support is available through the upgrade migration tool as well as documentation on the website. See our guides to learn how to use Spectrum tokens via the style macros and ways to build using AI agents. React Spectrum components are built on React Aria Components and Spectrum Tokens, and will continue to be added incrementally as designs become available. For a full list of currently available components, see the Status section of the Spectrum 2 for React Spectrum page. Visit the React Spectrum website for component documentation, examples, latest updates, and release information. Join #react-spectrum and #rsp-announcements on Slack for announcements and support."
+      "content": "Spectrum 2 offers a new look and feel that your team will want to adopt for your product. You’ll probably have questions, like “How do we get started?” “How do we migrate?” or “How do we roll this out?”"
     },
     {
       "type": "guideline",
-      "content": "Spectrum Web Components (SWC).\n\nSpectrum Web Components is migrating components to full Spectrum 2 fidelity, meaning components are being rebuilt to look and behave like the Spectrum 2 designs, through a new version of the library and package. Gen1 components ship as versions 1.x, and Gen2 components ship as versions starting at 2.x—so the package version is the simplest way to know which generation you're on. The migration strategy A core principle is that Gen1 and Gen2 components can coexist, so the migration strategy is flexible to meet each team's needs. SWC's first step toward full-fidelity Spectrum 2 was called Spectrum 2 Foundations and is currently available for all Gen1 components. This theme updates the colors, corner radii, and icons of its components to provide the Spectrum 2 look and feel, while supporting backward compatibility with the Spectrum 1 and Express themes. This allowed teams to update closer to Spectrum 2 without introducing breaking changes. Gen2 is the next step in the migration path. These components are being rebuilt from the ground up so components are more stable and flexible, and fully match the Spectrum 2 designs. While these components have some breaking changes, they fully match Spectrum 2 design intent. How to stay up to date All major announcements about Gen2 component availability and releases are made through the project's Slack channels ( #swc-announcements and #spectrum-web-components ). You can track the progress of these migrations by viewing the roadmap. Additional details about Gen1 and Gen2 are available in the project's documentation."
+      "content": "On this page, we’ve addressed some common questions from product developers as Spectrum 2 has rolled out. For more specific, detailed, and up-to-date information about working with a particular implementation, visit its documentation site."
     },
     {
       "type": "guideline",
-      "content": "The first phase of Spectrum 2 has been focused on the web. Though Spectrum has always made cross-platform design a priority, the majority of emerging products at Adobe have been web-first in recent years. As such, we’re not ready to share any detailed plans for updates to desktop component libraries such as Qt or Drover. Learn more about desktop and mobile platforms in the FAQs."
+      "content": "As of May 2025, Spectrum is in the process of staffing a team to design and build an implementation of Spectrum for Android. Once onboarding wraps up and development begins, the team will begin communication about the status of the new library."
     },
     {
       "type": "guideline",
-      "content": "iOS.\n\nSpectrum iOS is a Swift-based implementation of Spectrum, offering native components for both UIKit and SwiftUI products. Design and engineering artifacts are versioned together—the Figma library and Swift Package are always in sync—so what you see in Figma is what's available to ship. The team shipped 1.0 and has continued building. Available components include Button, Menu, Picker, Pop-Up Button, Switch, Toggle Button, and Toast, with full Dynamic Type support for typography. The library is actively growing, with more components on the way. Try it on a device The Spectrum iOS Catalog app is the best way to explore what's available—see components in context, feel the interactions, and learn about each component's features and options. Open this link on an iOS device to join: Join the Catalog App on TestFlight Resources Spectrum iOS GitHub Repository Spectrum iOS Figma For questions or to engage with the team, reach out in #spectrum-ios."
+      "content": "If your team uses design data (like design tokens or CSS custom properties from Spectrum CSS) in any customizations or overrides in your project, you’ll want to keep track of updates to the implementation or design data resource you’re using and plan for time to verify any breaking changes."
     },
     {
       "type": "guideline",
-      "content": "Android.\n\nSpectrum Android is a Kotlin-based implementation of Spectrum, offering native components for Jetpack Compose products. Design and engineering artifacts are versioned together - the Figma library and the Gradle artifacts are always in sync - so what you see in Figma is what's available to ship. As of April 2026, the team is fully staffed with 3 engineers and 1 designer, and is actively building the foundational layers and components for Android in parallel. The first release, Token SDK 1.0, is planned for early June and will ship with Color and Typography tokens so teams can easily consume and use them. Component SDK 1.0 will follow in the subsequent months, bringing the foundational components, Iconography, and accessibility support for building Spectrum experiences on Android. The library is actively growing, with more on the way. Try it on a device The Spectrum Android Catalog app is the best way to explore what's available, see components in context, feel the interactions, and learn about each component's features and options. To join the waitlist, subscribe to the GRP-GCP-0873-READONLY IAM group. You'll receive an invite to preview and download pre-release and release builds via Firebase App Distribution as the library progresses. Resources Spectrum Android Tokens GitHub Repository Spectrum Android Components GitHub Repository For questions or to engage with the team, reach out in #spectrum-android."
-    },
-    {
-      "type": "guideline",
-      "content": "If your team is building a new implementation of Spectrum components, or is using an implementation not mentioned above, please reach out to us in #spectrum-general."
-    },
-    {
-      "type": "guideline",
-      "content": "If your team uses design data (like design tokens or CSS custom properties) in any customizations or overrides in your project, you’ll want to keep track of updates to the implementation or design data resource you’re using and plan for time to verify any breaking changes. The best way to make your current code base ready for the future is to avoid using direct, hard-coded values (e.g., HEX or RGB values) or global tokens (e.g., gray-300). Instead, replace these with more semantic aliases (e.g., negative-border-color-default). The Spectrum Token Visualizer tool is helpful for looking up aliases by the global token they reference. The Spectrum Engineering teams are working on other tools to help with this process — like linters, deprecation warnings, data visualizers, and improved documentation — to help ensure your team makes the best use of the available data. If you’re concerned about the customizations your team made in Spectrum 1 and how Spectrum 2 might impact them, please contact the team for the implementation you’re using through their Slack channel. A full list of Slack channels is available on the Contact page. If you have any questions about what token to use for a particular use case or ideas for improved tooling, please reach out through #spectrum-tokens."
+      "content": "The most important thing you can do — as noted above — is to limit your usage of hard-coded values, direct usage of global tokens, or overriding global tokens via CSS properties/override APIs. Using the correct aliases ensures that components will continue to point to sensible values. In some cases, you may not even notice the change!"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/developer-overview",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/developer-overview/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Spectrum 2",
-    "React Spectrum",
-    "Spectrum Web Components",
-    "migration",
-    "upgrade migration tool",
-    "Spectrum tokens",
-    "iOS",
-    "Android"
-  ]
+  "tags": ["developing"],
+  "related": [{ "ref": "motion" }, { "ref": "action-bar" }]
 }

package/guidelines/faqs.json

@@ -8,115 +8,28 @@
     { "type": "purpose", "content": "FAQs" },
     {
       "type": "guideline",
-      "content": "Spectrum 2 is a significant version update — for both design and engineering — of the Spectrum design system. For more information, view the Introduction page."
+      "content": "As we progress, we're committed to extending Spectrum 2 to include desktop and mobile platforms with ongoing workshops and to ensure a comprehensive update to our design system."
     },
     {
       "type": "guideline",
-      "content": "The first phase of Spectrum 2 has been focused on the web. If you are working on a product built for a web implementation, you can start using Spectrum 2 today. Remember to work closely with your engineering partners to ensure a smooth implementation. As we progress, we're committed to extending Spectrum 2 to include desktop and mobile platforms with ongoing workshops and to ensure a comprehensive update to our design system."
+      "content": "Though Spectrum has always made cross-platform design a priority, the majority of emerging products at Adobe have been web-first in recent years."
     },
     {
       "type": "guideline",
-      "content": "Though Spectrum has always made cross-platform design a priority, most emerging products at Adobe have been web-first in recent years. That said, Adobe Design has been collectively working on the future of desktop and mobile. One of the central goals of Spectrum 2 is to make sure that it feels \"at home.\" Both professional desktop and mobile tools have a unique set of requirements, and each will get the attention they require. On mobile, that work now has a home on the Spectrum team: Spectrum iOS and Spectrum Android exist as dedicated implementations of Spectrum 2. Neither is complete, but both are actively building, and we continue to expand their scope as the mobile design language matures. On desktop, we've been partnering with desktop teams and preparing their implementations for Spectrum 2 by using Spectrum's design data. We continue to expand the scope of our partnership as we build out Spectrum 2 and the toolchain to support it."
+      "content": "That said, Adobe Design has been collectively working on the future of desktop and mobile. One of the central goals of Spectrum 2 is to make sure that it feels “at home.” Both professional desktop and mobile tools have a unique set of requirements and each will get the attention they require."
     },
     {
       "type": "guideline",
-      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review design documentation to keep up-to-date with releases. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. And most importantly, read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
+      "content": "In the meantime, we’ve been partnering with both desktop and mobile teams and preparing their implementations for Spectrum 2 by using Spectrum’s design data. We continue to expand the scope of our partnership as we build out Spectrum 2 and the toolchain to support it."
     },
     {
       "type": "guideline",
-      "content": "Perform an UI audit.\n\nConduct an audit of your existing UI components and patterns, specifically identifying the elements that need updating in order to align to Spectrum 2. Evaluate the design of the overall layouts, interaction patterns, and the level of consistency with the new guidelines."
-    },
-    {
-      "type": "guideline",
-      "content": "Create a transition or migration plan.\n\nPartner with your implementation team to develop a plan that outlines the order and priority of updating the components and foundations (such as color and styling). Prioritize the most frequently used components, then create a transition plan that breaks the implementation down into manageable phases. For example, you could start with core components that are used in multiple areas of your product (like buttons). Given that iterative migration plans are most successful, you should expect S1 and S2 design languages to live side-by-side in the same UIs for some period of time. As long as a full migration plan is committed, temporarily mixing design languages is acceptable."
-    },
-    {
-      "type": "guideline",
-      "content": "Apply Spectrum 2 and replace outdated components.\n\nReview the Spectrum 2 Figma libraries and update your components, typography, and icons, among the other changes. As you update your designs, please work with your implementation team on a migration plan. Especially pay attention to components that have changed between Spectrum 1 and Spectrum 2.. Note any custom components in the UI and work with your engineering team to replace any hard-coded values with a semantic alias."
-    },
-    {
-      "type": "guideline",
-      "content": "Collaborate with engineers.\n\nDepending on your product’s implementation, there may be differences between what’s in Figma and code. Work closely with your engineering partners to ensure a smooth implementation of the updated UI. Communicate any changes or updates clearly, provide them with necessary resources, components, or patterns, and address any questions or concerns they may have."
-    },
-    {
-      "type": "guideline",
-      "content": "Collaborate with content strategists.\n\nWork closely with your content strategy partners to ensure that messaging, voice, and tone are being holistically incorporated into interface updates. Work together to create experiences that support your users and communicate clearly about any design updates."
-    },
-    {
-      "type": "guideline",
-      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Changes will include updates to colors, renamed tokens in the gray system, updates to corner rounding, and increased padding."
-    },
-    {
-      "type": "guideline",
-      "content": "Modify custom component implementations.\n\nIdentify components in your code base that are customized or not using a standard framework implementation, as those will need manual updating to align with Spectrum 2. If you have custom components, be sure to replace hard-coded values with the appropriate semantic alias. Work with your designers to align custom or product-specific components with the Spectrum 2 design language."
-    },
-    {
-      "type": "guideline",
-      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date and monitor releases of your Spectrum implementation. Familiarize yourself with the changes to components, patterns, styles, and usage guidelines. If you author custom components that utilize design data (tokens), it may be helpful to read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why. Especially pay attention to changes in naming conventions, variables, and overall structure. If you build product UI, monitor the release notes for the implementation your product uses and make sure to update to the latest version at regular intervals. Release announcements for implementations are posted in their respective Slack channels. A full list of channels is available on the Contact page."
-    },
-    {
-      "type": "guideline",
-      "content": "Review your existing code base to ensure you’re using the latest version of a Spectrum implementation. Identify any dependencies that might be affected by the changes, and evaluate if your code is heavily customizing Spectrum components. If so, you may experience breaking changes that need to be reviewed. For more details about your implementation, view our Developer overview page. Carve out time to plan for the update and create a migration plan. We recommend breaking down the update process into planned, manageable tasks in order to avoid a need to react to massive changes all at once. Prioritize areas of the code base that directly impact the UI, as well as the code that customizes, overrides, or otherwise changes Spectrum defaults."
-    },
-    {
-      "type": "guideline",
-      "content": "Collaborate with your designers.\n\nWork with your design partners to develop a plan for testing visual changes, to ensure they align with updated designs that use Spectrum 2."
-    },
-    {
-      "type": "guideline",
-      "content": "Breaking changes ahead.\n\nThe update to Spectrum 2 may cause breaking changes. Please plan ahead with your team to prepare."
-    },
-    {
-      "type": "guideline",
-      "content": "Define a project timeline and an implementation roadmap.\n\nWork with both your design and engineering teams to define a project timeline and break down the migration process. Coordinate and align the efforts of both teams to ensure smooth coordination and avoid disruptions in the development workflow. Set realistic deadlines and milestones to track progress and manage expectations. Reach out to the Spectrum team for help working on a plan."
-    },
-    {
-      "type": "guideline",
-      "content": "Review the Spectrum 2 documentation.\n\nMake sure to regularly review documentation to keep up-to-date with releases. Read the release notes (posted in #spectrum-bulletin ) which explain what’s changed and why."
-    },
-    {
-      "type": "guideline",
-      "content": "Test and validate.\n\nCollaborate with your development or QE team to create a testing plan to validate Spectrum 2. Ensure that Spectrum 2 functions as intended and delivers the desired experience. Address any issues or bugs and coordinate with your design and development teams to implement necessary fixes."
-    },
-    {
-      "type": "guideline",
-      "content": "Facilitate cross-functional collaboration.\n\nEncourage collaboration and open communication between your team’s designers and engineers. Create an environment where your team can discuss challenges, exchange ideas, and share knowledge. Arrange regular meetings or workshops to facilitate cross-functional collaboration, allowing teammates to align on their understanding of Spectrum 2 and have the space to clarify any questions or concerns."
-    },
-    {
-      "type": "guideline",
-      "content": "Attend Spectrum shareouts and trainings.\n\nParticipate in the shareouts and training sessions being organized by the Spectrum team to familiarize yourself with Spectrum 2. These will help you understand the updated design principles, guidelines, and components. And, you’ll learn how to use new design assets, style guides, and tools that apply to your area of focus."
-    },
-    {
-      "type": "guideline",
-      "content": "Review existing assets that use Spectrum.\n\nReview your current marketing materials, banners, or social media graphics to identify design elements that need updating (for example, if your product uses screenshots of UI in your marketing materials or home screens). Take note of any iconography, colors, or imagery that may conflict with Spectrum 2. Apply the Spectrum 2 components across all relevant channels to maintain consistency."
-    },
-    {
-      "type": "guideline",
-      "content": "Review the Spectrum 2 documentation.\n\nRead through this website to understand the changes coming to components, patterns, styles, and usage guidelines. Follow the release notes (posted in #spectrum-bulletin ) for updates."
-    },
-    {
-      "type": "guideline",
-      "content": "Provide feedback.\n\nWhen collaborating with your design team and product leaders throughout the transition process, share insights from your perspective to help refine Spectrum 2 or report any inconsistencies you may come across. Learn about how to reach out."
-    },
-    {
-      "type": "guideline",
-      "content": "The Spectrum team manages Spectrum 2 components and styles as Figma libraries. These are available on the Resources page."
-    },
-    {
-      "type": "guideline",
-      "content": "For general inquiries, post in #spectrum-general or email the Spectrum team. For specific inquiries, view the Contact page for more information on how to get in touch."
+      "content": "Carve out time to plan for the update and create a migration plan. We recommend breaking down the update process into planned, manageable tasks in order to avoid a need to react to massive changes all at once. Prioritize areas of the code base that directly impact the UI, as well as the code that customizes, overrides, or otherwise changes Spectrum defaults."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/support/faqs",
-  "lastUpdated": "2026-09-04",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/faqs/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "web",
-    "desktop",
-    "mobile",
-    "Figma",
-    "release notes",
-    "migration plan",
-    "engineering collaboration"
-  ]
+  "tags": ["support"],
+  "related": [{ "ref": "steplist" }, { "ref": "contact" }]
 }

package/guidelines/fonts.json

@@ -6,68 +6,53 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Fonts" },
-    { "type": "guideline", "content": "Page last updated: July 31, 2026" },
     {
       "type": "guideline",
-      "content": "Adobe Clean Spectrum VF is Spectrum’s primary typeface and an update to Adobe Clean, with more modern metrics for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts. Download font"
+      "content": "Adobe Clean Spectrum VF is Spectrum's primary typeface and an update to Adobe Clean, with more modern metrics for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EovtJyyD70JGnU6GAFB39a8B0igit__I1kwIOdOQmRdZRg?e=5PaJvw)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Spectrum Serif VF is a companion font to Adobe Clean Spectrum VF, for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts. Download font"
+      "content": "Adobe Clean Spectrum Serif VF is a companion font to Adobe Clean Spectrum VF, for usage in UI and product design. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EtGh4hIaNC5BplE0Fpd42aMBucEzpj85P3-uwnQoSS56Zg?e=7rkwnp)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean is Adobe’s corporate typeface. It can be used for Latin-based languages as well as Greek and Cyrillic scripts. Download font"
+      "content": "Adobe Clean is Adobe's corporate typeface. It can be used for Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EtE69FE1M5NNssssA8MUktcB69v3tyM8x9mz-Qs9sHmG3g?e=cbftOo)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Serif is a companion font family to Adobe Clean. It covers most Latin-based languages as well as Greek and Cyrillic scripts. Download font"
+      "content": "Adobe Clean Serif is a companion font family to Adobe Clean. It covers most Latin-based languages as well as Greek and Cyrillic scripts.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/Ej0pcVTelONCqghOsr5W4EwBWX-tOlQl4jx8iuHPHHatIQ?e=wvXNfq)"
     },
     {
       "type": "guideline",
-      "content": "Source Code Pro is used to display code snippets, either inline with another typeface or as a standalone block. Download font"
+      "content": "Source Code Pro is used to display code snippets, either inline with another typeface or as a standalone block.\n\n[Download from Github](https://github.com/adobe-fonts/source-code-pro)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Han is a version of Adobe Clean supporting ideographic scripts – Chinese (Simplified and Traditional), Japanese, and Korean. Download font"
+      "content": "Adobe Clean Han is a version of Adobe Clean supporting ideographic scripts – Chinese (Simplified and Traditional), Japanese, and Korean.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/EsY41oy5pZxNlTrUwlEw-iYBthO9_oR9e1mzSSr_pFLCuw?e=d2Pd6m)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Thai is used for setting the Thai script, in both looped and loopless styles. Download font"
+      "content": "Adobe Clean Thai is used for setting the Thai script, in both looped and loopless styles.\n\n[Download font](https://adobe.sharepoint.com/:f:/s/Spectrum/ErsoedmOVINBqpzUC1CTu8gBfZrAeEQ1pKq6gwHHYIN7Dg?e=8GtE7b)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Arabic is used for the Arabic language, as well as other languages using the Arabic script, such as Persian. Download font"
+      "content": "Adobe Clean Arabic is used for the Arabic language, as well as other languages using the Arabic script, such as Persian.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Arabic\\&p=true\\&ga=1)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Hebrew is used for modern Hebrew typesetting. Download font"
+      "content": "Adobe Clean Hebrew is used for modern Hebrew typesetting.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Hebrew\\&p=true\\&ga=1)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Devanagari supports the Devanagari script, which is used for Hindi and Marathi languages. Download font"
+      "content": "Adobe Clean Devanagari supports the Devanagari script, which is used for Hindi and Marathi languages.\n\n[Download font](https://adobe.sharepoint.com/sites/Spectrum/Design%20files/Forms/AllItems.aspx?id=%2Fsites%2FSpectrum%2FDesign%20files%2FSpectrum%20fonts%2FAdobe%20Clean%20Devanagari\\&p=true\\&ga=1)"
     },
     {
       "type": "guideline",
-      "content": "Adobe Clean Display is a companion typeface to Adobe Clean, and is mostly used for branding and marketing experiences. It is available only for Latin-based languages. For more information about using Clean Display in Marketing applications, view Usage guidelines in the RED Brand book. Adobe Clean Display is available through Adobe Fonts. For instructions, view Using Adobe Fonts at Adobe."
-    },
-    {
-      "type": "guideline",
-      "content": "These resources are restricted fonts for the exclusive use of Adobe products and software. They should only be used through Adobe Fonts (not self-hosted). For instructions, view Using Adobe Fonts at Adobe."
+      "content": "These resources are [restricted fonts](https://www.adobe.com/products/type/font-licensing/restricted-fonts.html) for the exclusive use of Adobe products and software. They should only be used through Adobe Fonts (not self-hosted). For instructions, view [Using Adobe Fonts at Adobe](https://wiki.corp.adobe.com/display/fonts/Using+Adobe+Fonts+at+Adobe)."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/fonts",
-  "lastUpdated": "2026-09-10",
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/fonts/",
+  "lastUpdated": "2026-02-02",
   "status": "published",
-  "tags": [
-    "Adobe Clean Spectrum",
-    "Spectrum fonts",
-    "Adobe Fonts",
-    "Typekit",
-    "Latin-based languages",
-    "Greek",
-    "Cyrillic",
-    "Adobe Clean Han",
-    "Source Code Pro"
-  ]
+  "tags": ["designing"]
 }