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

package/guidelines/colors.json

@@ -8,15 +8,15 @@
     { "type": "purpose", "content": "Colors" },
     {
       "type": "guideline",
-      "content": "Image: A green gradient circle icon, half outlined and half filled, representing accessibility. (source: https://preview.spectrum.adobe.com/foundations/color/media_1dbe049a5fb02f75fecb2595d69e3ab96b582b953.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A green gradient circle icon, half outlined and half filled, representing accessibility. (source: https://spectrum.adobe.com/foundations/color/media_1c94508d2c8164b33419f7de3b02ce8d1743a2884.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Image: A blue gradient icon of two diagonal arrows pointing away from each other, representing scalability. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c1aafd6782c73e32c3bb9f17bcc1d159a8338b32.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A blue gradient icon of two diagonal arrows pointing away from each other, representing scalability. (source: https://spectrum.adobe.com/foundations/color/media_10985f419157e45e54cd587380a88c865e3ddca53.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Image: A purple-to-pink gradient icon of three interlocking rings, representing intentional or purposeful design. (source: https://preview.spectrum.adobe.com/foundations/color/media_1030263b0b0e21eaa2317fc71f938da71ffa84f03.png?width=750&format=png&optimize=medium)"
+      "content": "Image: A purple-to-pink gradient icon of three interlocking rings, representing intentional or purposeful design. (source: https://spectrum.adobe.com/foundations/color/media_1bd273c6063e5b01f5c689a82cead8f8265f0714b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -32,50 +32,58 @@
     },
     {
       "type": "guideline",
-      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color. Image: A large grid of color swatches showing 15 hue rows (red, orange, yellow, brown, chartreuse, green, teal, cyan, blue, indigo, purple, magenta, fuchsia, pink, and crimson) each with 16 columns transitioning from light to dark. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b61b63c16d0c1bd67be971ead2447f6a4fb87a03.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color. Image: A large grid of color swatches showing 15 hue rows (red, orange, yellow, brown, chartreuse, green, teal, cyan, blue, indigo, purple, magenta, fuchsia, pink, and crimson) each with 16 columns transitioning from light to dark. (source: https://spectrum.adobe.com/foundations/color/media_1b61b63c16d0c1bd67be971ead2447f6a4fb87a03.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Brand colors may differ from Spectrum colors.\n\nImage: Six vertical color ramps labeled with Adobe app icons (Ai, Sg, Ps, Ae, Xd, Id), each transitioning from a light tint at top to a dark shade at bottom in the app's brand color: orange, green, blue, indigo, magenta, and pink/red. (source: https://preview.spectrum.adobe.com/foundations/color/media_11dbaa344681e410a0abb24a800f8f99770341781.png?width=750&format=png&optimize=medium)"
+      "content": "Spectrum’s color system helps you apply color to your UI in a consistent and visually harmonious way. Spectrum’s color system is based on a foundation of visual perception, inclusive design, and accessibility. Spectrum uses the relationships between colors and their properties to create a scalable foundation for color in the design system. Dark and light variants of each color can then be applied to your UI in different ways. Spectrum colors are generated using the Leonardo color tool, by plugging in hues and hue ranges through key colors and combined with target contrast ratios for each color."
     },
     {
       "type": "guideline",
-      "content": "Key colors (shown in hue).\n\nImage: Six horizontal gradient bars in Adobe app brand colors (orange/Ai, green/Sg, blue/Ps, indigo/Ae, magenta/Xd, pink/Xd), each labeled with numeric hue values marking key color stops along the gradient. (source: https://preview.spectrum.adobe.com/foundations/color/media_1628ff4ce8ffc018fd2e2943fa27cb27302f9102f.png?width=750&format=png&optimize=medium)The Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors.Image: A blue gradient scale from light to dark with contrast ratio labels ranging from 1.06:1 to 19.5:1 at each stop, paired below with a matching swatch row numbered 100 through 1600 showing the corresponding blue shades. (source: https://preview.spectrum.adobe.com/foundations/color/media_1b3856ffb32cd28a1427b18829e04a3ea760d4f74.png?width=750&format=png&optimize=medium)"
+      "content": "Brand colors may differ from Spectrum colors.\n\nImage: Six vertical color ramps labeled with Adobe app icons (Ai, Sg, Ps, Ae, Xd, Id), each transitioning from a light tint at top to a dark shade at bottom in the app's brand color: orange, green, blue, indigo, magenta, and pink/red. (source: https://spectrum.adobe.com/foundations/color/media_11dbaa344681e410a0abb24a800f8f99770341781.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Solid color background with black or white.\n\nFor these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and celery while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette. Image: Two rows of solid-colored button-like labels grouped by text contrast: a top section 'Use with white text' showing red, brown, olive, green, teal, blue, indigo, purple, magenta, pink, dark gray, and gray backgrounds with white 'Label' text, and a bottom section 'Use with black text' showing orange, yellow, green, and lime backgrounds with black 'Label' text. (source: https://preview.spectrum.adobe.com/foundations/color/media_130355598009d093c7bd1e12e42df413fee995fbe.png?width=750&format=png&optimize=medium)Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette."
+      "content": "Key colors (shown in hue).\n\nImage: Six horizontal gradient bars in Adobe app brand colors (orange/Ai, green/Sg, blue/Ps, indigo/Ae, magenta/Xd, pink/Xd), each labeled with numeric hue values marking key color stops along the gradient. (source: https://spectrum.adobe.com/foundations/color/media_1628ff4ce8ffc018fd2e2943fa27cb27302f9102f.png?width=750&format=png&optimize=medium) The Leonardo tool generates the color palette by using several key colors, including brand colors. Most color scales are not a single hue key color. Leonardo tends to darken and lighten on either end of the gradient by adding black and white to the key colors, so some are included to ensure a high degree of saturation in the palette. In other cases, some key colors shift the actual hue in order to keep colors bright or recognizable, or shift them to help most users avoid confusion with adjacent colors. Once the color scale is determined, lightness stops are input for each color in order to get aliased colors. Image: A blue gradient scale from light to dark with contrast ratio labels ranging from 1.06:1 to 19.5:1 at each stop, paired below with a matching swatch row numbered 100 through 1600 showing the corresponding blue shades. (source: https://spectrum.adobe.com/foundations/color/media_1b3856ffb32cd28a1427b18829e04a3ea760d4f74.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Two-tone color pairing.\n\nTo create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700. Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users. Image: Three pairs of icon swatches (a crop/sparkle tool, a PDF document stack, and a camera) shown first on light tinted backgrounds in purple, red, and green, then on matching dark backgrounds grouped within a black container. (source: https://preview.spectrum.adobe.com/foundations/color/media_1000f1eb95187ddf34fbfdb0dd0a7b6c6d840aa28.png?width=750&format=png&optimize=medium)"
+      "content": "Sometimes it’s necessary to use color for the background or fill of an object in an interface. Use color backgrounds sparingly, except for the following cases."
     },
     {
       "type": "guideline",
-      "content": "Don’t create your own colors.\n\nEvery part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards. Image: Example of a correct usage. A purple pill-shaped 'Label' button next to a checklist labeled 'Interests' with a checked orange 'Travel' checkbox and unchecked 'Music' and 'Shopping' options, plus a helper text reading 'Select at least one interest.' (source: https://preview.spectrum.adobe.com/foundations/color/media_13c6937cd9b5481376c50a5b6f4b418421f5e9253.png?width=750&format=png&optimize=medium)"
+      "content": "Solid color background with black or white.\n\nFor these scenarios, color must adhere to WCAG contrast minimums with the color of the text. Most colors have white text placed over the color. To maintain the identifiability of yellow, orange, chartreuse, and celery while still meeting these requirements, these colors must be used with black text. They must be fully opaque and should be referenced from the static color palette. Image: Two rows of solid-colored button-like labels grouped by text contrast: a top section 'Use with white text' showing red, brown, olive, green, teal, blue, indigo, purple, magenta, pink, dark gray, and gray backgrounds with white 'Label' text, and a bottom section 'Use with black text' showing orange, yellow, green, and lime backgrounds with black 'Label' text. (source: https://spectrum.adobe.com/foundations/color/media_130355598009d093c7bd1e12e42df413fee995fbe.png?width=750&format=png&optimize=medium) Do not use these colors without a text label representation of the color’s meaning in your application (e.g., “drafts,” “reviewed,” “new”). When using multiple colors and text labels cannot readily clarify color meaning — which is a common case in data visualization — use the categorical color palette."
     },
     {
       "type": "guideline",
-      "content": "Communicating with color.\n\nIn order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning. Image: Example of a correct usage. A text field with a red border and warning triangle icon, showing an error message 'Enter a valid email address.' (source: https://preview.spectrum.adobe.com/foundations/color/media_130cdd17e3ef910ccab2221c2169bfd2b24189153.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. The same text field with only a red border and no icon or error message, showing color alone without an accompanying explanation. (source: https://preview.spectrum.adobe.com/foundations/color/media_1c9cefe91435c778a9966713132ffeb845940fbf7.png?width=750&format=png&optimize=medium)"
+      "content": "Two-tone color pairing.\n\nTo create two-tone color pairs, use the 100 index of your color for the background (e.g., magenta-100). The icon or illustration should use the 900 index in light theme (e.g., magenta-900). In dark themes, the 700-1200 indices can be chosen based on the desired lightness or saturation levels of the color. For example, yellow is better represented with yellow-1200, and red is better represented with red-700. Do not use these colors without a text label representation of the color’s significance in your application. These colors are not color vision deficiency safe, and could be confusing to some users. Image: Three pairs of icon swatches (a crop/sparkle tool, a PDF document stack, and a camera) shown first on light tinted backgrounds in purple, red, and green, then on matching dark backgrounds grouped within a black container. (source: https://spectrum.adobe.com/foundations/color/media_1000f1eb95187ddf34fbfdb0dd0a7b6c6d840aa28.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Create hierarchy with background layer colors.\n\nUse background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes. Image: Example of a correct usage. Two stacked panels, one light and one dark, each showing three layers labeled gray-200, gray-100, and gray-75 with minimal visual distinction between them. (source: https://preview.spectrum.adobe.com/foundations/color/media_178653b2587e927b8a6e5c0b44d137af96530e4da.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two stacked panels, one light and one dark, each showing three layers labeled Base, Layer 1, and Layer 2 with clear visual separation indicating hierarchy. (source: https://preview.spectrum.adobe.com/foundations/color/media_1f9b9739c5896b12daf20a89b108ee81f1f3f8d9b.png?width=750&format=png&optimize=medium)"
+      "content": "Don’t create your own colors.\n\nEvery part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards. Image: Example of a correct usage. A purple pill-shaped 'Label' button next to a checklist labeled 'Interests' with a checked orange 'Travel' checkbox and unchecked 'Music' and 'Shopping' options, plus a helper text reading 'Select at least one interest.' (source: https://spectrum.adobe.com/foundations/color/media_13c6937cd9b5481376c50a5b6f4b418421f5e9253.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Provide sufficient contrast.\n\nUse the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme. Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product. Image: Example of a correct usage. Two cards, one light gray-200 and one black, each showing four lines of colored text (gray-600/700, red-800/900, blue-800/900, green-800/900) marked with a red 'Fail' warning icon, indicating insufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15110077c3e594f9d8c9e58063e962e5108d0d62e.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. Two cards, one white and one black, each labeled 'Layer 1' and showing four lines of colored text (gray-700, red-900, blue-900, green-900) marked with a green 'Pass' checkmark icon, indicating sufficient contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_1cf6f2433a57f6e0819eab3ddaf38308bf05dab80.png?width=750&format=png&optimize=medium)"
+      "content": "Communicating with color.\n\nIn order to be accessible for as many users as possible, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon to communicate meaning. Image: Example of a correct usage. A text field with a red border and warning triangle icon, showing an error message 'Enter a valid email address.' (source: https://spectrum.adobe.com/foundations/color/media_130cdd17e3ef910ccab2221c2169bfd2b24189153.png?width=750&format=png&optimize=medium) Image: Example of a incorrect usage. The same text field with only a red border and no icon or error message, showing color alone without an accompanying explanation. (source: https://spectrum.adobe.com/foundations/color/media_1c9cefe91435c778a9966713132ffeb845940fbf7.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Hue and Saturation contrast.\n\nAvoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users. Use static white or static black components instead of colored components on top of color or image backgrounds. Image: Example of a correct usage. Two colored squares, one red and one light gray, each containing a pill-shaped 'Label' button in a matching or complementary hue with adequate contrast. (source: https://preview.spectrum.adobe.com/foundations/color/media_15ca4c13d88e11dd08b4786512aa49253f1159101.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A red rectangle containing a blue pill-shaped 'Label' button, showing a jarring hue and saturation clash between the background and button. (source: https://preview.spectrum.adobe.com/foundations/color/media_1e8d1753ca0cb27e0406771145711cc317fd99e3a.png?width=750&format=png&optimize=medium)"
+      "content": "Create hierarchy with background layer colors.\n\nUse background layers for creating application hierarchy. This will ensure that dimensionality and visual/structural hierarchy is appropriately translated between light and dark themes. Image: Example of a correct usage. Two stacked panels, one light and one dark, each showing three layers labeled gray-200, gray-100, and gray-75 with minimal visual distinction between them. (source: https://spectrum.adobe.com/foundations/color/media_178653b2587e927b8a6e5c0b44d137af96530e4da.png?width=750&format=png&optimize=medium) Image: Example of a incorrect usage. Two stacked panels, one light and one dark, each showing three layers labeled Base, Layer 1, and Layer 2 with clear visual separation indicating hierarchy. (source: https://spectrum.adobe.com/foundations/color/media_1f9b9739c5896b12daf20a89b108ee81f1f3f8d9b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Programmatic color changes.\n\nDo not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors. Image: Example of a correct usage. A code snippet reading 'color: $blue-300;' showing direct use of a color token variable. (source: https://preview.spectrum.adobe.com/foundations/color/media_19ba20ccdb3e3fc3e9c9a566869ab3fff8945b562.png?width=750&format=png&optimize=medium)Image: Example of a incorrect usage. A code snippet reading 'color: lighten($blue-300, 15%);' showing a color token being programmatically modified rather than used as-is. (source: https://preview.spectrum.adobe.com/foundations/color/media_1175eb8974edd034d8ed87844041434397f19af31.png?width=750&format=png&optimize=medium)"
+      "content": "Provide sufficient contrast.\n\nUse the appropriate gray tokens and color tokens for text, icons, and illustrations. These tokens are guaranteed to meet or exceed WCAG contrast minimums when placed on background layer colors for each supported color theme. Choosing lower indexed color tokens, or using other colors for backgrounds, could result in insufficient contrast. When in doubt, check the contrast for text, icons, and UI components for all color themes supported by your product. Image: Example of a correct usage. Two cards, one light gray-200 and one black, each showing four lines of colored text (gray-600/700, red-800/900, blue-800/900, green-800/900) marked with a red 'Fail' warning icon, indicating insufficient contrast. (source: https://spectrum.adobe.com/foundations/color/media_15110077c3e594f9d8c9e58063e962e5108d0d62e.png?width=750&format=png&optimize=medium) Image: Example of a incorrect usage. Two cards, one white and one black, each labeled 'Layer 1' and showing four lines of colored text (gray-700, red-900, blue-900, green-900) marked with a green 'Pass' checkmark icon, indicating sufficient contrast. (source: https://spectrum.adobe.com/foundations/color/media_1cf6f2433a57f6e0819eab3ddaf38308bf05dab80.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Hue and Saturation contrast.\n\nAvoid placing colors directly on top of or adjacent to other colors that have a high degree of hue contrast with near-equal saturation or lightness. These scenarios create a visual illusion of depth or vibration (chromostereopsis) which can result in a poor user experience. If colors have near equal lightness, they will also cause lightness contrast issues since the colors may be indistinguishable to some users. Use static white or static black components instead of colored components on top of color or image backgrounds. Image: Example of a correct usage. Two colored squares, one red and one light gray, each containing a pill-shaped 'Label' button in a matching or complementary hue with adequate contrast. (source: https://spectrum.adobe.com/foundations/color/media_15ca4c13d88e11dd08b4786512aa49253f1159101.png?width=750&format=png&optimize=medium) Image: Example of a incorrect usage. A red rectangle containing a blue pill-shaped 'Label' button, showing a jarring hue and saturation clash between the background and button. (source: https://spectrum.adobe.com/foundations/color/media_1e8d1753ca0cb27e0406771145711cc317fd99e3a.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Programmatic color changes.\n\nDo not use color functions to modify Spectrum colors. The specific tints and shades of Spectrum’s themes were designed to be perceptually uniform. Modifying colors in the product or framework could result in undesirable colors. Image: Example of a correct usage. A code snippet reading 'color: $blue-300;' showing direct use of a color token variable. (source: https://spectrum.adobe.com/foundations/color/media_19ba20ccdb3e3fc3e9c9a566869ab3fff8945b562.png?width=750&format=png&optimize=medium) Image: Example of a incorrect usage. A code snippet reading 'color: lighten($blue-300, 15%);' showing a color token being programmatically modified rather than used as-is. (source: https://spectrum.adobe.com/foundations/color/media_1175eb8974edd034d8ed87844041434397f19af31.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/color/colors",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/color/colors",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/component-spacing.json

@@ -8,7 +8,11 @@
     { "type": "purpose", "content": "Component spacing" },
     {
       "type": "guideline",
-      "content": "Internal component spacing governs the space within components. It follows its own geometric scales, each designed to reconcile the type scale and component sizes as needed. This is why some values are less round than you might expect. They are calculated to produce balanced proportional relationships for their specific context at every size. Image: Diagram showing how \"Base gap medium\" spacing between a layer thumbnail and its label combines with an \"Action group\" of eye and lock icons to form a \"List item\" component, which uses \"List gap medium\" spacing between its elements. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1093862bea5fe456337910a0401c4d9f316872067.png?width=750&format=png&optimize=medium)"
+      "content": "Internal component spacing governs the space within components. It follows its own geometric scales, each designed to reconcile the type scale and component sizes as needed. This is why some values are less round than you might expect. They are calculated to produce balanced proportional relationships for their specific context at every size. Image: Diagram showing how \"Base gap medium\" spacing between a layer thumbnail and its label combines with an \"Action group\" of eye and lock icons to form a \"List item\" component, which uses \"List gap medium\" spacing between its elements. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1093862bea5fe456337910a0401c4d9f316872067.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Spectrum organizes components into common structural types called structural templates. Each template type has a corresponding set of semantic tokens that handle its internal spacing relationships. When designing a component, start by identifying which structural type it most closely matches. That identification points you to the right token category. A component that behaves like a list uses list-level tokens. One that behaves like a container uses container-level tokens. One built around a single interactive element uses base-level tokens. Components can also combine multiple structures. A list item, for example, is made up of base and group elements. Each structural type within the composition uses its own tokens. Image: Diagram showing component spacing application with base components on the left (Layer 1 with thumbnail and action icons) and how they're spaced in a list item on the right, with \"Base gap medium\" and \"List gap medium\" labels indicating spacing between elements. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1c38a7177a98b59473f8f820d236ea4a411cb0905.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
@@ -16,34 +20,34 @@
     },
     {
       "type": "guideline",
-      "content": "Image: Diagram showing three UI structure types stacked vertically: a \"Base\" element with an icon, radio circle, label, and description text; an empty \"Container\" box; and a \"List item\" row combining a folder icon, label, and two radio circles. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_14597f05908fb1ba90ed338d764edb72e40c79d04.png?width=750&format=png&optimize=medium)"
+      "content": "Image: Diagram showing three UI structure types stacked vertically: a \"Base\" element with an icon, radio circle, label, and description text; an empty \"Container\" box; and a \"List item\" row combining a folder icon, label, and two radio circles. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_14597f05908fb1ba90ed338d764edb72e40c79d04.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Collections.\n\nFor most collections, density affects only the gap between items. An action group, for example, adjusts the gap between its buttons; a list adjusts the gap between its items."
+      "content": "Component density controls the internal spacing of a component, independent of its size tier. To make a component more compact, decrease each spacing token by one step. To make it more spacious, increase by one step. For example, if the regular variant uses spacing-200, compact uses spacing-100 and spacious uses spacing-300. Image: Three versions of a labeled radio button component, each annotated with three spacing measurements—gaps (1, pink), vertical paddings (2, green), and horizontal paddings (3, blue)—shown increasing in size from left to right, with corresponding scaling squares below each category. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1584dbdc041e6ba6e4cf11b739494f7b1064b2b40.png?width=750&format=png&optimize=medium) Some tokens are labeled compact, regular, or spacious. These labels can serve two purposes. In some cases, they correspond directly to a component's density setting, such as a compact button group. In others, they represent a range of options within a specific spacing context, giving you the flexibility to choose what fits the composition and the visual characteristics of the elements involved. Image: Three \"Table cell\" examples labeled \"Table item padding compact,\" \"regular,\" and \"spacious,\" each showing increasing vertical spacing around the cell text. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1a4757920ba552b38711823f4f6394b669ca3de0f.png?width=750&format=png&optimize=medium) Density named tokens corresponding to density options of a table component. Image: Diagram showing a dark toast notification reading \"Toast message describing what happened.\" with a \"Label\" button and close icon, with its left and right edge padding labeled \"Banner padding horizontal\" and \"Banner padding horizontal compact.\" (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_18e87a92eedea2792741e3b4d764a160b02c2954d.png?width=750&format=png&optimize=medium) Density named token options used to construct a toast component. Not all components support density as a configurable option. Only collections and containers do. Collections are components made of repeated child elements, such as lists, groups, and tables. Containers hold compositions of other components, such as cards and toolbars. Basic components such as buttons and text fields don't support density variants"
     },
     {
       "type": "guideline",
-      "content": "Image: Two labeled radio button groupings compared side by side: \"Compact\" and \"Regular,\" each showing a vertical pair and a horizontal pair of radio labels with a thin pink divider indicating the different spacing between them. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1aa4656d804e67121b98c5b95cc78fdadf5367904.png?width=750&format=png&optimize=medium)"
+      "content": "Collections.\n\nFor most collections, density affects only the gap between items. An action group, for example, adjusts the gap between its buttons; a list adjusts the gap between its items."
     },
     {
       "type": "guideline",
-      "content": "Containers.\n\nDensity affects all padding, both vertical and horizontal. Containers such as cards may appear in full grids or unidirectional lists, so both axes need to respond to density changes."
+      "content": "Image: Two labeled radio button groupings compared side by side: \"Compact\" and \"Regular,\" each showing a vertical pair and a horizontal pair of radio labels with a thin pink divider indicating the different spacing between them. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1aa4656d804e67121b98c5b95cc78fdadf5367904.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Image: Three versions of the same gradient card component (purple-to-red-to-pink with \"Card title\" and \"Card description\") labeled \"Compact,\" \"Regular,\" and \"Spacious,\" showing progressively larger card sizes and spacing. (source: https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1932de08aa0bbe4a7e377ac9ff72e954dc9bd9f08.png?width=750&format=png&optimize=medium)"
+      "content": "Containers.\n\nDensity affects all padding, both vertical and horizontal. Containers such as cards may appear in full grids or unidirectional lists, so both axes need to respond to density changes."
     },
     {
       "type": "guideline",
-      "content": "Spectrum's internal component spacing is defined by a comprehensive set of semantic tokens. Each of these tokens corresponds to a specific structural context. These tokens are built into every Spectrum component, and available to designers in the S2 / Variables Figma library. A full token reference will be available on this site in the future. If you do need to inspect or access them, please reach out to the Spectrum team."
+      "content": "Image: Three versions of the same gradient card component (purple-to-red-to-pink with \"Card title\" and \"Card description\") labeled \"Compact,\" \"Regular,\" and \"Spacious,\" showing progressively larger card sizes and spacing. (source: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/media_1932de08aa0bbe4a7e377ac9ff72e954dc9bd9f08.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
       "content": "Spectrum's internal component spacing is defined by a comprehensive set of semantic tokens. Each of these tokens corresponds to a specific structural context. These tokens are built into every Spectrum component, and available to designers in the S2 / Variables Figma library. A full token reference will be available on this site in the future."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/spacing/component-spacing",
   "lastUpdated": "2026-08-13",
   "status": "published",
   "tags": [

package/guidelines/contact-us.json

@@ -6,52 +6,12 @@
   "category": "support",
   "documentBlocks": [
     { "type": "purpose", "content": "Contact us" },
-    {
-      "type": "guideline",
-      "content": "Post in #spectrum-general or email the Spectrum team."
-    },
     {
       "type": "guideline",
       "content": "For general inquiries, feedback, bug reports, and other communication about Spectrum, please email us."
-    },
-    {
-      "type": "guideline",
-      "content": "For feature requests, bug reports, or other general feedback on the Spectrum website or designs, please visit the #spectrum-design Slack channel and fill out the embedded Slack form. Your input is important and helps us prioritize updates accordingly. We review submissions regularly and will create Jira tickets as needed, depending on the details of the request, our team's bandwidth, and current priorities."
-    },
-    {
-      "type": "guideline",
-      "content": "Spectrum Design.\n\nCore components, styles, and resources, as well as general design questions #spectrum-design"
-    },
-    {
-      "type": "guideline",
-      "content": "CC Unified Experience Team (CCUE).\n\nCreative Cloud #ad-ue-general The Unified Experience effort is helping to define Adobe's shared experience standards. This is done through defining and documenting principles, patterns, and UI components to help product teams deliver modern, unified, cross-platform experiences through Spectrum components and guidelines."
-    },
-    {
-      "type": "guideline",
-      "content": "Brand and illustration #product-branding The Brand design team creates the product logos, file types and folders icons, and any other in-product branded element, such as splash and loading screens, or welcome banners for all Adobe surfaces. The Brand team also creates all in-product illustrations and can advise on how to uplift your product brand throughout the experience. View more information about requesting illustrations or brand elements."
-    },
-    {
-      "type": "guideline",
-      "content": "DX Unified Experience Team (DXUE).\n\nExperience Cloud #archon DXUE aims to unify the Experience Cloud across a comprehensive product stack of composable services to provide a user experience that is performant, scalable, and continuous, to serve the needs of enterprise to mid-market organizations through Spectrum components and patterns."
-    },
-    {
-      "type": "guideline",
-      "content": "Icons.\n\nWorkflow iconography #icons The Icons team designs delightful and consistent Spectrum iconography for all Adobe surfaces and provides product teams with thorough resources for icon usage and implementation. The team can also assist with vendor work by offering icon reviews, guidelines, and icon creation templates. View more information about requesting icons."
-    },
-    {
-      "type": "guideline",
-      "content": "Consonant.\n\nAdobe.com #consonant_general Consonant is an extension of Spectrum that both adds to and complements it by documenting everything you need to design and write for all Adobe marketing web experiences."
-    },
-    {
-      "type": "guideline",
-      "content": "For general questions, post in #spectrum-general. For questions related to a particular implementation, post in its designated Slack channel. If you’re not sure or don’t see the implementation listed here, post in #spectrum-general and the team will assist you. Additionally, view the Developer overview page for more information. React Spectrum #react-spectrum Spectrum Web Components #spectrum-web-components Spectrum iOS #spectrum-ios Spectrum Android #spectrum-android Spectrum Drover #spectrum-desktop Spectrum Tokens #spectrum-tokens"
-    },
-    {
-      "type": "guideline",
-      "content": "For questions about Spectrum's Figma libraries and resources, post in #spectrum-design. If you’re part of Adobe Design and have general Figma administrative or access questions, post in #ad-tooling-support. For those in other orgs, reach out to your manager for approval and follow Adobe’s process to request standard software."
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/support/contact-us",
+  "sourceUrl": "https://spectrum.adobe.com/support/contact-us",
   "lastUpdated": "2026-09-08",
   "status": "published",
   "tags": [

package/guidelines/containers.json

@@ -7,56 +7,49 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Examples of containers: two cards with different sizes and layout options, and a select box.\"\n\nAll containers share a set of defined styles.\n\nInternal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns.\n\nThis medium card uses spacing-300 for internal padding.\n\nNote that specific components might have different options and states.\n\nExample of an app frame with a side navigation."
+      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines. For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container. Separation of containers is marked through a clear visual change, such as contrast in a background color or through spacing. All containers share a common set of rules for styles, padding, and emphasis.\n\n### Example\n\nCards and select boxes share container styles. In this example, both use the emphasized style. Cards also have additional options that select boxes do not, like t-shirt size and layout. Image: UI components showing examples of card layouts for a Photoshop photo editing course on the left with multiple card variations, and a select box component example on the right featuring a checkbox and favorites heart icon. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1daffa98ca15b1299210db1dd829d7377de85e65a.png?width=750&format=png&optimize=medium) Examples of containers: two cards with different sizes and layout options, and a select box."
     },
     {
       "type": "guideline",
-      "content": "Containers separate concepts with distinct purposes."
+      "content": "All containers share a set of defined styles. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_130061659941d2e3f73cf5a50fb9df8aeb95ca596.png?width=750&format=png&optimize=medium) Background color By default, containers are visually distinguished through a change in background color. Learn more about this in background layers. Emphasized In some situations, drop shadows are used to provide emphasis to a container or group of containers, like in a set of related cards. Emphasized containers should be used sparingly. View more about container emphasis. Border Borders can also be used around objects as an alternate style to a background color, and should be used without a fill. Vertical, full-width dividers can also be used to create separation for larger sections of content, like in a panel. View more about border width. Spacing This is the container style with the least emphasis. Instead of using a visible border, spacing is used to create separation between concepts. View more about spacing."
     },
     {
       "type": "guideline",
-      "content": "In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum 2 interfaces in multiple ways, but the commonality they share is that they group related concepts together into distinct areas. Some usages of containers have more detailed guidelines."
+      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns. The following chart is a point of reference for how padding values are used in Spectrum 2 containers. The spacing values themselves remain unchanged from Spectrum 1. View more about spacing. Image: Container spacing examples, each shown in a square from smallest to largest, with labels spacing-100, spacing-200, spacing-300, spacing-400, spacing-500, spacing-600. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1bac253ef640094fbbe2ea80a63cc3875690b424b.png?width=750&format=png&optimize=medium) Spacing token Value Example usage in Spectrum spacing-100 8 px Extra-small cards spacing-200 12 px High density panels, small cards spacing-300 16 px Medium density panels, medium cards spacing-400 24 px Low density panels, large cards, mobile standard and alert dialogs spacing-500 32 px Desktop standard and alert dialogs spacing-600 40 px Takeover dialog"
     },
     {
       "type": "guideline",
-      "content": "For example, a card uses a container and inherits its properties, but it can only represent a distinct object (such as an individual asset or product). A block of marketing material containing multiple concepts (like subscription information plus actions to take) is grouped together in a container, but is not considered a card. Whether broad or specific, a user should be able to readily tell the purpose of a container."
+      "content": "Example.\n\nThis medium card uses spacing-300 for internal padding. Image: Card component example with checkbox, abstract wavy image, title and description text, showing spacing-300 (16px) padding measurement indicated by dotted line on the left. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_13224b595dae476332958fef768371a29adbc1572.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Examples of containers: two cards with different sizes and layout options, and a select box."
+      "content": "An emphasized container has a drop shadow to draw attention. When deciding whether a container should be emphasized, consider the rest of the page. Emphasized containers should be used to highlight the main content. Consider how different container styles can be used to draw attention to the most important content. As a general rule, a group of containers should all have the same intent. While there are exceptions, generally only one group at a time should be emphasized on a page. For example, a group of related cards can use a drop shadow, but not every element on a page should have a drop shadow."
     },
     {
       "type": "guideline",
-      "content": "All containers share a set of defined styles."
+      "content": "Example.\n\nIn this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds. Image: Three app product cards displaying Acrobat, Photography, and All apps with icons, pricing placeholders, and Buy now buttons, with the All apps card highlighted by a \"Best value\" badge. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_18c340f95534d724d0566c68fa959d8cc3bf5668e.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Internal padding is dependent on component size, density, and platform scale, all of which vary for specific components and patterns."
+      "content": "States of interactive, emphasized containers.\n\nIf the whole container is interactive, hover is shown through a slightly more prominent drop shadow. When dragged, a much more prominent shadow is shown in order to bring focus to the dragged item and show elevation above the rest of the UI. Note that specific components might have different options and states. Image: Unlabeled image (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_1d5c23228ef95a1f5def853200c19be7fd89b487e.png?width=750&format=png&optimize=medium) Emphasized, default Emphasized, hover Dragged"
     },
     {
       "type": "guideline",
-      "content": "This medium card uses spacing-300 for internal padding."
-    },
-    {
-      "type": "guideline",
-      "content": "In this group of containers — each representing a product — different container styles can be used to draw attention to a specific item. In this case, the emphasized container is paired with a badge, and contrasts against the more subdued containers with filled (gray) backgrounds."
-    },
-    {
-      "type": "guideline",
-      "content": "Note that specific components might have different options and states."
-    },
-    {
-      "type": "guideline",
-      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products."
-    },
-    {
-      "type": "guideline",
-      "content": "Example of an app frame with a side navigation."
+      "content": "A consistent app frame helps create a sense of brand unity and helps users feel comfortable and familiar with our products. Predictable navigation is also especially helpful for users who work across multiple applications, and it makes it easier to learn how to use new products. The Spectrum 2 app frame framework provides a consistent visual style and navigation. It offers foundational structures and guidelines that product teams can adapt to their own contexts. View more details about the S2 app frame. The main content area is defined by a unique container style that's used only in the app frame. It has a subtle drop shadow to provide separation from the navigation. View more about using container styles to divide content within content areas. Image: Adobe Firefly app interface showing left sidebar with navigation menu items (Home, Files, Brands, Discover, Schedule, Learn, Plugins) and a Create button, plus top header with search bar and utility icons. (source: https://spectrum.adobe.com/foundations/layout-and-structure/media_16b19bf7867ae4d830240dad00019054f87d38fb8.png?width=750&format=png&optimize=medium) Example of an app frame with a side navigation."
     }
   ],
-  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/containers/",
-  "lastUpdated": "2026-02-02",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/layout-and-structure/containers",
+  "lastUpdated": "2026-09-11",
   "status": "published",
-  "tags": ["designing"],
-  "related": [{ "ref": "states" }, { "ref": "s2-app-frame" }]
+  "tags": [
+    "containers",
+    "cards",
+    "select boxes",
+    "padding",
+    "spacing",
+    "background color",
+    "emphasis",
+    "border",
+    "dividers"
+  ]
 }

package/guidelines/content-area-browsing-context.json

@@ -8,50 +8,58 @@
     { "type": "purpose", "content": "Browsing context: Content area" },
     {
       "type": "guideline",
-      "content": "Use dividers to separate related content.\n\nDividers are useful to separate content when using spacing alone wouldn’t be clear enough to mark the boundaries of distinct areas. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider. For example, showing the contents from a selected folder, or a commenting panel of a selected file, would benefit from a divider. If showing content that’s unrelated, like an AI assistant that’s available across multiple pages, use the vertical layout. View more about border width in Spectrum 2. Image: Example of correct usage of including dividers to separate related content. Two sections, the first labeled Folders and the second labeled Filters, are separated by a divider. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13a4d342533bda0badc4f9a0bf0e9a9b645daa6b3.png?width=750&format=png&optimize=medium)"
+      "content": "This layout is suitable when all content is related and unified by the primary purpose of the page. This single section can be subdivided using full-width dividers, or by creating visual groupings of content using proximity and spacing. View more about spacing in Spectrum 2. Image: Example of a generic product, single section content area layout. (source: https://spectrum.adobe.com/foundations/app-frame/media_1bd6570c3132e00c1dc765b1c52515dff97b92e39.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't enable scrolling on multiple areas.\n\nWhen using horizontal sections, the page should scroll as a single unit. Consider other ways to minimize the top section if needed, such as through an additional control to show and hide content. Image: Example of correct usage of scrolling, where the page scrolls as a single unit. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_13e801bea2744743556446c567b59c4132ebdc6b6.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of scrolling in multiple areas, where the page does not scroll as a single unit. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_11957be8791ecefb17c39550d0b4c5d3df575d008.png?width=750&format=png&optimize=medium)"
+      "content": "Use dividers to separate related content.\n\nDividers are useful to separate content when using spacing alone wouldn’t be clear enough to mark the boundaries of distinct areas. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider. For example, showing the contents from a selected folder, or a commenting panel of a selected file, would benefit from a divider. If showing content that’s unrelated, like an AI assistant that’s available across multiple pages, use the vertical layout. View more about border width in Spectrum 2. Image: Example of correct usage of including dividers to separate related content. Two sections, the first labeled Folders and the second labeled Filters, are separated by a divider. (source: https://spectrum.adobe.com/foundations/app-frame/media_13a4d342533bda0badc4f9a0bf0e9a9b645daa6b3.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Put scrollable content in the bottom section of a horizontal layout.\n\nThe top section of a horizontal layout should be reserved for high-attention marketing messages or quick actions, and it should not be scrollable. Put infinite scrolling and longer content in the bottom section. Image: Example of correct usage of including scrollable content in the bottom section of a horizontal layout. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f53df0119f8b3554e0d92c237c081855521a5224.png?width=750&format=png&optimize=medium)"
+      "content": "The top section can also be useful to visually indicate that the content is separate and has additional affordances, such as the ability to be minimized. For example, “welcome” type content might be shown in the top section, and recent files might be shown below. Image: Example of a generic product, using horizontal sections for the content area layout, with a top section and a bottom section. (source: https://spectrum.adobe.com/foundations/app-frame/media_15affee1906cbe98362d056855b92c441786caf97.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "This layout is suitable to separate content that’s not semantically related, and if one of the content areas can be minimized. For example, this might apply for onboarding tutorials, or to include an AI assistant. Image: Example of an app frame layout that uses vertical sections. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1fb36b6057fa86021dea6212212cf5af06755c5e1.png?width=750&format=png&optimize=medium)"
+      "content": "Don't enable scrolling on multiple areas.\n\nWhen using horizontal sections, the page should scroll as a single unit. Consider other ways to minimize the top section if needed, such as through an additional control to show and hide content. Image: Example of correct usage of scrolling, where the page scrolls as a single unit. (source: https://spectrum.adobe.com/foundations/app-frame/media_13e801bea2744743556446c567b59c4132ebdc6b6.png?width=750&format=png&optimize=medium) Image: Example of incorrect usage of scrolling in multiple areas, where the page does not scroll as a single unit. (source: https://spectrum.adobe.com/foundations/app-frame/media_11957be8791ecefb17c39550d0b4c5d3df575d008.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "This layout is suitable to separate multiple groups of content that aren’t semantically related. For example, this could show several widgets and distinct marketing messages. This layout can also be useful if a user is able to customize the page. Make sure to consider smaller breakpoints and decide how content areas should reflow, hide, or combine. In general, show the most important information at the top, and if possible, then progressively disclose the not-as-important information. Image: Example of an app frame layout that uses multiple sections in a grid. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_17f472a9fb791f6f6b4bf32f6e85b75acff1e92ab.png?width=750&format=png&optimize=medium)"
+      "content": "Put scrollable content in the bottom section of a horizontal layout.\n\nThe top section of a horizontal layout should be reserved for high-attention marketing messages or quick actions, and it should not be scrollable. Put infinite scrolling and longer content in the bottom section. Image: Example of correct usage of including scrollable content in the bottom section of a horizontal layout. (source: https://spectrum.adobe.com/foundations/app-frame/media_1f53df0119f8b3554e0d92c237c081855521a5224.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Creating attention hierarchy with gradients in the app frame.\n\nContainers in Spectrum share styles that draw different levels of attention, and the kind of container should be chosen based on the content within. Gradient backgrounds draw the most attention on a page; when used correctly, they help users better navigate the interface by drawing their attention to the most relevant, high-signal, and meaningful items at the given point in their workflow. For example, on a Home screen, gradient backgrounds might call attention to new AI features in the product. On a Learn screen, gradient backgrounds might call attention to tutorials from new creators. On a Files screen, gradient backgrounds might not be used at all in order to focus attention on asset previews. In any context, consider where you want to draw attention and what you want to highlight for the user, what the user’s intentions might be, and how gradient backgrounds may add or detract from the goals of the page. In general, less is more. The more gradients on a page, the more attention is diluted and no longer effective at communicating hierarchy of information. View more about attention hierarchy in Spectrum. While there isn’t an objective scale for each style, it can be helpful to think about backgrounds in terms of how much attention they draw, on a scale of low-to-high. Image: Diagram showing a scale of high attention to low attention elements in Spectrum 2. From low attention to high attention: spacing, lowest. Background. Emphasized background. Gradient background, highest. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1c946f08e2a2aa802108e7a62f87e16cd71066f0b.png?width=750&format=png&optimize=medium)"
+      "content": "This layout is suitable to separate content that’s not semantically related, and if one of the content areas can be minimized. For example, this might apply for onboarding tutorials, or to include an AI assistant. Image: Example of an app frame layout that uses vertical sections. (source: https://spectrum.adobe.com/foundations/app-frame/media_1fb36b6057fa86021dea6212212cf5af06755c5e1.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don’t use gradients as the background in navigational areas.\n\nWhile you may have seen past Spectrum 2 explorations showing gradients as the background in header and navigational areas, they should not be used in that context. This is because gradients that appear in the navigation of every page distract from more important information on the page, clash with other imagery, and might not work for some product segments. By using gradients in the content areas as backgrounds instead, there’s more flexibility to direct attention to different content and messages, depending on what’s important in the context of that page or workflow. Image: Example of correct usage of a gradient as a background within a content area. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1a39c1a5c36012f84ae0cce926569e9706f8e31a6.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of a gradient as a background in the header and side navigation. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10fe927048d7a8f4137f7acdc9c866a55ed5b58b0.png?width=750&format=png&optimize=medium)"
+      "content": "This layout is suitable to separate multiple groups of content that aren’t semantically related. For example, this could show several widgets and distinct marketing messages. This layout can also be useful if a user is able to customize the page. Make sure to consider smaller breakpoints and decide how content areas should reflow, hide, or combine. In general, show the most important information at the top, and if possible, then progressively disclose the not-as-important information. Image: Example of an app frame layout that uses multiple sections in a grid. (source: https://spectrum.adobe.com/foundations/app-frame/media_17f472a9fb791f6f6b4bf32f6e85b75acff1e92ab.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use gradient backgrounds to draw attention to one area.\n\nGradients are used to draw attention to important content and features. They can be used in the background of content areas. Using gradients in more than one content area results in multiple areas competing for attention. This is distracting from the task-at-hand workflows on the page. Image: Example of correct usage of using a gradient background in a single content area, with no other gradients included on the page. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1f583c9fa811c6e7a6ed8249469807b605e7238fa.png?width=750&format=png&optimize=medium)Image: Example of incorrect usage of multiple gradient backgrounds in multiple content areas, in a single page. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_1b5652087df9967978ce99a53e23c600ec454f706.png?width=750&format=png&optimize=medium)"
+      "content": "Backgrounds that use gradients are always placed within the app frame intentionally and with a strategic meaning. They should contribute to the visual hierarchy, not distract from it. And, their colors are directly tied to product brand color palettes. In the S2 app frame, gradients are only used as backgrounds in content areas — they are not used in the header and navigational areas. This allows for greater flexibility between pages where gradients may be calling attention to different kinds of content."
     },
     {
       "type": "guideline",
-      "content": "Use gradient backgrounds that reflect the colors of the product brand or feature.\n\nGradient colors are directly tied to product brand color palettes. Please reach out to the Spectrum Brand team for details on your product’s strategy for colors and usage of gradients."
+      "content": "Creating attention hierarchy with gradients in the app frame.\n\nContainers in Spectrum share styles that draw different levels of attention, and the kind of container should be chosen based on the content within. Gradient backgrounds draw the most attention on a page; when used correctly, they help users better navigate the interface by drawing their attention to the most relevant, high-signal, and meaningful items at the given point in their workflow. For example, on a Home screen, gradient backgrounds might call attention to new AI features in the product. On a Learn screen, gradient backgrounds might call attention to tutorials from new creators. On a Files screen, gradient backgrounds might not be used at all in order to focus attention on asset previews. In any context, consider where you want to draw attention and what you want to highlight for the user, what the user’s intentions might be, and how gradient backgrounds may add or detract from the goals of the page. In general, less is more. The more gradients on a page, the more attention is diluted and no longer effective at communicating hierarchy of information. View more about attention hierarchy in Spectrum. While there isn’t an objective scale for each style, it can be helpful to think about backgrounds in terms of how much attention they draw, on a scale of low-to-high. Image: Diagram showing a scale of high attention to low attention elements in Spectrum 2. From low attention to high attention: spacing, lowest. Background. Emphasized background. Gradient background, highest. (source: https://spectrum.adobe.com/foundations/app-frame/media_1c946f08e2a2aa802108e7a62f87e16cd71066f0b.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Use gradient backgrounds that reflect the colors of the product brand or feature.\n\nGradient colors are directly tied to product brand color palettes. Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Illustrator uses the brand color palette, mainly orange, in its gradient. Second example, Premiere Pro uses the brand color palette, mainly purple, in its gradient. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10930db5f8be0a15da9ae43aae5937eb33b494687.png?width=750&format=png&optimize=medium)Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Photoshop uses the brand color palette, mainly blue, in its gradient. Second example, Illustrator uses the brand color palette, mainly orange, in its gradient. Third example, Aero uses the brand color palette, mainly green, in its gradient. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10fda315a0553ad584dbf6968c1b9e3d6ddf53913.png?width=750&format=png&optimize=medium)"
+      "content": "Don’t use gradients as the background in navigational areas.\n\nWhile you may have seen past Spectrum 2 explorations showing gradients as the background in header and navigational areas, they should not be used in that context. This is because gradients that appear in the navigation of every page distract from more important information on the page, clash with other imagery, and might not work for some product segments. By using gradients in the content areas as backgrounds instead, there’s more flexibility to direct attention to different content and messages, depending on what’s important in the context of that page or workflow. Image: Example of correct usage of a gradient as a background within a content area. (source: https://spectrum.adobe.com/foundations/app-frame/media_1a39c1a5c36012f84ae0cce926569e9706f8e31a6.png?width=750&format=png&optimize=medium) Image: Example of incorrect usage of a gradient as a background in the header and side navigation. (source: https://spectrum.adobe.com/foundations/app-frame/media_10fe927048d7a8f4137f7acdc9c866a55ed5b58b0.png?width=750&format=png&optimize=medium)"
     },
     {
       "type": "guideline",
-      "content": "Don't create your own gradients or customize them.\n\nGradients should always be delivered directly from the Spectrum Brand team and used as-is. Do not modify them. Image: Example of incorrect application of a gradient as a background in a content area. A modified gradient blending orange and green, that does not follow the Brand gradient system and standards. (source: https://preview.spectrum.adobe.com/foundations/app-frame/media_10a7448b827211c8ece643e26ebbd16ded2359004.png?width=750&format=png&optimize=medium)"
+      "content": "Use gradient backgrounds to draw attention to one area.\n\nGradients are used to draw attention to important content and features. They can be used in the background of content areas. Using gradients in more than one content area results in multiple areas competing for attention. This is distracting from the task-at-hand workflows on the page. Image: Example of correct usage of using a gradient background in a single content area, with no other gradients included on the page. (source: https://spectrum.adobe.com/foundations/app-frame/media_1f583c9fa811c6e7a6ed8249469807b605e7238fa.png?width=750&format=png&optimize=medium) Image: Example of incorrect usage of multiple gradient backgrounds in multiple content areas, in a single page. (source: https://spectrum.adobe.com/foundations/app-frame/media_1b5652087df9967978ce99a53e23c600ec454f706.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Use gradient backgrounds that reflect the colors of the product brand or feature.\n\nGradient colors are directly tied to product brand color palettes. Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Illustrator uses the brand color palette, mainly orange, in its gradient. Second example, Premiere Pro uses the brand color palette, mainly purple, in its gradient. (source: https://spectrum.adobe.com/foundations/app-frame/media_10930db5f8be0a15da9ae43aae5937eb33b494687.png?width=750&format=png&optimize=medium) Image: Example of correct usage of gradient backgrounds that reflect the colors of their associated product. First example, Photoshop uses the brand color palette, mainly blue, in its gradient. Second example, Illustrator uses the brand color palette, mainly orange, in its gradient. Third example, Aero uses the brand color palette, mainly green, in its gradient. (source: https://spectrum.adobe.com/foundations/app-frame/media_10fda315a0553ad584dbf6968c1b9e3d6ddf53913.png?width=750&format=png&optimize=medium)"
+    },
+    {
+      "type": "guideline",
+      "content": "Don't create your own gradients or customize them.\n\nGradients should always be delivered directly from the Spectrum Brand team and used as-is. Do not modify them. Image: Example of incorrect application of a gradient as a background in a content area. A modified gradient blending orange and green, that does not follow the Brand gradient system and standards. (source: https://spectrum.adobe.com/foundations/app-frame/media_10a7448b827211c8ece643e26ebbd16ded2359004.png?width=750&format=png&optimize=medium)"
     }
   ],
-  "sourceUrl": "https://preview.spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
+  "sourceUrl": "https://spectrum.adobe.com/foundations/app-frame/content-area-browsing-context",
   "lastUpdated": "2026-09-04",
   "status": "published",
   "tags": [