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

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

@@ -36,7 +36,7 @@
     },
     {
       "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: 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."
+      "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",
@@ -44,7 +44,7 @@
     },
     {
       "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:"
+      "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",
@@ -52,30 +52,30 @@
     },
     {
       "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:"
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/creating-bluelines-browsing-context",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/creating-bluelines-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [

package/guidelines/design-tokens.json

@@ -24,55 +24,91 @@
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
       "content": "Token.\n\nA reusable design decision represented as structured data. A token consists of a name and a value. Together, these define both the purpose of a design decision and the data used to implement it."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Token name.\n\nThe structured classification of a design use case. Token names are created using Spectrum's token taxonomy, which defines the categories, terminology, and ordering used to describe design decisions. This helps ensure that names remain predictable, scalable, and understandable across teams, tools, products, and platforms. Token names form a shared language that helps people and systems understand and apply design decisions consistently across tools, products, and platforms."
     },
     {
       "type": "guideline",
-      "content": "Value.\n\nThe data associated with a token. A value may be a final implementation value such as a color, dimension, percentage, or duration. A value can be dependent on context, such as light or dark color themes. It may also be a reference to another token through aliasing.\n\nToken nameValue blue-900 rgb(59, 99, 251) spacing-100 8px container-padding-medium spacing-300"
+      "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)"
+    },
+    {
+      "type": "guideline",
+      "content": "Value.\n\nThe data associated with a token. A value may be a final implementation value such as a color, dimension, percentage, or duration. A value can be dependent on context, such as light or dark color themes. It may also be a reference to another token through aliasing."
+    },
+    {
+      "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"
     },
     {
       "type": "guideline",
-      "content": "Alias.\n\nA token that references another token instead of a final value. Aliasing allows broad design decisions to be refined into more specific contexts and use cases while preserving consistency and reducing duplication. Each layer adds additional context without redefining the underlying value.\n\nToken nameValue (alias) accent-content-color-default accent-color-900"
+      "content": "Alias.\n\nA token that references another token instead of a final value. Aliasing allows broad design decisions to be refined into more specific contexts and use cases while preserving consistency and reducing duplication. Each layer adds additional context without redefining the underlying value."
+    },
+    {
+      "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"
     },
     {
       "type": "guideline",
       "content": "Primitive (aka Global) tokens.\n\nPrimitive tokens define the available values in the design language. They represent raw design values and generally communicate little or no information about how those values should be used. Examples: blue-800 gray-100 corner-radius-75 Primitive tokens provide the foundation for higher-level design decisions. Because they communicate values with no intent, they are typically used indirectly through semantic tokens as an alias."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Semantic tokens define how design decisions are used throughout the system. Rather than describing values directly, they communicate purpose, intent, structure, or application. Examples: accent-background-color-default negative-content-color-default container-padding-medium group-gap-small Semantic tokens help people understand: Why a decision exists Where it should be used How it relates to other design decisions Semantic tokens are the primary way consumers interact with Spectrum design tokens."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Component-specific tokens.\n\nComponent-specific tokens represent design decisions that apply to a specific component or implementation. Examples: tooltip-maximum-width divider-thickness-small Spectrum prioritizes reusable semantic decisions whenever possible, which reduces the need for component-specific tokens. However, some implementation-specific needs may still require decisions that are scoped to a particular component. For this reason, component-specific tokens may exist within Spectrum or individual platform implementations, but they play a much smaller role than reusable semantic tokens."
     },
     {
       "type": "guideline",
-      "content": "Meaning.\n\nEvery design decision serves a purpose. Some decisions communicate meaning, helping users understand status, emphasis, importance, or feedback. Examples include: accent-background-color-default negative-border-color-default negative-content-color-default positive-background-color-default These decisions describe what a design choice is intended to communicate.\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 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)"
+    },
+    {
+      "type": "guideline",
+      "content": "Meaning.\n\nEvery design decision serves a purpose. Some decisions communicate meaning, helping users understand status, emphasis, importance, or feedback. Examples include: accent-background-color-default negative-border-color-default negative-content-color-default positive-background-color-default These decisions describe what a design choice is intended to communicate."
+    },
+    {
+      "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Reusable structures.\n\nWhile some design decisions communicate meaning, others help define how components are organized and constructed. Examples include: container-padding-medium group-gap-small base-padding-vertical-large banner-gap-horizontal These decisions describe how interfaces are built."
     },
     {
       "type": "guideline",
-      "content": "Reusable structures.\n\nWhile some design decisions communicate meaning, others help define how components are organized and constructed. Examples include: container-padding-medium group-gap-small base-padding-vertical-large banner-gap-horizontal These decisions describe how interfaces are built.\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://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?”"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
@@ -80,19 +116,19 @@
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "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."
+      "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)"
     },
     {
       "type": "guideline",
@@ -104,10 +140,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. 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://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."
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/design-data/design-tokens",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/design-data/design-tokens",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

package/guidelines/drop-shadow.json

@@ -15,14 +15,26 @@
       "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 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)"
+    },
     {
       "type": "guideline",
       "content": "Composition.\n\nSpectrum drop shadows are composed of three layers that work together to create a natural sense of depth while preserving the shape of the component. Key shadow Defines the edge of the component against the background. Transition shadow Softens the transition between the key and ambient shadows to create a smoother appearance. Ambient shadow Creates the overall sense of depth and determines the total size of the shadow."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Dark theme.\n\nDrop shadows continue to communicate elevation in dark theme, but their appearance is adjusted to maintain sufficient contrast against darker surfaces. Dark theme shadows use three times the opacity of their light theme equivalents. Components that appear above other content, such as popovers, also use a border in dark theme to provide additional separation from the background."
     },
