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

package/guidelines/creating-bluelines-browsing-context.json

@@ -8,7 +8,7 @@
     { "type": "purpose", "content": "Creating bluelines" },
     {
       "type": "guideline",
-      "content": "The accessible name is the text that software uses to identify a component, and communicates it to the user. Assistive technologies like screen readers and voice control require an accessible name to read aloud content to screen reader users, or to accept speech input from voice control users to interact with digital content. Learn more about accessible names. Accessible names vary depending on the content. Accessible names must be defined for controls that don’t have visible text labels."
+      "content": "The accessible name is the text that software uses to identify a component, and communicates it to the user. Assistive technologies like screen readers and voice control require an accessible name to read aloud content to screen reader users, or to accept speech input from voice control users to interact with digital content. Accessible names vary depending on the content. Accessible names must be defined for controls that don’t have visible text labels. Image: Diagram showing the areas of the app frame to include accessible names. A, side navigation state control. B, product lock-up. C, Side navigation labels. D, Adobe-wide actions. (source: https://spectrum.adobe.com/foundations/app-frame/media_1e2f50d49e3390a5bd8d9651aa674dd0d2ac75a42.png?width=750&format=png&optimize=medium) Here are some guidelines to keep in mind as you define accessible names in the app frame:"
     },
     {
       "type": "guideline",
@@ -22,60 +22,40 @@
       "type": "guideline",
       "content": "C. Side navigation labels.\n\nWhen the side navigation is partially minimized (icon-only), the labels on the tooltips and when the side navigation is expanded should match the accessible names. Because a text label is available in both expanded and minimized states, app frame side navigation buttons do not require additional annotation."
     },
