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

package/guidelines/colors.json

@@ -5,88 +5,58 @@
   "title": "Colors",
   "category": "designing",
   "documentBlocks": [
-    { "type": "purpose", "content": "Colors" },
     {
-      "type": "guideline",
-      "content": "Image: A green gradient circle icon, half outlined and half filled, representing accessibility. (source: https://preview.spectrum.adobe.com/foundations/color/media_1dbe049a5fb02f75fecb2595d69e3ab96b582b953.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A blue gradient icon of two diagonal arrows pointing away from each other, representing scalability. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c1aafd6782c73e32c3bb9f17bcc1d159a8338b32.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "Image: A purple-to-pink gradient icon of three interlocking rings, representing intentional or purposeful design. (source: https://preview.spectrum.adobe.com/foundations/color/media_1030263b0b0e21eaa2317fc71f938da71ffa84f03.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "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. Image: A large grid of color swatches showing 15 hue rows (red, orange, yellow, brown, chartreuse, green, teal, cyan, blue, indigo, purple, magenta, fuchsia, pink, and crimson) each with 16 columns transitioning from light to dark. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b61b63c16d0c1bd67be971ead2447f6a4fb87a03.png?width=750&format=png&optimize=medium)"
+      "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.\n\nImage: Six vertical color ramps labeled with Adobe app icons (Ai, Sg, Ps, Ae, Xd, Id), each transitioning from a light tint at top to a dark shade at bottom in the app's brand color: orange, green, blue, indigo, magenta, and pink/red. (source: https://preview.spectrum.adobe.com/foundations/color/media_11dbaa344681e410a0abb24a800f8f99770341781.png?width=750&format=png&optimize=medium)"
+      "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\nImage: Six horizontal gradient bars in Adobe app brand colors (orange/Ai, green/Sg, blue/Ps, indigo/Ae, magenta/Xd, pink/Xd), each labeled with numeric hue values marking key color stops along the gradient. (source: https://preview.spectrum.adobe.com/foundations/color/media_1628ff4ce8ffc018fd2e2943fa27cb27302f9102f.png?width=750&format=png&optimize=medium)The 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.Image: A blue gradient scale from light to dark with contrast ratio labels ranging from 1.06:1 to 19.5:1 at each stop, paired below with a matching swatch row numbered 100 through 1600 showing the corresponding blue shades. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b3856ffb32cd28a1427b18829e04a3ea760d4f74.png?width=750&format=png&optimize=medium)"
+      "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. Image: Two rows of solid-colored button-like labels grouped by text contrast: a top section 'Use with white text' showing red, brown, olive, green, teal, blue, indigo, purple, magenta, pink, dark gray, and gray backgrounds with white 'Label' text, and a bottom section 'Use with black text' showing orange, yellow, green, and lime backgrounds with black 'Label' text. (source: https://preview.spectrum.adobe.com/foundations/color/media_130355598009d093c7bd1e12e42df413fee995fbe.png?width=750&format=png&optimize=medium)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. Image: Three pairs of icon swatches (a crop/sparkle tool, a PDF document stack, and a camera) shown first on light tinted backgrounds in purple, red, and green, then on matching dark backgrounds grouped within a black container. (source: https://preview.spectrum.adobe.com/foundations/color/media_1000f1eb95187ddf34fbfdb0dd0a7b6c6d840aa28.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. A purple pill-shaped 'Label' button next to a checklist labeled 'Interests' with a checked orange 'Travel' checkbox and unchecked 'Music' and 'Shopping' options, plus a helper text reading 'Select at least one interest.' (source: https://preview.spectrum.adobe.com/foundations/color/media_13c6937cd9b5481376c50a5b6f4b418421f5e9253.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. A text field with a red border and warning triangle icon, showing an error message 'Enter a valid email address.' (source: https://preview.spectrum.adobe.com/foundations/color/media_130cdd17e3ef910ccab2221c2169bfd2b24189153.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. The same text field with only a red border and no icon or error message, showing color alone without an accompanying explanation. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c9cefe91435c778a9966713132ffeb845940fbf7.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. Two stacked panels, one light and one dark, each showing three layers labeled gray-200, gray-100, and gray-75 with minimal visual distinction between them. (source: https://preview.spectrum.adobe.com/foundations/color/media_178653b2587e927b8a6e5c0b44d137af96530e4da.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two stacked panels, one light and one dark, each showing three layers labeled Base, Layer 1, and Layer 2 with clear visual separation indicating hierarchy. (source: https://preview.spectrum.adobe.com/foundations/color/media_1f9b9739c5896b12daf20a89b108ee81f1f3f8d9b.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. Two cards, one light gray-200 and one black, each showing four lines of colored text (gray-600/700, red-800/900, blue-800/900, green-800/900) marked with a red 'Fail' warning icon, indicating insufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15110077c3e594f9d8c9e58063e962e5108d0d62e.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two cards, one white and one black, each labeled 'Layer 1' and showing four lines of colored text (gray-700, red-900, blue-900, green-900) marked with a green 'Pass' checkmark icon, indicating sufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_1cf6f2433a57f6e0819eab3ddaf38308bf05dab80.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. Two colored squares, one red and one light gray, each containing a pill-shaped 'Label' button in a matching or complementary hue with adequate contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15ca4c13d88e11dd08b4786512aa49253f1159101.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A red rectangle containing a blue pill-shaped 'Label' button, showing a jarring hue and saturation clash between the background and button. (source: https://preview.spectrum.adobe.com/foundations/color/media_1e8d1753ca0cb27e0406771145711cc317fd99e3a.png?width=750&format=png&optimize=medium)"
+      "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. Image: Example of a correct usage. A code snippet reading 'color: $blue-300;' showing direct use of a color token variable. (source: https://preview.spectrum.adobe.com/foundations/color/media_19ba20ccdb3e3fc3e9c9a566869ab3fff8945b562.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A code snippet reading 'color: lighten($blue-300, 15%);' showing a color token being programmatically modified rather than used as-is. (source: https://preview.spectrum.adobe.com/foundations/color/media_1175eb8974edd034d8ed87844041434397f19af31.png?width=750&format=png&optimize=medium)"
+      "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://preview.spectrum.adobe.com/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/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"]
 }

package/guidelines/grays.json

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