+    {
+      "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)"
+    },
     {
       "type": "guideline",
       "content": "Overlay.\n\nAn overlay communicates elevation by visually separating foreground content from the rest of the interface. When an overlay is used, such as behind a dialog, an additional drop shadow isn't needed because the overlay already establishes the elevated relationship."
@@ -40,7 +52,7 @@
       "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)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/drop-shadow",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/styles/object-styles/drop-shadow",
   "lastUpdated": "2026-08-14",
   "status": "published",
   "tags": [

package/guidelines/grays.json

@@ -8,22 +8,22 @@
     { "type": "purpose", "content": "Grays" },
     {
       "type": "guideline",
-      "content": "Gray-25, -50, and -75 are reserved for background layers. Gray-100, -200, and -300 are used for lower contrast component background progressions or borders. Gray-800 and -900 are used for higher contrast component backgrounds such as text and active borders. This ensures that components are always visible, regardless of the background color."
+      "content": "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)"
     },
     {
       "type": "guideline",
-      "content": "In Spectrum, gray-25 is the default background color, which makes the UI bright and higher contrast."
+      "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)"
     },
     {
       "type": "guideline",
-      "content": "Spectrum utilizes a simplified color theming system with a single dark mode. Spectrum’s dark theme is utilized for both the dark color theme (in light device mode) and for dark device mode."
+      "content": "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)"
     },
     {
       "type": "guideline",
-      "content": "Adobe aims to be AA compliant for WCAG guidelines. The latest 2.2 guidelines require that text is at least 4.5:1 in contrast for small text. Spectrum never deviates from this. The World Wide Web Consortium (W3C) also requires active, non-text components to have a minimum of 3:1 in contrast against adjacent colors. Some elements are exempt from this (like disabled items, decorative items, user-set items, or logotypes). This relates to both UI components such as text fields and buttons, and to graphical objects like icons or illustrations. There are no current WCAG or W3C guidelines about if every fill and stroke in every component of every state needs to be 3:1 in contrast. Another thing to consider is that it’s irresponsible to approach the topic of contrast with a “one-size-fits-all” approach: every user has different needs, and design should account for user preference and customization. While one user may need interfaces to be higher contrast to be able to more clearly read and interact with the content, others may prefer interfaces to be lower in contrast (for example, people who are prone to getting migraines). Because of this, Spectrum designs all active states of UI components to be at least 3:1 in contrast in some way with the background (such as a text field’s active state border). And, all objects within components, such as icons, drag handles, and text, are also compliant with the 3:1 or 4.5:1 requirement. Other graphical objects also always use at least 3:1 contrast and are accompanied by textual descriptions. Products using Spectrum should be built in such a way that the interface contrast, coloring, sizing, motion, and more can all be adjustable by the user to fit their own specific needs. View the Inclusive design page for more information about accessibility and inclusivity in the design system."
+      "content": "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)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/color/grays",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/grays",
   "lastUpdated": "2026-08-07",
   "status": "published",
   "tags": [

package/guidelines/header-browsing-context.json

@@ -8,9 +8,12 @@
     { "type": "purpose", "content": "Browsing context: Header" },
     {
       "type": "guideline",
-      "content": "Limit the number of call-to-action (CTA) buttons.\n\nAs a general rule, only use one call-to-action (CTA) button, aside from any buttons used to log in or log out, as defined in the universal nav. When too many CTAs are shown at once, the messages compete for attention and dilute the ability for a focused attention hierarchy. If there are multiple actions, consider combining them into a single menu or use other button types. The button should represent the most important CTA across the product; for example, “Share” and “Get desktop app” are common CTAs."
+      "content": "Limit the number of call-to-action (CTA) buttons.\n\nAs a general rule, only use one call-to-action (CTA) button, aside from any buttons used to log in or log out, as defined in the universal nav. When too many CTAs are shown at once, the messages compete for attention and dilute the ability for a focused attention hierarchy. If there are multiple actions, consider combining them into a single menu or use other button types. The button should represent the most important CTA across the product; for example, “Share” and “Get desktop app” are common CTAs. Image: Example of correct usage of using limited call-to-action buttons. One button, label Get desktop app. An icon-only button appears to the right, visible label on hover, Join the Discord. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_16fd8edfc024330c607cbc6d5c94ca4c187ed6276.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of including too many call to action buttons. First button, label Get desktop app. Second button, label Join the Discord. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1bdd7c92cc1e26fcf2c5d56a39f4c284c077d040c.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Examples.\n\nImage: Diagram showing various examples of the app frame header. First example, side navigation with a search field. Second example, side navigation with a minimized search field. Third example, header navigation without search. Fourth example, header navigation with a minimized search field. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1d6bc2d88c41f9828a0793f7d75b219f595af6868.png?width=750&format=png&optimize=medium)"
     },
-    { "type": "guideline", "content": "Examples" },
     {
       "type": "guideline",
       "content": "Keyboard interactions.\n\nIf a “skip to main content” button is enabled, it appears only on keyboard focus as the first item in the focus order. View details and examples of keyboard interactions documentation. Key Interactions TabFocuses onto or off of the header.Arrow keysMoves between header navigation items.Space/enterExecutes selection of the item and changes the view of the page in the content area. The focus remains on the selected header item."
@@ -21,10 +24,10 @@
     },
     {
       "type": "guideline",
-      "content": "Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px)."
+      "content": "Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px). Image: Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px). (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_14ef38e0e7935f59101fd8204c21d2ea38023bc05.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/app-frame/header-browsing-context",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/header-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [

package/guidelines/icon-fundamentals.json

@@ -16,18 +16,18 @@
     },
     {
       "type": "guideline",
-      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping. We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes."
+      "content": "The Spectrum 2 icon style aligns with contemporary UI and icon trends and is optimized for where the icons are viewed: displays across desktop and mobile. With a bigger focus on high-res screens, we've prioritized spacing and contrast for a more expressive range — leaving behind the problem of pixel-perfect snapping. We're also aligning the stroke weight into 4 subdivisions inside the pixel unit to create balanced stroke rendering with a 1.5 px stroke weight. This weight has been proven to work well with mobile retina screens, and it allows for a stronger appearance of the line renderings of icon shapes. Image: Diagram showing and example of Spectrum 2 icon stroke weight and spacing. Within 20 pixels, an icons stroke weight is divided into 4 areas. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1b6950b8826ac4405a7504a493116219c33362d58.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos). Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical). Various examples of Spectrum 2 icons.Similarities of icon styles across Spectrum and Adobe Express.How icons have evolved over time."
+      "content": "Icons are outlined. They're mostly monochrome to allow for colored accents in badges for status updates like alerts, information, and notifications. Some icons also use fill and a stroke to illustrate a concept more clearly (for example, the favorite star rating, or third-party logos). Occasionally, there are duotone icons to indicate a perceived change of direction, exclusion, transition, or speed (like in flip horizontal/vertical). Image: Chart showing 105 different examples of Spectrum 2 icons and demonstrating the visual style. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1254ce1f133d89a15f178e50f730facf76df26772.png?width=750&format=png&optimize=medium)Various examples of Spectrum 2 icons. Image: Diagram of the relationship between the Spectrum icons and the Adobe Express icons and how that merges into the Spectrum 2 icons. Spectrum icons are rational, classic, serious, and unique. Adobe Express icons are easy, trendy, playful, and familiar. Spectrum 2 icons combine these to be more expressive and also incorporate a sense of motion. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1569649220eef056016b5a0c7e8406d29712e6d62.png?width=750&format=png&optimize=medium)Similarities of icon styles across Spectrum and Adobe Express. Image: Chart showing history of Adobe's icon styles. 2018, Spectrum icons, 18 pixel canvas with 1 or 2 pixel stroke. 2020, Adobe Express icons, 18 pixel canvas with 2 pixel stroke. 2020, Document Cloud Modern icons, 18 pixel canvas with 1 and a half pixel stroke. 2023, Spectrum 2, 20 pixel canvas with 1 and a half pixel stroke. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_169156cc71c2b273a0cd95b4d79fc3d82d009e8ee.png?width=750&format=png&optimize=medium)How icons have evolved over time."
     },
     {
       "type": "guideline",
-      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are clear, functional, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes. The shapes of the icons themselves are based on predefined key shapes to ensure a balanced look and feel across interfaces. Examples of key shapes."
+      "content": "Characteristics.\n\nAdobe products often have complex controls, so our icon metaphors are clear, functional, and additive to experiences. They describe tools and topics as simply and accurately as possible. Icons that attempt to relay too much information often become busy and don't read well at small sizes. The shapes of the icons themselves are based on predefined key shapes to ensure a balanced look and feel across interfaces. Image: Three examples of key shapes in Spectrum 2 icons, square, circle, and rectangle. A square becomes a document icon. A circle becomes a compass icon. A rectangle becomes a file folder icon. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1705813a0cc859925174da0e7e30ee6682bf7faee.png?width=750&format=png&optimize=medium)Examples of key shapes. Image: Examples of literal and abstract metaphors. Literal metaphor, house icon represents the concept of Home. Abstract metaphor, an icon with an assemblage of squares represents the concept of Group. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_11bab8021c39aca4dd072f1a786d8917b5516ee32.png?width=750&format=png&optimize=medium)Image: Examples of platform standard icons for Share. iOS uses one icon for share while Android uses another. (source: https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/media_1d27dc5c7e3afa085093cba37611e95ab4370a2d3.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://main--spectrum-hub--adobe.aem.live/foundations/icons-and-illustrations/icon-fundamentals",
+  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": ["icons", "outline", "monochrome", "stroke-weight", "iconography"]