-    {
-      "type": "guideline",
-      "content": "D. Adobe-wide actions.\n\nIf using the universal navigation pattern, follow guidance defined in the design and implementation for continuity across products. Here are some guidelines to keep in mind as you define accessible names in the app frame:"
-    },
     {
       "type": "guideline",
       "content": "D. Adobe-wide actions.\n\nIf using the universal navigation pattern, follow guidance defined in the design and implementation for continuity across products."
     },
     {
       "type": "guideline",
-      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Learn more about landmark regions. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame:"
-    },
-    {
-      "type": "guideline",
-      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame: Image: Diagram showing landmark regions of the app frame, including Navigation (Global), Banner, Navigation (Side), and Region, in which the name is descriptive of the content. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1eef1503193f9c071e33d7e4dcc7364d3fc831e1a.png?width=750&format=png&optimize=medium) Note that you may also want to include additional landmark regions for content within each area. A. The navigation areas require accessible names, because there is more than one area on the page. Depending on your content, the accessible names might be different for your product. B. Regions always require accessible names, and should be named based on the content of the region. If using content areas split into additional areas, make sure to name those regions as well. Note: In some cases, landmarks might be better defined as a complementary landmark instead of a region landmark. For example, the AI assistant in Digital Experience products is separate from the main content (not contained within another landmark), but is still supportive of the main content. In that case, the AI assistant would be a complementary landmark instead of a region landmark."
-    },
-    {
-      "type": "guideline",
-      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. Learn more about heading annotations. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen:"
-    },
-    {
-      "type": "guideline",
-      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen: Image: Example of heading annotations for Photoshop. H1, Welcome to Photoshop content area. H2, Start something new content area. H3, cards with marketing and user-customized content suggestions. H4, Favorites section in side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f1c24c6a47078ee2e72f275cf116314df0e31178.png?width=750&format=png&optimize=medium)"
-    },
-    {
-      "type": "guideline",
-      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Learn more about keyboard focus order. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame:"
+      "content": "Landmark regions create a programmatic identification of the visual areas or sections of web applications, which represent the spatial layout of the user interface. The purpose of annotating landmark regions is to ensure developers code the page structure correctly, include the correct content in the defined grouping, and apply an accessible name to the landmark regions that require them. Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame: Image: Diagram showing landmark regions of the app frame, including Navigation (Global), Banner, Navigation (Side), and Region, in which the name is descriptive of the content. (source: https://spectrum.adobe.com/foundations/app-frame/media_1eef1503193f9c071e33d7e4dcc7364d3fc831e1a.png?width=750&format=png&optimize=medium) Note that you may also want to include additional landmark regions for content within each area. A. The navigation areas require accessible names, because there is more than one area on the page. Depending on your content, the accessible names might be different for your product. B. Regions always require accessible names, and should be named based on the content of the region. If using content areas split into additional areas, make sure to name those regions as well. Note: In some cases, landmarks might be better defined as a complementary landmark instead of a region landmark. For example, the AI assistant in Digital Experience products is separate from the main content (not contained within another landmark), but is still supportive of the main content. In that case, the AI assistant would be a complementary landmark instead of a region landmark."
     },
     {
       "type": "guideline",
-      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame: Image: Example of a keyboard focus order for Photoshop, with an order from 1 as the side navigation show/hide affordance, and 22 as the filter for recent files. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16b5e54f6ed6dd1b100303107eaeddc8409567f03.png?width=750&format=png&optimize=medium)"
+      "content": "Heading annotations describe the heading structure of a digital interface and are helpful for all users. Screen reader users in particular rely on them to navigate an interface. They organize information, help create an information hierarchy, and build a mental map of the content available. There must be one <h1> heading, and any text that serves the purpose of a heading must be marked accordingly from <h1> to <h6>. Because headings rely greatly on structure and content, they will likely vary depending on the page. As a general rule, the <h1> should live in the main landmark region. Here’s an example of how you might structure heading annotations for this screen: Image: Example of heading annotations for Photoshop. H1, Welcome to Photoshop content area. H2, Start something new content area. H3, cards with marketing and user-customized content suggestions. H4, Favorites section in side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_1f1c24c6a47078ee2e72f275cf116314df0e31178.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Support keyboard focus for resizing the side navigation.\n\nExample of correct usage, support for keyboard focus for size navigation. The side navigation width is focusable and resizable by using the left and right arrow keys. Image: Unlabeled image (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_15add197e527eb49a7a8f89286b990a582769f5f3.png?width=750&format=png&optimize=medium)"
+      "content": "The keyboard focus order describes how someone who uses a keyboard to operate the interface (instead of a pointing device like a mouse), would interact with an interface. Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame: Image: Example of a keyboard focus order for Photoshop, with an order from 1 as the side navigation show/hide affordance, and 22 as the filter for recent files. (source: https://spectrum.adobe.com/foundations/app-frame/media_16b5e54f6ed6dd1b100303107eaeddc8409567f03.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Include a “Skip to main content” button.\n\nExample of correct usage, inclusion of a Skip to main content button within the app frame header. Image: Example of correct usage, inclusion of a Skip to main content button within the app frame header. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1727ff3b9a578166d4a5e3067f54d9ff2b404b80c.png?width=750&format=png&optimize=medium)"
+      "content": "Support keyboard focus for resizing the side navigation.\n\nExample of correct usage, support for keyboard focus for size navigation. The side navigation width is focusable and resizable by using the left and right arrow keys. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/app-frame/media_15add197e527eb49a7a8f89286b990a582769f5f3.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. For more information about F6 key navigation, please refer to the Digital Accessibility Guide: Design a11y checklist. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
+      "content": "Include a “Skip to main content” button.\n\nExample of correct usage, inclusion of a Skip to main content button within the app frame header. Image: Example of correct usage, inclusion of a Skip to main content button within the app frame header. (source: https://spectrum.adobe.com/foundations/app-frame/media_1727ff3b9a578166d4a5e3067f54d9ff2b404b80c.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
+      "content": "Support F6 key navigation.\n\nWhen properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal. Here are some key quality factors to consider: A keyboard focus indicator should be present to show keyboard-only users their current location within the interface. Ideally, the focus of the F6 key should move in accordance with the landmark regions defined in the HTML of the application. Major sections of the app should be accessible through the F6 key, including main navigation, toolbars, contextual toolbars, and the canvas. Each of these regions must have an accessible name assigned to them, allowing screen reader users to understand which area of the user interface they are currently navigating. Image: Example of correct usage, support for F6 key navigation. This helps users traverse through different regions of an application efficiently. (source: https://spectrum.adobe.com/foundations/app-frame/media_1d708d40a17766cb37e6d7ff737079982577b079b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Mobile overlay guidance: Keyboard focus.\n\nFor mobile breakpoints, a tray is used to open and close the app frame side navigation. In this example, the keyboard focus order starts at the “Create” button and ends at the close button. Clicking on esc should also close the tray. Image: Example of a keyboard focus order for the mobile overlay, with an order from 1 as the create button, 2 as the side navigation items, and 3 the close button. Note that the `esc` should also close the tray. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1c0739f2368c9914995fd166d727db38aa907b244.png?width=750&format=png&optimize=medium)"
+      "content": "Mobile overlay guidance: Keyboard focus.\n\nFor mobile breakpoints, a tray is used to open and close the app frame side navigation. In this example, the keyboard focus order starts at the “Create” button and ends at the close button. Clicking on esc should also close the tray. Image: Example of a keyboard focus order for the mobile overlay, with an order from 1 as the create button, 2 as the side navigation items, and 3 the close button. Note that the `esc` should also close the tray. (source: https://spectrum.adobe.com/foundations/app-frame/media_1c0739f2368c9914995fd166d727db38aa907b244.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [

package/guidelines/design-tokens.json

@@ -10,6 +10,10 @@
       "type": "guideline",
       "content": "Design tokens enable alignment, automation, learnability, and multi-platform fidelity, resulting in high-quality experiences and efficient system management. By defining design decisions once and reusing them consistently, tokens create a shared foundation that helps maintain a common design language across teams, tools, products, and platforms. This allows experiences to adapt to different implementation needs while preserving the intent of the design language."
     },
+    {
+      "type": "guideline",
+      "content": "Spectrum design tokens follow three core principles. Image: Stylized 3D icon of an eye with a peach-orange gradient, featuring a simplified almond-shaped outline and a comma-shaped iris, on a soft white background. (source: https://spectrum.adobe.com/foundations/design-data/media_140076ee4f57925def9ca2b4328ba49def5e3262b.png?width=750&format=png&optimize=medium) Image: Stylized 3D icon of a curved S-shaped ribbon with rounded, flared ends, in a pink-to-purple gradient, on a soft white background. (source: https://spectrum.adobe.com/foundations/design-data/media_1a708190100c5bb32bfcf5424787034563655c4bd.png?width=750&format=png&optimize=medium) Image: Stylized 3D icon of a graduation cap with a blue gradient, rendered with soft rounded edges and a tassel hanging from one corner, on a soft white background. (source: https://spectrum.adobe.com/foundations/design-data/media_16d9fc083f6378798d3114f10f579387c88e02000.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Clear.\n\nDesign tokens are created within a well-defined scope, purpose, and meaning so they remain understandable and accurately represent the design language."
@@ -24,7 +28,11 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum uses tokens as a shared foundation for expressing and reusing design decisions throughout the design system. Rather than representing every possible design scenario, the token system focuses on reusable decisions that support many structures, components, products, and experiences Spectrum also prioritizes semantic design decisions over direct values whenever possible. By expressing intent rather than implementation details, tokens become easier to understand, easier to reuse, and more resilient to change over time. Design tokens work together with component libraries, implementation frameworks, documentation, and other Spectrum resources to help maintain a cohesive design language across products and platforms. While tokens capture many design decisions, they are only one part of the broader system used to design, document, and implement Spectrum experiences. Image: Nested concentric semicircle diagram illustrating a design system hierarchy, with \"Products\" as the outermost layer, \"Platform components\" in the middle, and \"Tokens\" at the innermost core, rendered in purple gradient tones. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1c3063afa864ec179a458d95d51558937b4bc43ed.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum uses tokens as a shared foundation for expressing and reusing design decisions throughout the design system. Rather than representing every possible design scenario, the token system focuses on reusable decisions that support many structures, components, products, and experiences Spectrum also prioritizes semantic design decisions over direct values whenever possible. By expressing intent rather than implementation details, tokens become easier to understand, easier to reuse, and more resilient to change over time. Design tokens work together with component libraries, implementation frameworks, documentation, and other Spectrum resources to help maintain a cohesive design language across products and platforms. While tokens capture many design decisions, they are only one part of the broader system used to design, document, and implement Spectrum experiences. Image: Nested concentric semicircle diagram illustrating a design system hierarchy, with \"Products\" as the outermost layer, \"Platform components\" in the middle, and \"Tokens\" at the innermost core, rendered in purple gradient tones. (source: https://spectrum.adobe.com/foundations/design-data/media_1c3063afa864ec179a458d95d51558937b4bc43ed.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Understanding a few foundational concepts makes design tokens easier to read, discuss, and use."
     },
     {
       "type": "guideline",
@@ -32,7 +40,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Code snippet showing a JSON token definition for \"accent-content-color-default,\" including its schema reference, a value pointing to \"{accent-color-900},\" and a UUID. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_180c6be1720908c84590aced0e4ea46ec42d8c386.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Code snippet showing a JSON token definition for \"accent-content-color-default,\" including its schema reference, a value pointing to \"{accent-color-900},\" and a UUID. (source: https://spectrum.adobe.com/foundations/design-data/media_180c6be1720908c84590aced0e4ea46ec42d8c386.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -40,7 +48,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Three example design tokens labeled \"Token name,\" each pointing to a specific token: a blue color swatch named \"blue-900\" with value rgb(59, 99, 251); a ruler icon for \"base-padding-vertical-large\" with value 10px; and a font icon for \"sans-serif-font-family\" with value \"Adobe Clean Spectrum VF.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_16849d171f58f0ed54185afd8a10028da399cd46c.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Three example design tokens labeled \"Token name,\" each pointing to a specific token: a blue color swatch named \"blue-900\" with value rgb(59, 99, 251); a ruler icon for \"base-padding-vertical-large\" with value 10px; and a font icon for \"sans-serif-font-family\" with value \"Adobe Clean Spectrum VF.\" (source: https://spectrum.adobe.com/foundations/design-data/media_16849d171f58f0ed54185afd8a10028da399cd46c.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -48,7 +56,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Three tokens—\"blue-900\" (rgb(59, 99, 251)), \"base-padding-vertical-large\" (10px), and \"sans-serif-font-family\" (Adobe Clean Spectrum VF)—each with their resolved output highlighted and labeled \"Value.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_18b43d82026c0f02530b5ce62978951a800a60d4c.png?width=750&format=png&optimize=medium).\n\nToken nameValue blue-900 rgb(59, 99, 251) spacing-100 8px container-padding-medium spacing-300"
+      "content": "Image: Three tokens—\"blue-900\" (rgb(59, 99, 251)), \"base-padding-vertical-large\" (10px), and \"sans-serif-font-family\" (Adobe Clean Spectrum VF)—each with their resolved output highlighted and labeled \"Value.\" (source: https://spectrum.adobe.com/foundations/design-data/media_18b43d82026c0f02530b5ce62978951a800a60d4c.png?width=750&format=png&optimize=medium).\n\nToken name Value blue-900 rgb(59, 99, 251) spacing-100 8px container-padding-medium spacing-300"
     },
     {
       "type": "guideline",
@@ -56,7 +64,11 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram showing a token aliasing chain: the base color token \"blue-900\" ( #3B63FB) flows down through an alias called \"accent-color-900,\" which in turn flows into a further alias called \"accent-content-color-default.\" (source: https://preview.spectrum.adobe.com/foundations/design-data/media_11cea602f9ef5940fc07648edb357982ec8e90c5f.png?width=750&format=png&optimize=medium).\n\nToken nameValue (alias) accent-content-color-default accent-color-900"
+      "content": "Image: Diagram showing a token aliasing chain: the base color token \"blue-900\" ( #3B63FB) flows down through an alias called \"accent-color-900,\" which in turn flows into a further alias called \"accent-content-color-default.\" (source: https://spectrum.adobe.com/foundations/design-data/media_11cea602f9ef5940fc07648edb357982ec8e90c5f.png?width=750&format=png&optimize=medium).\n\nToken name Value (alias) accent-content-color-default accent-color-900"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum uses multiple token tiers to represent design decisions at different levels of abstraction. Each tier serves a different purpose, and together they create a flexible system that supports both reuse and adaptation."
     },
     {
       "type": "guideline",
@@ -64,7 +76,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Two token scales side by side: a vertical blue color ramp from light to dark labeled \"blue-900\" at its mid-dark point, and a vertical spacing scale of gray squares increasing in size labeled \"spacing-400\" at a mid-sized square. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_179482299e81daea4dfee0b8609e53447561d4bbb.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Two token scales side by side: a vertical blue color ramp from light to dark labeled \"blue-900\" at its mid-dark point, and a vertical spacing scale of gray squares increasing in size labeled \"spacing-400\" at a mid-sized square. (source: https://spectrum.adobe.com/foundations/design-data/media_179482299e81daea4dfee0b8609e53447561d4bbb.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -72,7 +84,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram showing the token \"accent-content-color-default\" branching out to five UI examples that use it: a radio button label, a checkbox label, a toggle switch label, a hyperlink, and a menu item checkmark—all rendered in the same blue. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1dc05f4cd2a0071e6256b9da67fd14f92340485e7.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Diagram showing the token \"accent-content-color-default\" branching out to five UI examples that use it: a radio button label, a checkbox label, a toggle switch label, a hyperlink, and a menu item checkmark—all rendered in the same blue. (source: https://spectrum.adobe.com/foundations/design-data/media_1dc05f4cd2a0071e6256b9da67fd14f92340485e7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -80,7 +92,11 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Design decisions are most valuable when they can be reused. Rather than organizing decisions around individual components, Spectrum organizes many design decisions around semantic meaning and reusable structures. Together, these concepts help create a shared language that is easier to understand, reuse, and scale across products and platforms. Image: Diagram connecting the token \"positive-background-color-default\" (green) to a green toast notification example reading \"Toast message describing what happened,\" which in turn branches out to four reusable spacing tokens: banner-padding-vertical, banner-padding-horizontal, banner-padding-horizontal-compact, and banner-gap-horizontal. (source: https://spectrum.adobe.com/foundations/design-data/media_12317944fcdcd3d94db4c7d4e9d74465e032ba123.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -88,7 +104,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram grouping UI examples by feedback type: \"Positive\" links to a green \"Approved\" tag and a password field with a matching-passwords confirmation; \"Negative\" links to a red \"Rejected\" tag and a password field showing a \"Passwords do not match\" error with a red tooltip; \"Informative\" links to a blue \"Active\" tag and a blue tooltip. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1492d46785f384e217b76912d774fa3f5b96d6b28.png?width=750&format=png&optimize=medium).\n\nMeaning helps people understand not only how an interface looks, but what it is trying to convey. By expressing meaning directly in token names, decisions become easier to understand, reuse, and apply consistently across products and platforms."
+      "content": "Image: Diagram grouping UI examples by feedback type: \"Positive\" links to a green \"Approved\" tag and a password field with a matching-passwords confirmation; \"Negative\" links to a red \"Rejected\" tag and a password field showing a \"Passwords do not match\" error with a red tooltip; \"Informative\" links to a blue \"Active\" tag and a blue tooltip. (source: https://spectrum.adobe.com/foundations/design-data/media_1492d46785f384e217b76912d774fa3f5b96d6b28.png?width=750&format=png&optimize=medium).\n\nMeaning helps people understand not only how an interface looks, but what it is trying to convey. By expressing meaning directly in token names, decisions become easier to understand, reuse, and apply consistently across products and platforms."
     },
     {
       "type": "guideline",
@@ -96,19 +112,23 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram grouping UI components by structure type: \"Base\" links to individual elements like an \"Approved\" tag, a value field, a delete button, a list item, and a stepper; \"Group\" links to sets of related elements like paired radio buttons, toggles, and stacked checkboxes. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_129333dbe5f3c9919f4aa947c23a26c2453169a48.png?width=750&format=png&optimize=medium).\n\nTo improve reuse and consistency, Spectrum organizes many of these decisions around recurring interface structures. These reusable structures are abstract concepts that describe common UI patterns. They are not specific components or implementation types. Instead, they provide a shared framework for organizing design decisions that can be reused across many different components, products, and technologies. Because these structures represent patterns rather than implementations, they help create design decisions that are more reusable, predictable, and easier to understand. Some structures may closely resemble familiar interface concepts, but they remain independent of any specific platform or implementation. These structures help answer “Where does this design decision apply?” Common structures include: Structure Description BaseThe primary functional element within a structureAccessoryA supporting element associated with another structureGroupA collection of related elementsListA sequence of repeated itemsContainerA structure that organizes contentBannerA structure used for prominent messagingThese structures help answer “Where does this design decision apply?”"
+      "content": "Image: Diagram grouping UI components by structure type: \"Base\" links to individual elements like an \"Approved\" tag, a value field, a delete button, a list item, and a stepper; \"Group\" links to sets of related elements like paired radio buttons, toggles, and stacked checkboxes. (source: https://spectrum.adobe.com/foundations/design-data/media_129333dbe5f3c9919f4aa947c23a26c2453169a48.png?width=750&format=png&optimize=medium).\n\nTo improve reuse and consistency, Spectrum organizes many of these decisions around recurring interface structures. These reusable structures are abstract concepts that describe common UI patterns. They are not specific components or implementation types. Instead, they provide a shared framework for organizing design decisions that can be reused across many different components, products, and technologies. Because these structures represent patterns rather than implementations, they help create design decisions that are more reusable, predictable, and easier to understand. Some structures may closely resemble familiar interface concepts, but they remain independent of any specific platform or implementation. These structures help answer “Where does this design decision apply?” Common structures include: Structure Description Base The primary functional element within a structure Accessory A supporting element associated with another structure Group A collection of related elements List A sequence of repeated items Container A structure that organizes content Banner A structure used for prominent messaging These structures help answer “Where does this design decision apply?”"
     },
     {
       "type": "guideline",
-      "content": "Components are often composed from one or more reusable structures. Rather than creating unique design decisions for every component, Spectrum reuses decisions across common patterns that appear throughout the system. This approach allows many components to share the same underlying design language while adapting to different contexts and use cases. Platform implementations combine these reusable structures with platform-specific requirements, interaction patterns, accessibility considerations, and implementation constraints to create complete component experiences. By reusing tokens, structures, and components, teams can build cohesive experiences without redefining the same decisions in every implementation. As a result, decisions become more reusable, components become more modular, and the system becomes easier to learn, maintain, and evolve. Image: Diagram showing how reusable structures combine into compositions and then components: a \"Base\" structure and a \"List item\" structure each flow into composition examples with labels, descriptions, and toggles, which then combine into a finished \"Menu item\" component with a value and toggle. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_19eceefe7f3c359ba6f591936e3bf009582d70ea1.png?width=750&format=png&optimize=medium)"
+      "content": "Components are often composed from one or more reusable structures. Rather than creating unique design decisions for every component, Spectrum reuses decisions across common patterns that appear throughout the system. This approach allows many components to share the same underlying design language while adapting to different contexts and use cases. Platform implementations combine these reusable structures with platform-specific requirements, interaction patterns, accessibility considerations, and implementation constraints to create complete component experiences. By reusing tokens, structures, and components, teams can build cohesive experiences without redefining the same decisions in every implementation. As a result, decisions become more reusable, components become more modular, and the system becomes easier to learn, maintain, and evolve. Image: Diagram showing how reusable structures combine into compositions and then components: a \"Base\" structure and a \"List item\" structure each flow into composition examples with labels, descriptions, and toggles, which then combine into a finished \"Menu item\" component with a value and toggle. (source: https://spectrum.adobe.com/foundations/design-data/media_19eceefe7f3c359ba6f591936e3bf009582d70ea1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Positive color 600.\n\nThe name identifies: what’s being communicated (positive) which option is used (600) Together they represent a specific color decision. Image: Diagram breaking down the token name \"accent-background-color-hover,\" with callouts showing that \"accent\" indicates what's communicated, \"background-color\" indicates what it affects, and \"hover\" indicates when it applies, next to a blue color swatch. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_138f950047d55d3e1a89f6f1cbd0b22558cab1ca2.png?width=750&format=png&optimize=medium)"
+      "content": "Token names are designed to communicate the purpose of a design decision. Reading a token name from left to right reveals progressively more specific context about how that decision should be used. Names communicate information from broad concepts toward more specific details. Image: Diagram breaking down the token name \"positive-color-600,\" with callouts showing that \"positive\" indicates what's communicated and \"600\" indicates which color option is used, next to a green color swatch. (source: https://spectrum.adobe.com/foundations/design-data/media_1d58375a6ae7a9f1fc730f649f485123c2614161a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Accent background color hover.\n\nThe name identifies: what’s being communicated (accent) what it affects (background-color) when it applies (hover) Together they describe the background color used when an accentuated interface element is hovered. Image: Diagram breaking down the token name \"base-padding-vertical-small,\" with callouts showing that \"base\" indicates where it applies, \"padding-vertical\" indicates what it affects, and \"small\" indicates which option is used. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1a19e41620a76ada5ceae2dbb74a4778609a34e35.png?width=750&format=png&optimize=medium)"
+      "content": "Positive color 600.\n\nThe name identifies: what’s being communicated (positive) which option is used (600) Together they represent a specific color decision. Image: Diagram breaking down the token name \"accent-background-color-hover,\" with callouts showing that \"accent\" indicates what's communicated, \"background-color\" indicates what it affects, and \"hover\" indicates when it applies, next to a blue color swatch. (source: https://spectrum.adobe.com/foundations/design-data/media_138f950047d55d3e1a89f6f1cbd0b22558cab1ca2.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Accent background color hover.\n\nThe name identifies: what’s being communicated (accent) what it affects (background-color) when it applies (hover) Together they describe the background color used when an accentuated interface element is hovered. Image: Diagram breaking down the token name \"base-padding-vertical-small,\" with callouts showing that \"base\" indicates where it applies, \"padding-vertical\" indicates what it affects, and \"small\" indicates which option is used. (source: https://spectrum.adobe.com/foundations/design-data/media_1a19e41620a76ada5ceae2dbb74a4778609a34e35.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -116,19 +136,27 @@
     },
     {
       "type": "guideline",
-      "content": "Start with Spectrum components.\n\nWhenever possible, use your platform's Spectrum components before working directly with design tokens. Components bring together design decisions, behavior, accessibility, and implementation guidance into reusable solutions that are already aligned with the Spectrum design language. Design tokens provide the foundation that supports those solutions. When existing components don't meet your needs, tokens can help you extend, compose, or create experiences that remain consistent with Spectrum. Image: Diagram tracing the token \"Spectrum Button\" to a purple-to-blue gradient \"Upgrade\" button with a crown icon, and further down to a plain rounded rectangle in the same gradient with no label. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1fe9a6362a1479a1f5959aced7df1ca13884e86b1.png?width=750&format=png&optimize=medium)"
+      "content": "Design tokens are intended to make design decisions easier to find, understand, and apply consistently. The following guidelines can help you choose appropriate tokens, avoid common mistakes, and build experiences that remain aligned with the broader Spectrum design language."
+    },
+    {
+      "type": "guideline",
+      "content": "Start with Spectrum components.\n\nWhenever possible, use your platform's Spectrum components before working directly with design tokens. Components bring together design decisions, behavior, accessibility, and implementation guidance into reusable solutions that are already aligned with the Spectrum design language. Design tokens provide the foundation that supports those solutions. When existing components don't meet your needs, tokens can help you extend, compose, or create experiences that remain consistent with Spectrum. Image: Diagram tracing the token \"Spectrum Button\" to a purple-to-blue gradient \"Upgrade\" button with a crown icon, and further down to a plain rounded rectangle in the same gradient with no label. (source: https://spectrum.adobe.com/foundations/design-data/media_1fe9a6362a1479a1f5959aced7df1ca13884e86b1.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Prioritize semantic tokens.\n\nStart with semantic tokens whenever possible. They communicate intent and context, making design decisions easier to understand, reuse, and maintain over time. Image: Diagram connecting the token \"background-layer-2-color\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://spectrum.adobe.com/foundations/design-data/media_1b62af86b141ebe7a61e41687f36c25c542915749.png?width=750&format=png&optimize=medium) Image: Diagram connecting the token \"gray-25\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://spectrum.adobe.com/foundations/design-data/media_1c851b0861fdf571ce6a19a98cbca1ef0be7c5f48.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Prioritize semantic tokens.\n\nStart with semantic tokens whenever possible. They communicate intent and context, making design decisions easier to understand, reuse, and maintain over time. Image: Diagram connecting the token \"background-layer-2-color\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1b62af86b141ebe7a61e41687f36c25c542915749.png?width=750&format=png&optimize=medium)Image: Diagram connecting the token \"gray-25\" to the light gray toolbar background of a Photoshop-style document window, showing a hamburger menu, the Photoshop app icon, \"Document\" text, and a cloud icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1c851b0861fdf571ce6a19a98cbca1ef0be7c5f48.png?width=750&format=png&optimize=medium)"
+      "content": "Use primitive tokens only when necessary.\n\nPrimitive tokens define important building blocks of the design language but contain less contextual meaning. Use them only when no appropriate semantic decision exists. Image: Diagram connecting the token \"static-fuchsia-900,\" shown as a purple circle swatch, to a purple-to-blue gradient \"Upgrade\" button with a crown icon. (source: https://spectrum.adobe.com/foundations/design-data/media_1ddaad670f23bdc8178d3642bf345d2c4bb13737a.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use primitive tokens only when necessary.\n\nPrimitive tokens define important building blocks of the design language but contain less contextual meaning. Use them only when no appropriate semantic decision exists. Image: Diagram connecting the token \"static-fuchsia-900,\" shown as a purple circle swatch, to a purple-to-blue gradient \"Upgrade\" button with a crown icon. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1ddaad670f23bdc8178d3642bf345d2c4bb13737a.png?width=750&format=png&optimize=medium)"
+      "content": "Use component-specific tokens only for their intended component.\n\nComponent-specific tokens are intentionally limited. Use them only for their intended component or implementation and avoid reusing them as general-purpose design decisions. Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium) Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two colorful gradient card components, each with a card title and description. (source: https://spectrum.adobe.com/foundations/design-data/media_111549edcd66a118c25888112eb46457758a1d42d.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use component-specific tokens only for their intended component.\n\nComponent-specific tokens are intentionally limited. Use them only for their intended component or implementation and avoid reusing them as general-purpose design decisions. Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two radio button labels in a UI example. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1de0d50e78fdc61dfc5ba6ac5e78ab4db2ea9bbdf.png?width=750&format=png&optimize=medium)Image: Diagram showing the token \"tab-gap-horizontal-medium\" pointing to the pink-highlighted gap between two colorful gradient card components, each with a card title and description. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_111549edcd66a118c25888112eb46457758a1d42d.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum supports many products and platforms, each with different requirements. As the token system evolves, Spectrum is establishing a shared foundation of reusable design decisions that can support platform-specific adaptation while maintaining a common design language."
     },
     {
       "type": "guideline",
@@ -140,10 +168,10 @@
     },
     {
       "type": "guideline",
-      "content": "Shared language, flexible implementation.\n\nNot every platform needs every foundational token, and token values may differ between platforms to support differences in sizing, density, theming, or platform capabilities. Even when implementations differ, they remain rooted in the same taxonomy, terminology, and design language. Image: Diagram illustrating a design system's flexible structure: a purple diamond labeled \"Spectrum Foundations\" and a green pentagon labeled \"Platform\" combine under \"Flexible implementation,\" where the shapes overlap with dashed red gaps highlighted, resulting in \"Spectrum Platform\" — a purple pentagon that fully fills the green pentagon's shape. (source: https://preview.spectrum.adobe.com/foundations/design-data/media_1098f8070212b263e4d2aaeae48257cb8a3c74623.png?width=750&format=png&optimize=medium)Design data can be re-shaped to fit platform needs while maintaining system cohesion."
+      "content": "Shared language, flexible implementation.\n\nNot every platform needs every foundational token, and token values may differ between platforms to support differences in sizing, density, theming, or platform capabilities. Even when implementations differ, they remain rooted in the same taxonomy, terminology, and design language. Image: Diagram illustrating a design system's flexible structure: a purple diamond labeled \"Spectrum Foundations\" and a green pentagon labeled \"Platform\" combine under \"Flexible implementation,\" where the shapes overlap with dashed red gaps highlighted, resulting in \"Spectrum Platform\" — a purple pentagon that fully fills the green pentagon's shape. (source: https://spectrum.adobe.com/foundations/design-data/media_1098f8070212b263e4d2aaeae48257cb8a3c74623.png?width=750&format=png&optimize=medium) Design data can be re-shaped to fit platform needs while maintaining system cohesion."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/design-data/design-tokens",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/design-data/design-tokens",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

package/guidelines/developer-overview.json

@@ -6,6 +6,10 @@
   "category": "developing",
   "documentBlocks": [
     { "type": "purpose", "content": "Developer overview" },
+    {
+      "type": "guideline",
+      "content": "Spectrum 2 is available for web-based Spectrum implementations before other platforms like desktop or mobile. There are two primary implementations of Spectrum for web: React Spectrum (RSP) and Spectrum Web Components (SWC). Both of these implementations currently support Spectrum 2 in some form."
+    },
     {
       "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."
@@ -18,6 +22,10 @@
       "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."
     },
+    {
+      "type": "guideline",
+      "content": "Mobile support for Spectrum 2 is currently in progress on both Spectrum iOS and Spectrum Android."
+    },
     {
       "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."

package/guidelines/drop-shadow.json

@@ -6,6 +6,10 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Drop shadow" },
+    {
+      "type": "guideline",
+      "content": "Image: An orange rounded diamond outline with a faint reflection beneath it, illustrating how drop shadow creates a sense of elevation above the surface. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1fd2551bf64f7d1ba1e4a78bccbfab61dfe691906.png?width=750&format=png&optimize=medium) Image: A 2x2 grid of rounded square icons where the bottom-left square is highlighted with a purple gradient and stronger shadow, illustrating how drop shadow supports visual emphasis. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_15bd648d872cc9d7f466b226213858ea74155a8e0.png?width=750&format=png&optimize=medium)"
+    },
     {
       "type": "guideline",
       "content": "Create elevation.\n\nUse drop shadows to indicate when content appears above other content. Shadows help establish spatial relationships between interface elements and reinforce the visual hierarchy of the interface."
@@ -14,10 +18,14 @@
       "type": "guideline",
       "content": "Support emphasis.\n\nDrop shadows can also be used to emphasize important interface elements. When applied sparingly, they help guide attention while maintaining a clear and consistent visual hierarchy."
     },
+    {
+      "type": "guideline",
+      "content": "Drop shadows are most commonly used when content appears above other content, such as popovers and floating panels. They can also emphasize important interface elements, helping maintain a clear visual hierarchy and consistent sense of depth. Each shadow style is intended for a specific visual purpose. Image: Four rounded white squares numbered 1 through 4 with progressively larger and softer drop shadows, illustrating a scale of shadow depth values. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1eb322c7f4517cac9f255fac8142ee3406aaa4637.png?width=750&format=png&optimize=medium) Emphasized, default In certain situations, drop shadows can also be used to provide emphasis to containers within a page. When used appropriately, content that requires more attention will visually stand out, as if it’s slightly elevated or above other content. Emphasized, hover If a whole container is interactive, such as in a select box, the drop shadow becomes emphasized-hover on hover. Elevated Containers that appear on top of content, such as menus and tooltips, have drop shadows to show elevation. Dragged Containers don't use drop shadows by default. When a container is dragged, a drop shadow is applied to indicate that it has been lifted above the interface. This behavior applies to both default and emphasized containers."
+    },
     { "type": "guideline", "content": "Drop shadow details" },
     {
       "type": "guideline",
-      "content": "Image: A stack of three rounded diamond shapes labeled 1, 2, and 3, illustrating the layered composition of a drop shadow effect. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1e55ad9fc6b8cfceff097a32b46183149d33d9353.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A stack of three rounded diamond shapes labeled 1, 2, and 3, illustrating the layered composition of a drop shadow effect. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1e55ad9fc6b8cfceff097a32b46183149d33d9353.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -25,7 +33,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: A dark-theme context menu titled \"Publish and export\" with options for Quick export, Open a copy, and Share link, showing a submenu with Illustrator for iPad and Illustrator desktop, each panel using shadow to convey layering. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_1a3fef3a1425a17547ec0a976a66ac1b4fbf475bd.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A dark-theme context menu titled \"Publish and export\" with options for Quick export, Open a copy, and Share link, showing a submenu with Illustrator for iPad and Illustrator desktop, each panel using shadow to convey layering. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_1a3fef3a1425a17547ec0a976a66ac1b4fbf475bd.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -33,7 +41,7 @@
     },
     {
       "type": "guideline",
-      "content": "Image: A card UI with an image header and placeholder text lines, shown with a drop shadow against a gray background to illustrate shadow overlay on a light surface. (source: https://preview.spectrum.adobe.com/foundations/styles/object-styles/media_16e79c0908d8d8b02aeb26adfa231019beaac6661.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A card UI with an image header and placeholder text lines, shown with a drop shadow against a gray background to illustrate shadow overlay on a light surface. (source: https://spectrum.adobe.com/foundations/styles/object-styles/media_16e79c0908d8d8b02aeb26adfa231019beaac6661.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -45,14 +53,14 @@
     },
     {
       "type": "guideline",
-      "content": "Shadow styles.\n\nEach shadow style is represented by a single composite token that defines the key, transition, and ambient shadow layers used to create the final drop shadow. The table below lists the values for each shadow layer: X: Horizontal offset. 0 px for all layers. Y: Vertical offset. The ambient shadow uses the largest offset. Blur: Blur radius. Each layer uses a different value to create a smooth transition between the shadow layers. Spread: Spread value. 0 px for all layers. Shadow styleTokenKey valuesTransition valuesAmbient valuesEmphasized, defaultdrop-shadow-emphasizedX = 0 Y = 0 Blur = 1 Spread = 0X = 0 Y = 1 Blur = 4 Spread = 0X = 0 Y = 2 Blur = 8 Spread = 0Emphasized, hoverdrop-shadow-emphasized-hoverX = 0 Y = 0 Blur = 2 Spread = 0X = 0 Y = 2 Blur = 6 Spread = 0X = 0 Y = 4 Blur = 12 Spread = 0Elevateddrop-shadow-elevatedX = 0 Y = 0 Blur = 2 Spread = 0X = 0 Y = 2 Blur = 6 Spread = 0X = 0 Y = 4 Blur = 12 Spread = 0Draggeddrop-shadow-draggedX = 0 Y = 0 Blur = 6 Spread = 0X = 0 Y = 6 Blur = 8 Spread = 0X = 0 Y = 12 Blur = 16 Spread = 0"
+      "content": "Shadow styles.\n\nEach shadow style is represented by a single composite token that defines the key, transition, and ambient shadow layers used to create the final drop shadow. The table below lists the values for each shadow layer: X: Horizontal offset. 0 px for all layers. Y: Vertical offset. The ambient shadow uses the largest offset. Blur: Blur radius. Each layer uses a different value to create a smooth transition between the shadow layers. Spread: Spread value. 0 px for all layers. Shadow style Token Key values Transition values Ambient values Emphasized, default drop-shadow-emphasized X = 0 Y = 0 Blur = 1 Spread = 0 X = 0 Y = 1 Blur = 4 Spread = 0 X = 0 Y = 2 Blur = 8 Spread = 0 Emphasized, hover drop-shadow-emphasized-hover X = 0 Y = 0 Blur = 2 Spread = 0 X = 0 Y = 2 Blur = 6 Spread = 0 X = 0 Y = 4 Blur = 12 Spread = 0 Elevated drop-shadow-elevated X = 0 Y = 0 Blur = 2 Spread = 0 X = 0 Y = 2 Blur = 6 Spread = 0 X = 0 Y = 4 Blur = 12 Spread = 0 Dragged drop-shadow-dragged X = 0 Y = 0 Blur = 6 Spread = 0 X = 0 Y = 6 Blur = 8 Spread = 0 X = 0 Y = 12 Blur = 16 Spread = 0"
     },
     {
       "type": "guideline",
-      "content": "Shadow colors.\n\nSpectrum drop shadows use black (#000000) as their base color. The perceived appearance of each shadow is created by varying its opacity and layering. In dark theme, the opacity value is 3× the opacity value of light theme. Shadow colorTokenOpacity valuesEmphasized (Key shadow) drop-shadow-emphasized-key-color 8% (light) 24% (dark)Emphasized, hover (Key shadow) drop-shadow-emphasized-hover-key-color 12% (light) 36% (dark)Elevated (Key shadow) drop-shadow-elevated-key-color 12% (light) 36% (dark)Dragged (Key shadow) drop-shadow-dragged-key-color 16% (light) 48% (dark)All styles (Ambient shadow) drop-shadow-ambient-color 8% (light) 24% (dark)All styles (Transition shadow) drop-shadow-transition-color 4% (light) 12% (dark)"
+      "content": "Shadow colors.\n\nSpectrum drop shadows use black (#000000) as their base color. The perceived appearance of each shadow is created by varying its opacity and layering. In dark theme, the opacity value is 3× the opacity value of light theme. Shadow color Token Opacity values Emphasized (Key shadow) drop-shadow-emphasized-key-color 8% (light) 24% (dark) Emphasized, hover (Key shadow) drop-shadow-emphasized-hover-key-color 12% (light) 36% (dark) Elevated (Key shadow) drop-shadow-elevated-key-color 12% (light) 36% (dark) Dragged (Key shadow) drop-shadow-dragged-key-color 16% (light) 48% (dark) All styles (Ambient shadow) drop-shadow-ambient-color 8% (light) 24% (dark) All styles (Transition shadow) drop-shadow-transition-color 4% (light) 12% (dark)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

package/guidelines/faqs.json

@@ -42,6 +42,10 @@
       "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": "Review our Developer overview page for detailed information about developing with Spectrum 2."
+    },
     {
       "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."

package/guidelines/fonts.json

@@ -6,6 +6,10 @@
   "category": "designing",
   "documentBlocks": [
     { "type": "purpose", "content": "Fonts" },
+    {
+      "type": "guideline",
+      "content": "For design, these fonts are pre-installed on Adobe’s enterprise Figma account. For implementation, look for these in Adobe Fonts (formerly Typekit). If neither of those options support your use case, these fonts are available for download here. View Using restricted Adobe fonts for more information."
+    },
     { "type": "guideline", "content": "Page last updated: July 31, 2026" },
     {
       "type": "guideline",
@@ -49,11 +53,11 @@
     },
     {
       "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."
+      "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."
     },
     {
       "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": "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."
     }
   ],
   "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/typography/fonts",